Mermaid Diagram Test

This post demonstrates the mermaid diagram rendering capability in the blog.

Flowchart Example

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

Sequence Diagram Example

sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: GET /page
    Server-->>Browser: HTML Content
    Browser->>Server: GET /api/data
    Server-->>Browser: JSON Data
    Note right of Browser: Renders the page

Class Diagram Example

classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound(): void
    }
    class Dog {
        +breed: string
        +bark(): void
    }
    class Cat {
        +color: string
        +meow(): void
    }
    Animal <|-- Dog
    Animal <|-- Cat

State Diagram Example

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Completed: Success
    Processing --> Error: Failure
    Completed --> [*]
    Error --> Idle: Retry

Gantt Chart Example

gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD
    section Planning
    Research           :a1, 2025-01-01, 30d
    Design             :a2, after a1, 20d
    section Development
    Implementation     :a3, after a2, 40d
    Testing            :a4, after a3, 15d
    section Deployment
    Release            :a5, after a4, 5d

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int id
        date created_at
    }
    LINE_ITEM {
        string product
        int quantity
        float price
    }

Pie Chart Example

pie title Programming Languages
    "JavaScript" : 40
    "Python" : 30
    "Java" : 20
    "Other" : 10

Journey Diagram Example

journey
    title User Journey
    section Login
      Enter credentials: 5: User
      Validate: 3: System
      Login success: 5: User, System
    section Use Application
      Browse content: 5: User
      Interact with features: 4: User
      Save progress: 3: System
    section Logout
      Click logout: 5: User
      Clear session: 5: System

Git Graph Example

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

This post demonstrates how mermaid diagrams can be used to create various types of visualizations in your blog posts.