tistory mermaidjs render test

🎨 All Mermaid Diagram Types

1. Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Server
    User->>Browser: Click button
    Browser->>Server: HTTP Request
    Server-->>Browser: Response
    Browser-->>User: Show result

2. Flowchart - Top Down

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

3. Flowchart - Left to Right

flowchart LR
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

4. Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Design           :a1, 2025-01-01, 30d
    Development      :a2, after a1, 45d
    section Phase 2
    Testing          :a3, after a2, 20d
    Deployment       :a4, after a3, 10d

5. Class Diagram

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +Boolean indoor
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

6. State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Start
    Processing --> Success : Complete
    Processing --> Failed : Error
    Failed --> Idle : Retry
    Success --> [*]

7. Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
        int customerId
    }
    ORDER {
        int orderId
        date orderDate
        string status
    }
    LINE-ITEM {
        string productName
        int quantity
        float price
    }

8. Pie Chart

pie title Programming Languages Usage
    "JavaScript" : 45
    "Python" : 30
    "Java" : 15
    "Go" : 10

9. Git Graph

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

10. User Journey

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

11. Sequence Diagram with Notes

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    Note over Alice,John: A typical interaction
    John-->>Alice: Great!
    Note right of John: John thinks a long
long time
    Alice->>Bob: How about you Bob?
    Bob-->>Alice: Jolly good!

12. Flowchart with Subgraphs

graph TB
    subgraph Frontend
        A[React App] --> B[Redux Store]
        B --> C[Components]
    end
    subgraph Backend
        D[API Server] --> E[Database]
        D --> F[Cache]
    end
    C --> D

13. Requirement Diagram

requirementDiagram
    requirement test_req {
        id: 1
        text: the test text.
        risk: high
        verifymethod: test
    }
    element test_entity {
        type: simulation
    }
    test_entity - satisfies -> test_req