Draw Mermaid labels as HTML so arrows and entities read as written #313
- LA
Mermaid labels written by the Planner come out garbled. A label like `create_router(pool: SqlitePool, config: Config) -> Router`, a generic like `Vec#lt;T#gt;` or a quote like `#quot;hi#quot;` renders as `<T>`, `"` or `>` instead of the characters.
The cause is `htmlLabels: false` in `packages/editor/src/widgets/mermaid-theme.ts`. With it, Mermaid draws labels as SVG `<text>`, and that path has known upstream bugs: it sets `.textContent` with text that is already HTML-escaped (mermaid-js/mermaid#4390, #7015, #7016). Upgrading alone doesn't fix it. On 11.17, the bare `>` in `->` and `=>` is dropped instead.
Popular renderers don't turn HTML labels off. GitHub and GitLab render in sandboxed iframes, GitLab turned HTML labels on once `strict` closed the XSS hole (gitlab!63101), and Docusaurus and Obsidian use Mermaid's defaults. This PR does the same.
## What changes
- `packages/editor/src/widgets/mermaid-theme.ts`: drop `htmlLabels: false`. `securityLevel` stays `"strict"`, so labels are sanitized with DOMPurify and scripts and click handlers stay off. `<script>` in a label is stripped. - `mermaid` 11.12.0 → 11.17.2 in the root catalog. - `e2e/code.e2e.ts`: a regression test for arrows, `&&`, `=>`, `#lt;`/`#gt;` and `#quot;` in node and edge labels. The wide-diagram geometry helper now counts HTML labels and their `foreignObject` boxes instead of SVG `<text>`.
`Vec<T>` written raw is still removed, because DOMPurify treats `<T>` as an unknown tag. GitHub behaves the same way, and Mermaid's documented form `Vec#lt;T#gt;` works.
## Design
The theme (#225) already styles HTML node and edge labels (`.nodeLabel`, `.labelBkg`), so diagrams keep the Chopin look. Node labels get slightly taller line spacing. Before (`main`, top) and after (bottom), for a flowchart, a class diagram and a state diagram:

This doesn't overlap #165 (Mermaid visual system). That issue's "current behavior" note about HTML labels being disabled is now out of date.
## Verification
- The new e2e test fails against `main`'s config, with labels reading `Vec<T> orOption<&str>` and `say "hi" whenn > 0`, and passes with this change. - `bun run e2e e2e/code.e2e.ts e2e/responsive-content.e2e.ts`: 28 passed. - `bun test` (3669 pass, 3 skip, 0 fail), `bun run types` and `bun run ci` all pass, with no new Impeccable findings.
Fixes #312
Assistant-workflow: inline Assistant-duration: 15m converged, estimated unmeasured Assistant-verification: playwright e2e passed: new label test red on main's config, green with this change; code.e2e.ts + responsive-content.e2e.ts 28 passed Assistant-verification: bun test passed: 3669 tests, 0 fail Assistant-verification: bun run types and bun run ci passed: no new Impeccable findings Assistant-verification: manual browser comparison passed: flowchart, sequence, class, state and ER before/after screenshots keep the Chopin theme User-preference: Prefer what popular projects do (Mermaid HTML labels under strict) over custom patches to dependencies Co-authored-by: Alex Lavaee <lavaman131@github.com>
lavaman131assigned lavaman131last month on GitHub
lavaman131head-ref-force-pushed cc7e86d8ed93last month on GitHub
lavaman131head-ref-force-pushed 2025169366a1last month on GitHub
lavaman131merged d801084a59d9last month on GitHub
lavaman131head-ref-deletedlast month on GitHub