Mermaid diagrams in Markdown, rendered as you type

Mermaid turns a few lines of text into a flowchart, a sequence diagram or a Gantt chart. GitHub renders it in a repository; Markbeam renders it while you are still writing it, and carries it into every export.

Writing one

Open a fence with the language mermaid:

```mermaid
graph LR
  A[Write] --> B{Markbeam}
  B --> C[Preview]
  B --> D[PDF]
```

The diagram appears in the right-hand pane. Flowcharts, sequence diagrams, class and state diagrams, entity-relationship diagrams, Gantt charts and pie charts all work — this is Mermaid itself, not a subset of it.

Why a half-typed diagram does not shout at you

Every keystroke in the middle of a diagram is, briefly, invalid syntax. Rendering on each one would flash errors continuously, so rendering waits for a pause of about a sixth of a second — long enough that typing is quiet, short enough that it feels immediate. When the syntax really is wrong, the previous diagram stays on screen rather than being replaced by an error box.

Diagrams in the exports

• PDF — diagrams are drawn as images first, so a wide one is not clipped at the right edge, and the export forces light colours whatever theme you are using. See Markdown to PDF.
• Print — Ctrl+P re-renders diagrams in light colours before the print dialog opens, so they are legible on paper.
• HTML and Word — the rendered diagram travels with the document rather than the fence text.
• Slides — a diagram on a slide is exported at slide size; see presentation mode.

Loaded only when you use one

Mermaid is a large library, so it is fetched the first time a document contains a mermaid fence and not before. A document without diagrams never pays for it — which is also why a first visit with no connection cannot render one: it has nothing to render with until it has been downloaded once.

Everything else stays local. The diagram is drawn in your browser, and the document it lives in is stored there too, exactly as described on the about page. If you just want to read a file that already has diagrams in it, the viewer is the shorter path.