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