Mermaid

Mermaid

The Mermaid component draws flowcharts, graphs, and sequence diagrams on your published docs site. You write Mermaid syntax in the page, and the reader sees the rendered diagram.

Write a diagram block

Pass Mermaid source to the chart prop as a string. A template literal lets you span several lines:

<Mermaid
  chart={`graph TD;
    Client[Client] --> API[API server];
    API --> Queue[Job queue];
    Queue --> Worker[Worker];`}
/>

Place the component on its own line, between paragraphs, close to the text that explains it.

Props

Use className only for spacing. Positioning classes such as absolute, fixed, sticky, or z-* are removed when the page renders, and a style attribute is ignored.

Supported diagram types

The Doxa renderer supports these Mermaid diagram types:

• Flowcharts and graphs, declared with graph TD or graph LR. Use them for processes, system architecture, and decision paths.

• Sequence diagrams, declared with sequenceDiagram. Use them to show the order of messages between participants such as a client, a server, and a worker.

Sequence diagram example

<Mermaid
  chart={`sequenceDiagram
    participant Agent
    participant MCP as Doxa MCP server
    Agent->>MCP: Start OAuth sign-in
    MCP-->>Agent: Access token
    Agent->>MCP: list_projects
    MCP-->>Agent: Projects`}
/>

When to use a diagram

A diagram helps when readers must follow several steps, branches, or participants at the same time. For a short list or a side-by-side comparison, a list or a table is clearer. Keep each diagram focused on one flow. A diagram with many nodes is hard to read on a small screen, so split it into two diagrams.

Related components