mermaid

sublimated renders .mmd and .mermaid files as diagrams. push via git, view the rendered diagram on the web.

• diagrams are rendered server-side on push — no client-side JavaScript needed

• the rendered SVG is stored alongside the source, so viewing is instant

• edit mode uses CodeMirror (same as .ts, .py, etc)

• supported on both sublimated.com (file viewer) and run.sublimated.com (published sites)

• inline comments and reactions work on the rendered diagram (SVG is inline DOM)

demos

one file per diagram type — push them to see them rendered:

• flowchart — nodes, edges, decisions

• sequence — message passing between participants

• class — class hierarchy with methods and properties

• state — state machine with transitions

• er — entity relationship diagram

• gantt — project timeline

• pie — pie chart

• gitgraph — git branch and merge history

• mindmap — hierarchical mind map

styling and themes

all mermaid styling features work — colors, themes, and classes are baked into the SVG at render time.

built-in themes

add a directive at the top of your .mmd file:

%%{init: {'theme': 'dark'}}%%
graph TD
    A --> B

available themes: default, dark, forest, neutral, base

custom colors with themeVariables

fine-grained control over 100+ color variables:

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#e8f5e9', 'lineColor': '#333'}}}%%

common variables: primaryColor, primaryBorderColor, lineColor, background, fontFamily, fontSize. each diagram type has its own variables too (e.g. actorBkg for sequence, sectionBkgColor for gantt).

classDef (reusable classes)

define named styles and apply them to nodes:

classDef green fill:#e8f5e9,stroke:#4caf50
A:::green --> B:::green

inline style (per-node)

style A fill:#e8f5e9,stroke:#333

styled demos

same diagram types with themes, classDef, and custom colors:

• flowchart-styled — classDef + themeVariables + inline style

• sequence-styled — custom actor and note colors

• class-styled — neutral theme

• state-styled — forest theme

• er-styled — dark theme

• gantt-styled — custom section and task colors

• pie-styled — custom pie color palette

how it works

1. push a .mmd or .mermaid file via git (or save via edit mode)

2. sublimated detects the file type and sends it to the mermaid renderer (Selkie, Rust/WASM)

3. the rendered SVG is stored in CAS as a render_svg representation

4. when you view the file, the SVG is displayed inline

5. edit via ~edit opens CodeMirror, save triggers re-render

6. if rendering fails (invalid syntax), the source is shown as highlighted code

embedding in markdown

mermaid code blocks in markdown files are also rendered:

```mermaid
graph LR
    A --> B
```

this uses client-side rendering (mermaid.js loaded in the browser). standalone .mmd files use server-side rendering instead.

spike: diagram-aware comments

mermaid 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.

open questions for a spike:

• mermaid IDs are fragile — they change when nodes are reordered. need stable anchors

• we have Loro CRDTs for collaborative state — could track node positions and stable IDs through edits

• could extract node labels (text content) as more stable identifiers than auto-generated IDs

• could map source line ranges to SVG node IDs for comment anchoring (source line 3 = node B = flowchart-B-1)

• how does this interact with version changes? comments on a node that gets renamed/moved

• similar problem to typst heading anchors — might share the same anchoring infrastructure