Mermaid

Renders Mermaid diagrams with a brutalist dashed theme. Pass mermaid code as children or via the code prop.

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>

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>