Skip to content

chore(deps): bump mermaid to 12.0.0 (lockfile + SRI; supersedes #981) - #984

Open
trac3r00 wants to merge 2 commits into
mainfrom
omocat/review-requested-981-chore-deps-6eyjaj
Open

trac3r00 wants to merge 2 commits into
mainfrom
omocat/review-requested-981-chore-deps-6eyjaj

Conversation

@trac3r00

@trac3r00 trac3r00 commented Sep 28, 2026 •

Copy link
Copy Markdown
Owner

Supersedes #981 (dependabot), which changed package.json only.

What changed

  • package.json: mermaid ^11.15.0 -> ^12.0.0 (same as chore(deps): bump mermaid from 11.17.2 to 12.0.0 #981).

  • bun.lock: regenerated against the public npm registry (mermaid@12.0.0, @mermaid-js/parser@2.0.0, adds elkjs, chevrotain and friends). 26-line diff, no private registry URLs.

  • src/routes/mermaid-studio.js, src/routes/markdown-editor.js: the sha384 SRI on /vendor/mermaid.min.js was refreshed with node scripts/update-sri.mjs. Without this change the browser blocks the new bundle and both tools stop rendering.

  • src/routes/mermaid-studio.js, src/routes/markdown-editor.js (b269868): mermaid.initialize now pins the 11.x defaults that 12 changed: layout: 'dagre', look: 'classic', and flowchart/state minNodeWidth: 0, wrappingWidth: 200. The bump therefore does not change how diagrams look. Flowchart, state, sequence, class and long-label samples render with exactly the 11.15.0 viewBox sizes.

Evidence

  • chore(deps): bump mermaid from 11.17.2 to 12.0.0 #981 CI failure reproduced locally: running bun install --frozen-lockfile on chore(deps): bump mermaid from 11.17.2 to 12.0.0 #981's tree fails with error: lockfile had changes, but lockfile is frozen, the same error CI reported. On this branch the same command passes.
  • bun run build exits 0. vitest run passes 59 files and 712 tests.
  • SRI: the integrity value in the served HTML matches the sha384 of the /vendor/mermaid.min.js bytes served by wrangler dev, and the bundle contains version:"12.0.0".
  • Browser comparison: Playwright/Chromium against wrangler dev, with 11.15.0 injected via route interception for the baseline. Covered desktop 1280 and mobile 390, light and dark themes, the Mermaid Studio flowchart and sequence sample, the Markdown Editor flowchart + subgraph and stateDiagram, and Download SVG.
    • With 12 there are no console errors and no horizontal overflow. The light/dark theme switch still works through theme: default|dark and the pinned text colours.
    • Download SVG produces a valid diagram.svg with the SVG xmlns, and the file renders on its own.
    • Effective config: look: classic is unchanged, while layout moves from dagre to elk.

Notes

  1. Layout/appearance (resolved in b269868): before the pin, 12 lays out flowchart, state and class diagrams with ELK by default. Edges become orthogonal and nodes get a subtle shadow. The layout also comes out wider, so the Studio default flowchart gets scaled down in the 300px-wide preview and its labels are visibly smaller. In the Markdown Editor preview, the flowchart grows from 305x473 to 408x551. layout: 'dagre' alone was not enough: look: neo and the 120px min/wrap width still widened nodes (Studio 408x475 -> 572x502). With the full pin, both routes match 11.15.0 at 1280/390 in light and dark.
  2. Bundle size: mermaid.min.js grows from 3.31 MB to 5.58 MB raw, and from 0.91 MB to 1.60 MB gzipped (+0.69 MB), because the IIFE build now inlines ELK. This only affects /mermaid-studio and /markdown-editor. Setting layout: 'dagre' does not shrink the file.
  3. Browser floor: Mermaid advertises ES2024 / Safari 17.4+, but the shipped mermaid.min.js has the same syntax floor as 11.15.0. Both parse with acorn at ES2022 and fail at ES2021 on class static blocks. Neither uses the regex v flag or ES2023/2024 built-ins such as Object.groupBy, Promise.withResolvers or toSorted. defaults resolves to Chrome 109+ / Safari 18.5+, and the entries that cannot parse 12 (KaiOS, Opera Mini, UC 15.5, QQ 14.9) could not parse 11.15 either. Support is not narrowed, and no transpile is needed.

Risk

Medium-low. The change is limited to two routes. The main risk is the visual change and the larger download described above.

Rollback

Revert this commit. That restores ^11.15.0, the old bun.lock and the old SRI together; the three must move as one unit.


Summary by cubic

Upgrades mermaid to 12.0.0 (supersedes #981) and regenerates bun.lock so the bump installs cleanly in CI, which #981 missed by changing only package.json. Refreshes the sha384 SRI for /vendor/mermaid.min.js on both routes; without it the browser blocks the new bundle and Mermaid Studio and the Markdown Editor stop rendering.

Mermaid 12 changes the default layout, look, and node sizing, so both mermaid.initialize calls now pin the 11.x values to keep the bump behavior-neutral.

Migration

  • Both routes pin layout: 'dagre', look: 'classic', and the 11.x min node width / wrapping width, so rendered diagrams keep their previous shape and size.
  • mermaid.min.js grows from 3.31 MB to 5.58 MB raw (1.60 MB gzipped) and only affects /mermaid-studio and /markdown-editor.
  • Mermaid 12 targets ES2024 and Safari 17.4+; the project's defaults browserslist resolves to Safari 18.5, so there is no conflict.

Written for commit b269868. Summary will update on new commits.

Review in cubic

Supersedes dependabot #981, which changed package.json only and failed
bun install --frozen-lockfile in CI. Regenerates bun.lock against the
public npm registry and refreshes the sha384 SRI on the two routes that
load /vendor/mermaid.min.js (update-sri.mjs).

@cubic-dev-ai cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 4 files

Confidence score: 3/5

  • In package.json, Mermaid 12’s ES2024 bundle may fail to parse in browsers below Safari 17.4, disabling Mermaid rendering for those users; transpile the bundle or narrow the supported browser target.
Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="package.json">

<violation number="1" location="package.json:36">
P2: Mermaid 12's ES2024 bundle is copied without transpilation, but this app still declares the broad `defaults` browser target. Browsers below Safari 17.4 may fail to parse the script and lose Mermaid rendering; transpile the vendor bundle or explicitly raise the supported browser baseline.</violation>
</file>

Shadow auto-approve: would not auto-approve because issues were found.

Re-trigger cubic

Comment thread package.json
"jsqr": "^1.4.0",
"marked": "^18.0.5",
"mermaid": "^11.15.0",
"mermaid": "^12.0.0",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Mermaid 12's ES2024 bundle is copied without transpilation, but this app still declares the broad defaults browser target. Browsers below Safari 17.4 may fail to parse the script and lose Mermaid rendering; transpile the vendor bundle or explicitly raise the supported browser baseline.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At package.json, line 36:

<comment>Mermaid 12's ES2024 bundle is copied without transpilation, but this app still declares the broad `defaults` browser target. Browsers below Safari 17.4 may fail to parse the script and lose Mermaid rendering; transpile the vendor bundle or explicitly raise the supported browser baseline.</comment>

<file context>
@@ -33,7 +33,7 @@
     "jsqr": "^1.4.0",
     "marked": "^18.0.5",
-    "mermaid": "^11.15.0",
+    "mermaid": "^12.0.0",
     "node-forge": "^1.4.0",
     "pako": "^3.0.0",
</file context>

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked against the real targets rather than Mermaid's advertised floor; no change needed here.

  • npx browserslist (defaults) resolves to Chrome 109+, Safari/iOS 18.5+, Firefox 140+, Samsung 28, plus UC 15.5, QQ 14.9, KaiOS 2.5/3.x and Opera Mini.
  • Parsing the shipped mermaid.min.js with acorn: both 11.15.0 and 12.0.0 fail at ecmaVersion: 2021 (class static blocks) and pass at 2022, so the syntax floor did not move. Neither bundle has a regex v flag, as a literal or through RegExp(..., "v").
  • There are no ES2023/2024 built-ins in the 12 bundle (Object.groupBy, Map.groupBy, Promise.withResolvers, toSorted/toReversed/toSpliced, findLast, isWellFormed, Array.fromAsync all absent). What it does use (Object.hasOwn, .at, structuredClone) is covered by Chrome 109.
  • The browsers in defaults that cannot parse 12 (KaiOS, Opera Mini, UC 15.5, QQ 14.9) could not parse 11.15 either.

So the bump does not narrow support, and neither transpiling nor raising the baseline is warranted.

Comment thread src/routes/mermaid-studio.js
@trac3r00

Copy link
Copy Markdown
Owner Author

Follow-up verification (OmOcat, no approve/merge/deploy):

CI on #984 confirmed from logs (runs 36488773217 / 36488739483): bun install --frozen-lockfile clean, Build green, Vitest 59 files / 712 passed, Playwright 282 passed.

Bundle / SRI / lockfile

  • bun install --frozen-lockfile in the branch: no changes. bun.lock has no registry URLs; every new or bumped entry is a transitive dependency of mermaid@12.0.0 (elkjs 0.9.3, chevrotain 11.1.2, @mermaid-js/parser 2.0.0, ...).
  • The sha384 of dist/vendor/mermaid.min.js (12.0.0, 5,575,485 B) equals the integrity attribute in both routes and in the HTML served by wrangler dev.

Mermaid 12 release notes vs this app

  • Browser floor (ES2024, Safari 17.4+): no conflict with the defaults browserslist, apart from KaiOS.
  • Layout: the effective config, measured in the browser, is layout: elk on 12 and dagre on 11. This is the visual change that still needs a decision.
  • Theme / look: both initialize calls pin theme, so 12's new default palette does not apply. The effective look measures classic on both 11 and 12.
  • defaultRenderer (removed in 12), @mermaid-js/layout-elk and registerLayoutLoaders are not used anywhere in the code.

Real-browser QA (Chromium against wrangler dev): Mermaid Studio and Markdown Editor at 1280 and 390, light and dark, render with 0 console errors and no horizontal overflow.

Pre-existing bug found (not caused by this PR): on mobile (390px), switching the Markdown Editor to the Preview tab shows empty Mermaid diagrams, because the diagrams are rendered while the preview pane is hidden. With 11.15.0 the same steps even throw Could not find a suitable point for the given distance. This should be a separate follow-up.

Gate review: APPROVE (HIGH). The first pass was REJECT for one procedural reason: there was no code review report for this change. After that report was added (it covers the diff, the slop/overfit check and the lockfile registry/integrity), the re-review found no blocking issues.

The decisions listed in #984 still stand: keep ELK or pin layout: 'dagre'; +0.69 MB gzipped on the two Mermaid pages.

Mermaid 12 moves flowchart/state/class/sequence diagrams to the ELK layout,
the neo look, and a 120px node min width / wrap width. Neither route set these,
so every diagram silently re-laid out. Pin layout 'dagre', look 'classic',
and the 11.x flowchart/state minNodeWidth/wrappingWidth in both
mermaid.initialize call sites so the bump stays behaviour-neutral.

Rendered flowchart, state, sequence, class and long-label samples now match
11.15.0 viewBox sizes exactly.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 issues found across 2 files (changes from recent commits).

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Shadow auto-approve: would not auto-approve. Auto-approval blocked by 1 unresolved issue from previous reviews.

Re-trigger cubic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant