2 unmodified lines
3sublimated renders `.mmd` and `.mermaid` files as diagrams. push via [git](../git/), view the rendered diagram on the web.
4
5- diagrams are rendered server-side on push — no client-side JavaScript needed
6- the rendered SVG is stored alongside the source, so viewing is instant
7- source code is shown in a collapsible section below the diagram
7- edit mode uses CodeMirror (same as .ts, .py, etc)
8- supported on both sublimated.com (file viewer) and run.sublimated.com (published sites)
9- inline comments and reactions work on the rendered diagram (SVG is inline DOM)
10- [demo](demo.mmd) — example flowchart, push it to see it rendered
11
12## supported diagram types
13
13 unmodified lines
27
28## how it works
29
301. push a `.mmd` or `.mermaid` file via git
302. sublimated detects the file type and sends it to the mermaid renderer
312. sublimated detects the file type and sends it to the mermaid renderer (Selkie, Rust/WASM)
323. the rendered SVG is stored in CAS as a `render_svg` representation
324. when you view the file, the SVG is displayed with a collapsible source view
334. when you view the file, the SVG is displayed inline
345. edit via `~edit` opens CodeMirror, save triggers re-render
35
36## embedding in markdown
37
38mermaid code blocks in markdown files are also rendered:
5 unmodified lines
44```
45````
46
47this uses client-side rendering (mermaid.js loaded in the browser). standalone `.mmd` files use server-side rendering instead.
48
49## spike: diagram-aware comments
50
51mermaid 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.
52
53open questions for a spike:
54- mermaid IDs are fragile — they change when nodes are reordered. need stable anchors
55- we have Loro CRDTs for collaborative state — could track node positions and stable IDs through edits
56- could extract node labels (text content) as more stable identifiers than auto-generated IDs
57- could map source line ranges to SVG node IDs for comment anchoring (source line 3 = node B = `flowchart-B-1`)
58- how does this interact with version changes? comments on a node that gets renamed/moved
59- similar problem to typst heading anchors — might share the same anchoring infrastructure