Diagram guide
All three engines run inside the application as WASM — a document never needs a network connection. There is no engine to install and no remote service to call.
Fence labels
| Engine | Fence label | Licence | Shipped size |
|---|---|---|---|
| mermaid | mermaid |
MIT | 29 KB entry + chunks on demand (5.18 MB on disk; only the diagram types you use are loaded) |
| graphviz | dot, graphviz |
Apache-2.0 | ~0.9 MB (wasm inlined in the JS) |
| d2 | d2 |
MPL-2.0 | 11.5 MB (wasm inlined in the JS) |
```mermaid
flowchart LR
open --> parse --> render
```
```dot
digraph { client -> api -> db }
```
```d2
direction: right
client -> api: request
api -> db: query
```
Diagram cards
Every fenced block becomes a card:
- an engine badge top-left (mermaid purple / dot green / d2 amber)
- the first source line as a title beside it, plus the source line number — when something fails you know exactly where to look
- two buttons top-right: copy SVG, open the viewer
The viewer
Click the card or zoom to open the full viewer: wheel to zoom, drag to pan, copy SVG, copy source, esc to close.
Errors never blank the page
When an engine fails, the error lands inside the diagram card with the source line number; the rest of the page renders as usual. Usual causes:
- fence label spelling (
mermaid/dot/graphviz/d2, case-insensitive) - a diagram type not loaded yet: mermaid loads chunks per type, so the first render of a type costs one local load
- a syntax error: read the line number in the card and jump to it in the source view
Render cache
Rendered output is cached, measured in SVG bytes (size visible in settings, one click to clear). Reopening the same document does not re-render its diagrams.
The raw HTML boundary
Raw HTML in a document passes only a short fixed tag list: details, summary, kbd, sub, sup, br, hr. Everything else is dropped — what a document contains cannot touch the app's own interface.