Mermaid diagram

Files: .mermaid, .mmd.

Cabinet renders Mermaid files as diagrams. Open a .mermaid file in the sidebar — it shows the rendered diagram with a source toggle to switch between the picture and the text.

Live example

The diagram below is rendered from agent-loop.mermaid — a real file in this docs cabinet, rendered live at page-load with the same mermaid.js Cabinet uses.

Why diagram-as-text matters

• Source-controlled. A .mermaid file is a few lines of plain text. git diff shows what changed.
• Agent-friendly. An agent can write a Mermaid diagram by writing text. No GUI required.
• Re-themeable. The same source renders in light or dark mode automatically.

Common diagram types

Mermaid supports a lot of shapes:

Type	Use
flowchart	System diagrams, agent loops, decision flows.
sequenceDiagram	API calls, hand-offs between agents.
gantt	Project timelines.
stateDiagram-v2	State machines, lifecycle diagrams.
classDiagram	Schemas, type relationships.
gitGraph	Branch and merge stories.
mindmap	Brainstorms, hierarchies.

Inline mermaid in markdown

You can also drop mermaid into a markdown page with a fenced block:

```mermaid
flowchart LR
  A[You] --> B[GTM Lead]
  B --> C[Approval queue]
  C --> D[Research Lead]
```

Cabinet renders it inline. Same look as a standalone .mermaid file.

Read on

• Source code — for any other text-based file format.
• Markdown editor — for embedding mermaid blocks in pages.