266 words · 2 min read · Sandbox reading stats

Mermaid diagrams

What this demonstrates

@quartz-community/obsidian-flavored-markdown recognises a fenced code block whose language is mermaid and rewrites it at build time. The emitted HTML is not an image: it is a <code class="mermaid"> element carrying the diagram source in a data-clipboard attribute, wrapped with an expand button and a fullscreen #mermaid-container dialog. The mermaid library then draws the SVG in the browser.

That split matters. The build is fast and deterministic (no headless rendering during build), and the diagram source stays in the page — copyable, diffable, and accessible to text search — instead of being flattened into a binary.

Configuration used

  - source: "@quartz-community/obsidian-flavored-markdown"
    enabled: true
    options:
      enableInHtmlEmbed: false
      enableCheckbox: true
      mermaid: true
      callouts: true
      parseTags: true
      parseBlockReferences: true
    order: 30

mermaid: true is the plugin default; it is written out explicitly here so this page states its own contract rather than relying on an upstream default that could change.

Content used

```mermaid
flowchart TD
  A["quartz.config.yaml"] --> B["install-plugins"]
  B --> C["plugin index (.quartz/plugins/index.ts)"]
  C --> D["bootstrap-cli.mjs build"]
  D --> E["dist-<epoch>/"]
```

Rendered result

flowchart TD
  A["quartz.config.yaml"] --> B["install-plugins"]
  B --> C["plugin index (.quartz/plugins/index.ts)"]
  C --> D["bootstrap-cli.mjs build"]
  D --> E["dist-<epoch>/"]

A second diagram, to show that more than one per page works and that a different mermaid grammar (sequence) is passed through untouched:

sequenceDiagram
  participant O as Operator
  participant B as build
  participant D as dist
  O->>B: install-plugins
  B->>B: regenerate plugin index
  O->>B: bootstrap-cli build
  B->>D: emit HTML routes
  D-->>O: serve on 127.0.0.1

What the rendered output proves

The emitted HTML for this page contains class="mermaid" on a <code> element, a data-clipboard attribute holding the exact diagram source, an aria-label="Expand mermaid diagram" button and a #mermaid-container dialog — all present in the static HTML with no JavaScript executed.

Drawing the SVG is a client-side step performed by the mermaid library, so a browser with no route to mermaid’s module CDN will show the diagram source and the container, but no <svg>. The build-time contract (class="mermaid" + data-clipboard + expand control) is what this sandbox asserts, because that is the part the engine is responsible for.

safe_for_shared_engine

true — it is a per-page content feature of a transformer the shared engine already enables by default, and pages without mermaid fences emit byte-identical HTML.