10 unmodified lines
11## demos
12
13one file per diagram type — push them to see them rendered:
14
15- [flowchart](flowchart.mmd) — nodes, edges, decisions
16- [sequence](sequence.mmd) — message passing between participants
17- [class](class.mmd) — class hierarchy with methods and properties
18- [state](state.mmd) — state machine with transitions
19- [er](er.mmd) — entity relationship diagram
20- [gantt](gantt.mmd) — project timeline
21- [pie](pie.mmd) — pie chart
22- [gitgraph](gitgraph.mmd) — git branch and merge history
23- [mindmap](mindmap.mmd) — hierarchical mind map
15- [flowchart](demo/flowchart.mmd) — nodes, edges, decisions
16- [sequence](demo/sequence.mmd) — message passing between participants
17- [class](demo/class.mmd) — class hierarchy with methods and properties
18- [state](demo/state.mmd) — state machine with transitions
19- [er](demo/er.mmd) — entity relationship diagram
20- [gantt](demo/gantt.mmd) — project timeline
21- [pie](demo/pie.mmd) — pie chart
22- [gitgraph](demo/gitgraph.mmd) — git branch and merge history
23- [mindmap](demo/mindmap.mmd) — hierarchical mind map
24
25## styling and themes
26
27all mermaid styling features work — colors, themes, and classes are baked into the SVG at render time.
38 unmodified lines
66### styled demos
67
68same diagram types with themes, classDef, and custom colors:
69
70- [flowchart-styled](flowchart-styled.mmd) — classDef + themeVariables + inline style
71- [sequence-styled](sequence-styled.mmd) — custom actor and note colors
72- [class-styled](class-styled.mmd) — neutral theme
73- [state-styled](state-styled.mmd) — forest theme
74- [er-styled](er-styled.mmd) — dark theme
75- [gantt-styled](gantt-styled.mmd) — custom section and task colors
76- [pie-styled](pie-styled.mmd) — custom pie color palette
77- [gitgraph-styled](gitgraph-styled.mmd) — custom branch colors
78- [mindmap-styled](mindmap-styled.mmd) — forest theme
70- [flowchart-styled](demo/flowchart-styled.mmd) — classDef + themeVariables + inline style
71- [sequence-styled](demo/sequence-styled.mmd) — custom actor and note colors
72- [class-styled](demo/class-styled.mmd) — neutral theme
73- [state-styled](demo/state-styled.mmd) — forest theme
74- [er-styled](demo/er-styled.mmd) — dark theme
75- [gantt-styled](demo/gantt-styled.mmd) — custom section and task colors
76- [pie-styled](demo/pie-styled.mmd) — custom pie color palette
77- [gitgraph-styled](demo/gitgraph-styled.mmd) — custom branch colors
78- [mindmap-styled](demo/mindmap-styled.mmd) — forest theme
79
80## how it works
81
821. push a `.mmd` or `.mermaid` file via git (or save via edit mode)
16 unmodified lines
99
100uses Selkie (same server-side renderer as standalone `.mmd` files), not client-side mermaid.js. multiple blocks in one file are batch-rendered in a single call. if a block has invalid syntax, it falls back to a regular code block.
101
102you can also embed standalone `.mmd` files via content block transclusion — see the [markdown mermaid docs](../markdown/mermaid.md).
103
104## spike: diagram-aware comments
105
106mermaid SVG nodes get auto-generated IDs (e.g. `flowchart-A-0`, `flowchart-B-1`). since we render as inline SVG, these are real DOM elements that already support inline comments and reactions.
107
108open questions for a spike:
109- mermaid IDs are fragile — they change when nodes are reordered. need stable anchors
110- we have Loro CRDTs for collaborative state — could track node positions and stable IDs through edits
111- could extract node labels (text content) as more stable identifiers than auto-generated IDs
112- could map source line ranges to SVG node IDs for comment anchoring (source line 3 = node B = `flowchart-B-1`)
113- how does this interact with version changes? comments on a node that gets renamed/moved
114- similar problem to typst heading anchors — might share the same anchoring infrastructure