Testing Mermaid Diagram Support

Sandesh

Sandesh / October 23, 2023

This is a test blog post to verify that Mermaid diagrams work correctly in blog posts.

Simple Flowchart

Here's a basic flowchart:

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

Sequence Diagram

Here's a sequence diagram showing the process:

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Request Page
    Browser->>Server: HTTP Request
    Server->>Database: Query Data
    Database-->>Server: Return Data
    Server-->>Browser: HTML Response
    Browser-->>User: Display Page

Class Diagram

Here's a simple class diagram:

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +bark()
    }

    class Cat {
        +meow()
    }

    Animal <|-- Dog
    Animal <|-- Cat

Gantt Chart

Here's a project timeline:

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Research       :done,    des1, 2023-10-01, 2023-10-05
    Design          :done,    des2, after des1, 3d
    section Development
    Coding          :active,  dev1, 2023-10-10, 7d
    Testing         :         dev2, after dev1, 3d
    section Deployment
    Documentation  :         doc1, after dev2, 2d
    Deployment      :         dep1, after doc1, 1d

Pie Chart

Here's a data visualization:

pie
    title Technology Usage
    "JavaScript" : 35
    "Python" : 25
    "React" : 20
    "Node.js" : 15
    "Other" : 5

This demonstrates that various types of Mermaid diagrams should render properly in blog posts!