Mermaid Diagram Test

This post tests Mermaid diagram rendering across different markdown themes.

Flowchart Example

Here’s a simple flowchart:

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix issue]
    E --> B
    C --> F[End]

Sequence Diagram

Here’s a sequence diagram showing API interaction:

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Click "Get Data"
    Frontend->>API: HTTP GET /api/data
    API->>Database: SELECT * FROM table
    Database-->>API: Return results
    API-->>Frontend: JSON response
    Frontend-->>User: Display data

Git Graph

Here’s a git branching diagram:

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

Class Diagram

Here’s a simple class diagram:

classDiagram
    class BlogPost {
        +String title
        +String content
        +Date publishDate
        +String[] tags
        +publish()
        +edit()
        +delete()
    }

    class Author {
        +String name
        +String email
        +BlogPost[] posts
        +createPost()
        +editPost()
    }

    Author --> BlogPost : creates

State Diagram

Here’s a state diagram for a simple process:

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> Archived
    Archived --> [*]

This demonstrates that Mermaid diagrams should render properly across all themes!