Mermaid

Client-only Mermaid renderer with dynamic import, semantic light/dark theme resolution and soft, minimal or technical diagram styles.

Import

import { Mermaid } from "poyraz-ui/molecules";

Flowchart

A basic flowchart with decision nodes.

Rendering diagram…

<Mermaid>{`graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[Ship it]`}</Mermaid>

Visual Variants

Diagram style and container surface can be customized independently. Theme changes trigger a semantic re-render.

Rendering diagram…

<Mermaid surface="soft" diagramStyle="minimal">{code}</Mermaid>
<Mermaid surface="glass" diagramStyle="technical">{code}</Mermaid>

Sequence Diagram

Interactions between actors over time.

Rendering diagram…

<Mermaid>{`sequenceDiagram
    participant U as User
    participant C as Client
    participant S as Server
    U->>C: Click button
    C->>S: POST /api/data
    S-->>C: 200 OK
    C-->>U: Show confirmation`}</Mermaid>

Class Diagram

UML-style class relationships.

Rendering diagram…

<Mermaid>{`classDiagram
    class Button {
        +string variant
        +render()
    }
    class Input {
        +string type
        +onChange()
    }`}</Mermaid>

Gantt Chart

Project timeline with milestones.

Rendering diagram…

<Mermaid>{`gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Design
    Wireframes :a1, 2025-01-01, 7d
    section Dev
    Components :b1, after a1, 14d`}</Mermaid>

pnpm dlx shadcn@latest add @poyraz/mermaid

Runtime dependencies

mermaid@^11.12.3

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/molecules/mermaid.tsx