Mermaid turns text into diagrams. Use a ```mermaid fenced block and mdbin renders it live, right in your document.

Adding a diagram#

Open a fence with mermaid, write Mermaid code, and close it:

```mermaid
flowchart TD
  A[Start] --> B{Ready?}
  B -->|yes| C[Ship]
  B -->|no| A
```

Which renders as:

Click any diagram to open a larger, zoomable view.

Supported diagram types#

mdbin ships the full Mermaid 11, so beyond flowcharts you can use sequence, class, state, entity-relationship, Gantt, pie, and the other Mermaid diagram types. For example, a sequence diagram:

See the Mermaid documentation for the full syntax of each diagram type.

Theme aware#

Diagrams follow the page theme — toggle light/dark and they re-render to match.

Limits and safety#

• Diagrams render in Mermaid's strict security mode: no click handlers or scripts inside a diagram.
• Up to 25 diagrams per document, each up to 10,000 characters of source. These caps keep a single document from hanging the reader's browser.
• Diagrams render lazily as they scroll into view, so a long document stays responsive.

Tips#

• Keep node labels short — Mermaid lays diagrams out automatically, and shorter labels pack tighter.
• Pick the direction that fits: TD (top-down) for hierarchies and decisions, LR (left-right) for pipelines and wide fan-outs.
• Prefer many small diagrams over one giant one — they're easier to read and to zoom.