Mermaid labels show &gt; or raw entities instead of ->, <, & with SVG labels #312

Problem

Mermaid diagrams written by the Planner show garbled text in some labels, for example a node for a function signature:

flowchart LR
  A["create_router(pool: SqlitePool, config: Config) -> Router"] --> B[Server]

The -> renders as > / gt or other raw text instead of the arrow. Models often write labels with <, >, &, generics (Vec<T>), arrows (->, =>) and signatures, so this shows up a lot.

Cause

Chopin renders Mermaid with securityLevel: "strict" and htmlLabels: false (packages/editor/src/widgets/mermaid-theme.ts). That's the right security choice, but in Mermaid 11.12.0, which Chopin pins in the root catalog, SVG (non-HTML) labels are set with .textContent after Mermaid's sanitizer has already HTML-escaped them. The escaped entities therefore appear literally. Upstream issues and fixes:

• > and < are not being escaped properly when "flowchart": {"htmlLabels": false} is used mermaid-js/mermaid#4390 and #7016: <, > and & behave chaotically with htmlLabels: false.
• fix: prevent escaping < and & when htmlLabels: false mermaid-js/mermaid#7436 (merged 2026-03-03, in 11.13.0+): stops escaping < and & for non-HTML labels.
• Fix non-markdown labels in flowcharts being treated like markdown mermaid-js/mermaid#7276 (merged 2026-02-27): plain flowchart labels are no longer treated as markdown, a regression from 11.0.
• Entity codes disabled with htmlLabels: false mermaid-js/mermaid#7015 and #8186 (still open): entity codes such as #gt; and #quot; render literally when htmlLabels is off.

Proposal

1. Upgrade mermaid to the latest 11.x (11.17.2). Keep securityLevel: "strict" and htmlLabels: false.
2. Until #8186 lands, decode Mermaid's documented entity codes (#lt;, #gt;, #amp;, #quot;, #35;, and numeric #NNN;) in rendered SVG text only. Never change the source, and never inject markup.
3. Check that Chopin's Mermaid theme (THEME_CSS, refineDiagram) still draws the design-audit diagrams the same way after the upgrade.

Acceptance criteria

• In the rendered SVG, a flowchart label create_router(pool: SqlitePool, config: Config) -> Router reads exactly that, with no >, gt or other entity text. The same holds for Vec<T>, a && b, => and a quoted label containing ".
• Mermaid entity codes (#gt;, #quot;) render as their characters.
• The security posture is unchanged: still securityLevel: "strict" and htmlLabels: false, and no HTML from labels is ever interpreted.
• Browser regression coverage (Playwright, since rendering needs a real DOM) for the cases above. Design-audit Mermaid examples and the parse-error treatment are unchanged.
• bun test, bun run types, bun run ci and the affected E2E tests pass.

Related

• [Design] Style Mermaid diagrams #165: Mermaid visual styling (design track). This issue only fixes text correctness and doesn't restyle anything.

Assistant-workflow: inline
Assistant-duration: unmeasured
Assistant-verification: code inspection passed: read mermaid-theme.ts config (strict, htmlLabels false) and the pinned mermaid 11.12.0; cross-checked upstream issues #4390, #7015, #7016 and PRs #7436, #7276, #8186