Skip to main content

Diagrams (Mermaid)

Twain renders Mermaid diagrams from fenced code blocks. Mermaid is bundled into the app, so diagrams render offline.

A Mermaid flowchart rendered inside a document in Twain, showing a request flow with decision diamonds and labelled branches.

Syntax​

Write a fenced code block tagged mermaid:

```mermaid
flowchart LR
    A[Open file] --> B{Markdown or MDX?}
    B -->|Markdown| C[Render]
    B -->|MDX| D[Map components, then render]
```

Supported diagram types​

The full Mermaid diagram set is available, including flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, user journeys, Git graphs, pie charts, mindmaps, timelines, quadrant charts, requirement diagrams, and more.

Appearance​

Diagrams follow the app's appearance: they re-theme automatically between light and dark as you change the reading settings.

Opening a diagram full-window​

A wide sequence diagram drawn into the text column is often too small to read. Click any diagram to open it over the window, fitted to the viewport:

  • Drag to pan.
  • Scroll to zoom, anchored on the pointer.
  • Fit returns the diagram to the size that fills the window, enlarging a small one as well as shrinking an oversized one.
  • Esc closes the viewer.

Zooming redraws the diagram rather than magnifying its pixels, so labels stay sharp however far in you go. The percentage reads against the diagram's actual size, the way a PDF viewer reports zoom.

Editing a diagram​

In the rendered pane a diagram is atomic: it can be selected and deleted as a whole, but not typed into. To change a definition, edit the fenced block in the raw source view and the preview re-renders as you type. The diagram's definition is preserved, so editing prose around a diagram never rewrites its Mermaid source. Editing is part of Twain Pro; see The editor.

When a diagram has an error​

If a diagram's syntax is invalid, Twain shows the error inline in place of that diagram, as a short message beginning Mermaid:. The rest of the document is unaffected.

If diagram rendering is unavailable for any reason, the raw diagram source is shown as plain text so no content is lost.

Exporting from the app keeps the picture: File ▸ Export ▸ As HTML… and printing both work from the rendered view, so diagrams are carried over as embedded SVGs (see Exporting to HTML). The CLI has no browser, so twain-md render and twain-md export leave a mermaid block as a fenced code block instead.