githubnext/chopinPublic

Let's compose rich plans together

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

bug
LA

## 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;` / `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;`, `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

  1. lavaman131added label buglast month on GitHub

  2. lavaman131assigned lavaman131last month on GitHub

  3. lavaman131referenced this in Draw Mermaid labels as HTML so arrows and entities read as written #313last month on GitHub

  4. lavaman131referenced 1f6b20d99badlast month on GitHub

  5. lavaman131referenced cc7e86d8ed93last month on GitHub

  6. lavaman131referenced 2025169366a1last month on GitHub

  7. lavaman131closedlast month on GitHub

  8. benjaminkittreferenced d801084a59d9last month on GitHub