d2

sublimated renders .d2 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 with D2 syntax highlighting
• 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)
• D2 node IDs are user-defined and stable — comment anchoring survives edits

demos

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

• flowchart — nodes, edges, decisions
• sequence — message passing between services
• architecture — system architecture with nested containers
• class — class hierarchy
• er — entity relationship diagram
• grid — grid layout

styling

D2 supports inline styling on any element:

server: Web Server {
  style.fill: "#e8f5e9"
  style.stroke: "#4caf50"
  style.border-radius: 8
}

styled demos:

• flowchart-styled — custom colors and shapes
• architecture-styled — themed architecture diagram

how it works

1. push a .d2 file via git (or save via edit mode)
2. sublimated detects the file type and sends it to the D2 renderer (@terrastruct/d2 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

D2 code blocks in markdown files are rendered server-side at push time:

```d2
server -> database: queries
```

you can also embed standalone .d2 files via content block transclusion.

layout engines

D2 supports multiple layout engines. sublimated uses ELK by default:

• dagre — fast, hierarchical layout (Graphviz DOT-like)
• ELK — more mature, better port positioning, supports container sizing
• TALA — proprietary (Terrastruct), best output for architecture diagrams

to specify a layout engine, add a directive at the top of your file:

direction: right

# or use vars
vars: {
  d2-config: {
    layout-engine: elk
  }
}

vs mermaid

both are text-based diagram languages. key differences:

• D2 has first-class containers (nested groups) — mermaid's subgraphs are limited
• D2 supports multiple layout engines — mermaid only uses dagre
• D2 supports LaTeX equations and syntax-highlighted code blocks inside nodes
• D2 has better error messages (multi-error, friendly)
• mermaid has broader platform support (GitHub, GitLab, Notion render it natively)
• sublimated renders both — use whichever fits your diagram