Mermaid

Installation#

npx @ravikumarsurya/mdx-ui add mermaid

Usage#

Pass the diagram source as children in manual MDX:

<Mermaid>
  {`flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do it]
    B -->|No| D[Skip]`}
</Mermaid>

Or use the chart prop (emitted automatically by the remark plugin):

<Mermaid chart={`sequenceDiagram\n  A->>B: Hello`} />

The component auto-detects the diagram type from the first line and shows a label badge (e.g. "Flowchart", "Sequence Diagram", "Gantt Chart").

Remark plugin — auto-transform from markdown#

When using @ravikumarsurya/remark-mdx-ui, fenced ```mermaid code blocks are automatically converted to <Mermaid> components. This is on by default.

```mermaid
sequenceDiagram
  Client->>Server: POST /api/chat
  Server-->>Client: 200 OK
```

Renders as <Mermaid chart={"sequenceDiagram\n Client->>Server: ..."} /> — no manual wrapping needed.

To disable: [remarkMdxUi, { mermaid: false }]

Per-type components#

Named exports are available for each diagram type. They all delegate to <Mermaid> and display the appropriate label badge automatically:

import {
  MermaidFlowchart,
  MermaidSequence,
  MermaidClass,
  MermaidState,
  MermaidER,
  MermaidGantt,
  MermaidPie,
  MermaidGitGraph,
  MermaidMindmap,
  MermaidTimeline,
} from "@/components/mdx/mermaid";

Examples#

Flowchart#

Sequence Diagram#

ER Diagram#

Gantt Chart#

Data structure components#

For algorithm and CS visualizations, use the dedicated data structure components. They accept typed data props, generate the mermaid diagram automatically, and show the correct label in the header.

Binary Search Tree — <MermaidBST>#

Pass an array of numbers. Values are inserted in order; duplicates are ignored.

<MermaidBST values={[5, 3, 7, 1, 4, 6, 8]} />

Generic Tree — <MermaidTree>#

Pass a nested { label, children } structure.

<MermaidTree
  data={{
    label: "root",
    children: [
      { label: "A", children: [{ label: "C" }, { label: "D" }] },
      { label: "B", children: [{ label: "E" }, { label: "F" }] },
    ],
  }}
/>

Use direction="LR" for a left-to-right layout.

BFS Traversal — <MermaidBFS>#

Nodes are annotated with their visit order (①②③…) in breadth-first order from start.

<MermaidBFS
  nodes={["A", "B", "C", "D", "E", "F"]}
  edges={[
    ["A", "B"],
    ["A", "C"],
    ["B", "D"],
    ["B", "E"],
    ["C", "F"],
  ]}
  start="A"
/>

DFS Traversal — <MermaidDFS>#

Same API as <MermaidBFS>, but numbers reflect depth-first visit order.

<MermaidDFS
  nodes={["A", "B", "C", "D", "E", "F"]}
  edges={[
    ["A", "B"],
    ["A", "C"],
    ["B", "D"],
    ["B", "E"],
    ["C", "F"],
  ]}
  start="A"
/>

Props#

<Mermaid>#

<MermaidBST>#

<MermaidTree>#

<MermaidBFS> / <MermaidDFS>#

Supported diagram types (raw mermaid)#