chore(deps): bump mermaid from 11.17.2 to 12.0.0

[dependabot]

Bumps mermaid from 11.17.2 to 12.0.0.

Release notes

Sourced from mermaid's releases.

mermaid@12.0.0

Mermaid 12.0.0 ships ELK as the bundled default layout engine, a new redux-color / neo default appearance, and two new diagram types: UML use case diagrams.

This is a breaking release (ES2024, Safari 17.4+, Node 22.12+). Existing flowcharts, state and class diagrams will re-lay out and recolour; add layout: dagre, theme: default and look: classic to your config to keep the old look. Full changelog below.

Major Changes

• #8213 33442fd Thanks @​aloisklink! - chore!: require ES2024, Safari 17.4+, Node.JS v22.12+

  Mermaid is now built to target Safari 17.4+ and ES2024. If you need to support older browsers, you may need to polyfill or transpile mermaid.

  Safari 17.4+ has been chosen as the floor, as unlike Firefox/Chrome, older iOS devices don't get major Safari updates.

  Node.JS v22.12+ is also declared as requirement in our package.json files, but as mermaid requires a browser, this is mainly so we can use dependencies that also declare a Node.JS v22.12+ requirement, without causing issues for users when running npm install.

• #8155 810893c Thanks @​ashishjain0512! - feat!: ELK is now bundled with mermaid and is the default layout algorithm.

  ELK previously shipped as a separate @mermaid-js/layout-elk package that sites had to install and register. It is now part of mermaid itself and registered automatically, so layout: elk — and the elk.stress, elk.force, elk.mrtree, elk.sporeOverlap, elk.box and elk.rectpacking variants — work with no setup.

  This changes how existing diagrams look. Flowchart, state, class, entity-relationship, requirement, use-case diagrams that do not specify a layout are now laid out by ELK instead of dagre. To keep the previous layout, set dagre explicitly:

  ---
  config:
    layout: dagre
  ---

  or globally, mermaid.initialize({ layout: 'dagre' }).

  Mindmap is unchanged: it keeps laying out with cose-bilkent unless a layout is explicitly requested (in the tiny build, which ships neither ELK nor cose-bilkent, it falls back to dagre).

  Other notes:

  • ELK is loaded as a separate chunk in the ESM builds, so it is only fetched when a diagram actually uses it. The single-file IIFE build (mermaid.min.js) inlines it and grows by roughly 500 kB gzipped.
  • The tiny build deliberately omits ELK to stay small, and falls back to dagre for diagrams that ask for an ELK layout. Its size is unchanged.
  • @mermaid-js/layout-elk is no longer needed on normal builds — existing mermaid.registerLayoutLoaders(elkLayouts) calls keep working and can be removed. It is still published, and remains the way to add ELK to the tiny build.
  • dist/mermaid.esm.min.mjs now contains syntax that es-module-lexer (used by Vite) rejects with content contains invalid JS syntax. Bundler users are unaffected as long as they import the mermaid package specifier, which resolves to the core build; only builds that point Vite directly at that dist file need to switch to the package specifier or the core build.
  • State diagrams now resolve their layout through the same registration check as every other diagram, so an unavailable layout falls back instead of failing to render.

  An unrecognised theme name now resolves to the default theme in name as well as in variables; previously the invalid name stayed in place while the default's variables were loaded, and every palette-aware stylesheet gates on the name. theme: 'null', the documented way to disable the pre-defined themes, is unaffected. Note that neo paints node strokes with a gradient when the theme sets useGradient, which base does; setting a custom nodeBorder on base turns the gradient off.

• #8211 a19bd08 Thanks @​ashishjain0512! - Removed: the defaultRenderer option of the flowchart, class and state config sections.

  Use the top-level layout option instead:

... (truncated)

Commits

• 98a0945 Merge pull request #8237 from mermaid-js/changeset-release/master
• 96be564 Version Packages
• dd65cfd Merge pull request #8239 from mermaid-js/bug/appearance-docs-release-version-...
• e1cc7c2 fix(tests): accept a released version in the appearance docs marker
• 8382837 Merge pull request #8211 from mermaid-js/release/12.0.0
• 8a90389 ci: trigger a preview publish
• 01b8590 ci: attempt every preview package before failing the publish step
• 1997a23 ci: record why the preview publish of layout-elk and tiny is refused
• 0304007 ci: drop --access public from the preview publish of layout-elk and tiny
• 223be92 docs: capitalize Markdown in README tagline
• Additional commits viewable in compare view

You can trigger a rebase of this PR by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

---

Summary by cubic

Bumps mermaid from 11.17.2 to 12.0.0, which changes the default layout engine to ELK and the default theme to neo. Existing diagrams may look different; to preserve the previous appearance, set layout: dagre, theme: default, and look: classic in your Mermaid config.

Migration

• Requires ES2024, Safari 17.4+, and Node.js 22.12+.
• The defaultRenderer option for flowchart, class, and state diagrams is removed; use the top-level layout option instead.
• @mermaid-js/layout-elk is no longer needed on normal builds; existing registerLayoutLoaders calls can be removed.

^{Written for commit da428a0. Summary will update on new commits.}

Note
Automatic rebases have been disabled on this pull request as it has been open for over 30 days.

[trac3r00]

Verification summary (OmOcat, no approve/merge):

• CI failure cause: this PR changes package.json only, so bun install --frozen-lockfile fails with lockfile had changes, but lockfile is frozen (reproduced locally). The bundled /vendor/mermaid.min.js also changes bytes, which means the sha384 SRI in mermaid-studio.js and markdown-editor.js has to be refreshed too, or the browser blocks the script.
• Both fixes are in chore(deps): bump mermaid to 12.0.0 (lockfile + SRI; supersedes #981) #984: the lockfile is regenerated and the SRI is refreshed via scripts/update-sri.mjs. With them, the build passes, vitest passes 712/712, the served bundle is 12.0.0, and the SRI matches. Rendering, light/dark themes and Download SVG work on desktop 1280 and mobile 390 with no console errors.

Choices for the maintainer (left unchanged, details and numbers in #984):

1. ELK is now the default layout, so flowchart, state and class diagrams re-lay out: edges become orthogonal and nodes get a shadow. The Studio preview also scales down, so labels get smaller. layout: 'dagre' restores the old look.
2. mermaid.min.js grows by +0.69 MB gzipped (0.91 → 1.60 MB) because ELK is inlined. This affects the two Mermaid pages only.
3. The Safari 17.4+/ES2024 floor does not conflict with the project's browserslist defaults (Safari/iOS ≥ 18.5), apart from KaiOS.

If #984 is taken, this PR can be closed.

[trac3r00]

Follow-up verification is done; the results are in #984 (CI green, SRI/lockfile consistent, desktop and mobile rendering QA, gate review APPROVE). Two decisions remain for the maintainer: keep ELK or pin layout: 'dagre', and accept +0.69 MB gzipped on the two Mermaid pages.