Mermaid labels show > or raw entities instead of ->, <, & with SVG labels
lavaman131 opened ·
## Problem
Mermaid diagrams written by the Planner show garbled text in some labels, for example a node for a function signature:
```mermaid 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:
- mermaid-js/mermaid#4390 and #7016: `<`, `>` and `&` behave chaotically with `htmlLabels: false`. - mermaid-js/mermaid#7436 (merged 2026-03-03, in 11.13.0+): stops escaping `<` and `&` for non-HTML labels. - mermaid-js/mermaid#7276 (merged 2026-02-27): plain flowchart labels are no longer treated as markdown, a regression from 11.0. - 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
- #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
lavaman131added label buglast month on GitHub
lavaman131assigned lavaman131last month on GitHub
lavaman131referenced this in Draw Mermaid labels as HTML so arrows and entities read as written #313last month on GitHub
lavaman131referenced 1f6b20d99badlast month on GitHub
lavaman131referenced cc7e86d8ed93last month on GitHub
lavaman131referenced 2025169366a1last month on GitHub
benjaminkittreferenced d801084a59d9last month on GitHub