Components

Mermaid

Create diagrams and visualizations with Mermaid syntax

Mermaid lets you create flowcharts, sequence diagrams, and other visualizations using text-based syntax.

Flowchart

<Mermaid client:load chart={\`
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
\`} />

Sequence Diagram

<Mermaid client:load chart={\`
sequenceDiagram
    participant User
    participant API
    participant Database
    
    User->>API: Request data
    API->>Database: Query
    Database-->>API: Results
    API-->>User: Response
\`} />

Entity Relationship Diagram

State Diagram

Props

For more diagram types and syntax, see the Mermaid documentation.