Mermaid Diagram Test Document

Documentation Testing

This document is a test file specifically designed to verify the Mermaid diagram rendering functionality within the CZON platform. It showcases examples of various diagram types, including flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts, and includes a syntax error test to validate error handling mechanisms. Through these examples, the document aims to ensure that the CZON platform can correctly parse and display Mermaid diagrams, thereby supporting users in creating and sharing complex visual content. The document also briefly explains the purpose of the test and the included diagram types, helping readers understand its core value.
📅 2024-01-01
  • Mermaid
  • Diagram Testing
  • CZON
  • Flowchart
  • Sequence Diagram
  • Gantt Chart
  • Class Diagram
  • State Diagram

Mermaid Diagram Test

This is a test file to verify Mermaid diagram rendering functionality in CZON.

Flowchart Example

graph TD
    A[Start] --> B{Continue?}
    B -->|Yes| C[Execute Action]
    B -->|No| D[End]
    C --> E[Check Result]
    E --> F{Success?}
    F -->|Yes| G[Complete]
    F -->|No| H[Retry]
    H --> C
    G --> D

Sequence Diagram Example

sequenceDiagram
    participant User
    participant System
    participant Database

    User->>System: Submit Request
    System->>Database: Query Data
    Database-->>System: Return Result
    System-->>User: Display Result

Gantt Chart Example

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Design
    Requirements Analysis     :done,    des1, 2024-01-01, 7d
    Prototype Design         :active,  des2, 2024-01-08, 5d
    Detailed Design          :         des3, after des2, 5d
    section Development
    Frontend Development     :         dev1, after des3, 10d
    Backend Development      :         dev2, after des3, 15d
    section Testing
    Unit Testing             :         test1, after dev1, 5d
    Integration Testing      :         test2, after dev2, 5d

Class Diagram Example

classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    class Dog {
        +void bark()
    }
    class Cat {
        +void meow()
    }

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

State Diagram Example

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

Pie Chart Example

pie title Browser Usage Share
    "Chrome" : 65.2
    "Firefox" : 15.3
    "Safari" : 12.5
    "Edge" : 5.2
    "Other" : 1.8

Syntax Error Test (Should Display Error Message)

graph TD
    A --> B
    // Missing arrow definition here
    C --> D

This test file includes various Mermaid diagram types to verify whether CZON's Mermaid integration is functioning correctly.

See Also