Mermaid Diagrams

Create beautiful diagrams in documentation using Mermaid syntax.

Flowchart

Best for: Processes, decisions, workflows.

flowchart TD
    A[Start] --> B{Is member?}
    B -->|Yes| C[Show benefits]
    B -->|No| D[Show signup]

User Journey

Best for: Customer experience, UX flows.

journey
    title New Member Onboarding
    section Discovery
      Visit store: 3: Customer
    section Signup
      Click Join: 5: Customer

Sequence Diagram

Best for: API interactions, system communication.

sequenceDiagram
    Customer->>Portal: Click Cancel
    Portal->>API: Get offers
    API-->>Portal: Return offers

State Diagram

Best for: Status transitions, lifecycle.

stateDiagram-v2
    [*] --> Active
    Active --> Paused
    Active --> Cancelled
    Cancelled --> [*]

Entity Relationship

Best for: Database schema, data models.

erDiagram
    SHOP ||--o{ MEMBER : has
    MEMBER ||--o{ SUBSCRIPTION : owns

Pie Chart

Best for: Statistics, distributions.

pie showData
    title Cancellation Reasons
    "Too expensive" : 42
    "Don't use enough" : 28

Gantt Chart

Best for: Timelines, project planning.

gantt
    title Subscription Lifecycle
    section Onboarding
        Welcome email :done, a1, 2024-01-01, 1d

Mind Map

Best for: Brainstorming, feature overview.

mindmap
  root((Subscribfy))
    Memberships
      Plans
      Benefits

Timeline

Best for: History, milestones.

timeline
    title Member Journey
    section Join
        Day 1 : Signs up

Quadrant Chart

Best for: Priority matrix, comparisons.

quadrantChart
    title Feature Priority
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact

Git Graph

Best for: Branch visualization, releases.

gitGraph
    commit id: "Initial"
    branch develop
    commit id: "Feature A"

Usage in MDX

Import the component and use it in any MDX file:

import Mermaid from '@/components/Mermaid';

<Mermaid
  theme="dark"      // default, neutral, dark, forest, base
  size="lg"         // sm, md, lg, xl, full
  scale={1.2}       // scale: 1.0 = 100%, 1.5 = 150%
  zoom={true}       // enable click-to-zoom
  chart={`
flowchart TD
    A --> B
`} />

Prop	Type	Default	Description
`chart`	string	required	Mermaid diagram code
`theme`	string	`"neutral"`	`default`, `neutral`, `dark`, `forest`, `base`
`size`	string	`"md"`	Container width: `sm`, `md`, `lg`, `xl`, `full`
`scale`	number	`1`	Scale factor (1.2-1.4 recommended for readability)
`zoom`	boolean	`false`	Enable click-to-zoom

Tip: Use theme="dark" for better visibility. Set scale={1.3} and zoom={true} for complex diagrams.

Was this page helpful?