Mermaid, drawn by the design system: no mermaid.js, no SVG document, no target-specific renderer. A diagram is just more UI: nodes are Boxes on the theme's surface tokens, the decision diamond is a single-path Vector rhombus (the same vector door icons use on both targets), each edge is ONE stroked Vector cubic with a vector arrowhead, labels are Text. One tree, realized by the web realizer and by Photon, themed by the app's own IAppTheme.

Inside Markdown it is automatic (a mermaid fence renders as the diagram) and Mermaid(source)` works standalone. This page carries its own proof:

flowchart, sequence

anything else

mermaid source

known grammar?

Parse + solve

Show the fence as code

Boxes, Text, Vectors

GitHub draws the fence above with mermaid.js; the documentation site draws the SAME fence with the SDK's own component: two renderers, one source, which is exactly the point.

Mermaid(source) // standalone

Markdown(chatAnswer) // a ```mermaid fence inside renders natively

The v1 grammar

Spoken

Notes

graph TD / graph TB / flowchart LR

the two flow axes; BT/RL fall back

A[rect], A(rounded), A((circle)), A{diamond}

quoted labels lose their quotes

A --> B --> C, A --- B, A -->|label| B

chains; open links draw no head; dashed/thick draw as the one line style

sequenceDiagram, participant A as Alice

messages auto-declare unseen participants

A->>B: text, A-->>B: text, self messages

a self message loops out and back

%% comments, subgraph/end, style, click, notes

skipped, never fatal, and the graph still draws

Graceful by contract: a grammar outside the subset (gantt, classDiagram, state, pie) renders as the fenced code it came from, so a chat answer with an exotic diagram degrades to something true, never to a broken picture.

Layout parity is pinned, not hoped for

The parser and the layout run on every side (C# for SSR and Photon, the transpiled twin in the browser) so the layout's math is integers and exact halves throughout: node sizes come from a flat character-advance estimate, positions accumulate by addition, and barycenter ORDER is decided by cross-multiplied integer sums (sumA·countB < sumB·countA), never a division. Ranking is Sugiyama-lite over the DAG: an iterative DFS marks cycle-closing edges, so a back edge routes upward instead of inflating every rank before it.

The pinned fixture (__fixtures__/mermaid-layout.txt, regenerate with EQ_UPDATE_MERMAID_FIXTURE=1) is asserted character-identical by MermaidTests.cs and mermaid.spec.ts. If the two compilations ever placed a box differently, a suite breaks before a page jumps at hydration.

The edges curve

Since 0.2.0-preview.28

A flowchart edge is one cubic, the S every flowchart tool draws, stroked as a single free-aspect Vector, on both targets. The fence this closes used to read "edges are orthogonal, the curved splines would need a stroked-path node the vocabulary doesn't have yet": the vocabulary has it now, and this component was the case that named it. Parity holds the same way everything else here holds: the path string is built from INTEGERS on both sides (a float formatted through a machine's culture reads 72,5 on half the world's laptops), and the pinned fixture carries every curve's box and path verbatim.

Fences (v1, deliberate)

•

Text width is an estimate, not a measurement: honest for a diagram, deterministic everywhere.

•

Diamonds are square by construction (a Vector draws into a square box); long decision labels ellipsize.

•

One nesting rung for flowchart ranks' siblings; subgraph GROUPING is skipped (statements inside still parse).

PREVIOUSMarkdown

NEXTArchitecture Overview

ON THIS PAGE

The v1 grammar

Layout parity is pinned, not hoped for

The edges curve

Fences (v1, deliberate)