[seijikohara]

Summary

• Update mermaid from 11.15 to 12.2.0.
• Keep macOS 13 as the minimum and safari16 as the macOS/Linux build target. mermaid 12 states Safari 17.4+ as its baseline, so this PR adds small runtime shims (src/lib/polyfills/mermaid-runtime.ts), loaded right before mermaid.
• Pin layout: 'dagre' and look: 'classic' so existing diagrams render as they do today.

What mermaid 12 needs beyond Safari 16

The 12.0.0 release (changeset #8213) raised mermaid's build target to ES2024 / Safari 17.4 and says: "If you need to support older browsers, you may need to polyfill or transpile mermaid". The commit changes only build settings, not application code. I checked the published 12.2.0 package and its dependencies:

Need	Where	Safari	Fix
Class static blocks (syntax)	mermaid and parser chunks	16.4	Vite lowers them for safari16; the built dist/ contains none
new CSSStyleSheet(), unguarded, on every render	mermaid createCssStyles(), C4 styles	16.4	Shim: the sheet of an inert <style media="not all"> element
URL.canParse, unguarded	@braintree/sanitize-url (diagram links)	17	Shim
Object.groupBy, unguarded	chevrotain 13 grammar validation (use-case diagrams)	17.4	Shim
Error.captureStackTrace, replaceSync, OffscreenCanvas, trustedTypes	various	newer	Already feature-checked; nothing needed

Regex: no v flag, d flag, modifiers or duplicate named groups. The only lookbehind is marked's guarded feature probe. Nothing needs an engine feature that cannot be polyfilled.

CSSStyleSheet and URL.canParse were already needed by the mermaid 11.15+ that kogu ships today. On WebKit before 16.4, every mermaid render currently fails with "Illegal constructor". So the shims also fix an existing problem on older macOS 13 installs. Only Object.groupBy is new in 12.

Each shim installs only when the API is missing. I chose hand-written shims (about 0.5 kB) over core-js because core-js has no CSSStyleSheet constructor polyfill, and its two relevant modules would add about 19 kB minified for two one-line functions. The shims follow the spec semantics that matter here: Object.groupBy returns a null-prototype object keyed by property key.

Configuration

mermaid 12 makes ELK the default layout and neo the default look. Following the 12.0.0 release notes ("add layout: dagre, theme: default and look: classic to your config to keep the old look"), loadMermaid() now sets layout: 'dagre' and look: 'classic'. A diagram can still opt into ELK through front matter; the ELK chunk then loads on demand. kogu calls only initialize and render. None of the removed APIs (defaultRenderer, layout-renderer exports, old diagram IDs) are used.

Sources

• npm: mermaid 12.2.0, published 2026-10-13 — https://www.npmjs.com/package/mermaid/v/12.2.0
• Release notes 12.0.0 — https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0 (12.1.0 and 12.2.0 linked from there)
• Browser target change — [v12] chore!: require ES2024, Node.js 22.12, and Safari 17.4 mermaid-js/mermaid#8213 (commit 33442fd)
• Browser support statement — https://github.com/mermaid-js/mermaid/blob/develop/docs/config/usage.md
• Safari versions: MDN browser-compat-data for CSSStyleSheet() constructor (16.4), URL.canParse (17), Object.groupBy (17.4), class static blocks (16.4)

Test Plan

• bun install --frozen-lockfile, bun run lint, bun run format:check, bun run check, bun run build
• bun run test: 243 passed after rebasing on the jschardet 4 update, including 4 new tests for the shims: grouping and null prototype, URL.canParse, native implementations kept, and a CSSStyleSheet constructor that throws "Illegal constructor"
• The safari16 production build has no class static blocks in its JS chunks (grep "static {" matches only a string inside the TypeScript language worker)
• Runtime check in Chromium (Chrome for Testing 153) with an init script that hides every API newer than a chosen Safari version and makes new CSSStyleSheet() throw, as WebKit before 16.4 does. I built a scratch page with kogu's safari16 target, kogu's initialize options, and this PR's shim module, and rendered 41 sources covering every diagram family:
  • Simulated Safari 16.0 without shims: all 41 fail ("Illegal constructor").
  • Simulated Safari 16.0 and 16.4 with the shims: 34 render, the same as unmodified Chromium. The other 7 are parse errors identical to unmodified Chromium: 5 guessed syntaxes for new beta diagram types and 2 intentionally broken inputs. The only remaining API touched is the guarded Error.captureStackTrace.

Not verified: a real WebKit 16.x. The only available WebKit is current, and the simulation cannot reproduce WebKit-only rendering differences. Also not verified: the diagram preview inside the app. In the markdown editor preview, fenced code blocks, including mermaid, render as a CODE_BLOCK_1 placeholder on main too, so that page cannot show diagrams today. That is a separate bug.

[Copilot]

🔵 Needs a closer look

Compatibility below Mermaid’s supported browser baseline remains unverified in real WebKit 16.x and the app’s diagram preview.

No open issues 🎉

What changed in this PR

Upgrades Mermaid to 12.2.0 while preserving existing diagram styling and targeting Safari 16 compatibility.

Changes:

• Updates Mermaid and its locked dependencies.
• Adds runtime compatibility shims and focused tests.
• Explicitly retains the Dagre layout and classic look.

File	Description
src/​lib/​services/​diagram.ts	Installs shims before loading Mermaid and preserves rendering defaults.
src/​lib/​polyfills/​mermaid-runtime.ts	Adds three runtime compatibility shims.
src/​lib/​polyfills/​mermaid-runtime.test.ts	Tests shim behavior, native preservation, and stylesheet cleanup.
package.json	Updates Mermaid to ^12.2.0.
bun.lock	Locks Mermaid 12.2.0 and updated dependencies.

_{Review effort: Balanced}