- Published on
Testing Mermaid Diagrams
Testing Mermaid Diagrams
This post demonstrates the improved Mermaid diagram rendering in MDX with contentlayer.
Basic Flowchart
flowchart TD A[Start] --> B[Is it working?] B -->|Yes| C[Great!] B -->|No| D[Debug] D --> B C --> E[Continue]
Sequence Diagram
sequenceDiagram participant Client participant Server participant Database Client->>Server: Request Data Server->>Database: Query Database-->>Server: Return Results Server-->>Client: Send Response
Class Diagram
classDiagram
class Animal {
+name: string
+age: int
+makeSound()
}
class Dog {
+breed: string
+fetch()
}
class Cat {
+color: string
+climb()
}
Animal <|-- Dog
Animal <|-- Cat
State Diagram
stateDiagram-v2 [*] --> Idle Idle --> Processing: Start Processing --> Success: Complete Processing --> Error: Fail Success --> [*] Error --> Idle: Retry
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
}
Gantt Chart
gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Research :a1, 2025-01-01, 30d Design :a2, after a1, 20d section Development Implementation :b1, after a2, 60d Testing :b2, after b1, 15d section Deployment Release :c1, after b2, 7d Maintenance :c2, after c1, 30d
Pie Chart
pie title Distribution of Features "Core" : 40 "UI/UX" : 30 "Documentation" : 15 "Testing" : 15
Git Graph
gitGraph commit branch develop checkout develop commit commit checkout main merge develop commit branch feature checkout feature commit commit checkout develop merge feature checkout main merge develop
The diagrams above should render correctly in both light and dark themes, with proper error handling and responsive design.
