fix(app): mermaid flowcharts with subgraphs, shapes and line breaks draw as written

[sean-brydon]

This also lands #101 (Mermaid and diff blocks in replies), which never reached main. #101 was retargeted onto #100's branch to stack them. #100 merged first, and this repo doesn't delete branches on merge, so GitHub didn't move #101 to main. #101 then merged into the stale feat/chat-callouts-refs branch. Its commit is replayed here as its own commit (feat(app): mermaid flowcharts and diffs…), rebased on current main. Its changelog bullets moved from the shipped v0.3.20 to Unreleased.

The fix. An agent's diagram of a physics step (below) drew badly with the app's own Mermaid renderer: stray (["…"]) and [/"…"/] around labels, a literal <br/>, quoted edge labels, and no subgraphs, so Step became a bare node. lib/art/mermaid.ts and components/art/flowchart.tsx now handle:

• Shapes: (..)/([..]) pill, [[..]] subroutine, [(..)] cylinder, ((..)) and (((..))) ellipses, >..] flag, {{..}} hexagon, both parallelograms and both trapezoids, plus A@{ shape: … } for about 35 names. {..} stays the tinted box (it was never a diamond).
• Labels: quotes stripped, <br> variants become real lines (SVG <tspan>, and the node grows to fit), entities decoded, simple tags dropped. It's SVG text only, never HTML.
• Edges: -->, ---, -.->, ==>, ===, -.-, --o, --x, <-->, ~~~, labels in all four styles, chains (A --> B --> C) and A & B --> C & D. Also ;, front matter and %%{init}%%.
• Subgraphs: nested and titled, drawn as tinted group boxes. Each is laid out inside first, then placed as a block. Edges to a subgraph's id meet its box, and direction inside a subgraph is honoured as Mermaid does.
• Loops: edges that close a loop are left out of the layering and curve round the side. Charts with loops were badly laid out before; charts without them are laid out exactly as before.
• Unreadable lines are skipped; a chart that can't be drawn still shows as its source.
• Not yet: a real diamond for {..}, multi-line edge labels, style/classDef/click.

Proof: the agent's diagram from cal, verbatim, in a chat reply.

	Light	Dark
Before (#101's renderer)
After

At the default 680px column it scrolls sideways: light · dark. Simple flowcharts are unchanged: the artifact map is pixel-identical before and after (light, dark).

Checks

• tsc, typecheck:plugins, check:titles, check:csp, check:themes, pnpm build, npx tsc -p e2e and the docs build pass.
• pnpm test: 463 tests pass, including the new lib/art/mermaid.test.ts, 10 tests:
  • every shape, label and edge form, chains and &;
  • nested subgraphs, and the fixture's exact nodes, edges and groups with containment and no overlaps;
  • simple charts laid out exactly as before;
  • loops and robustness.
• e2e/code-blocks.spec.ts (now with the fixture), artifacts.spec.ts and math.spec.ts pass: 14 tests, on a fresh build.

Open questions

• Big subgraph charts scroll sideways in the default column. Should a reply's diagram scale below its 75% minimum?
• The long Step → Acc loop brushes the top-right of the Detect box. It's readable; better edge routing would be a separate change.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
berth	Ready	Preview	Oct 14, 2026 4:39pm UTC
berth-docs	Ready	Preview	Oct 14, 2026 4:39pm UTC

[linear-code]

ENG-6096