Mermaid Diagrams

Flowcharts, sequence diagrams, class diagrams, and more with Mermaid

Mermaid Diagrams

Create diagrams from text using Mermaid syntax. Diagrams render client-side and adapt to the current theme.

Flowchart



Syntax:


:::mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Result]
    B -->|No| D[Other]
:::

Markdown


Sequence Diagram




Class Diagram




State Diagram




Git Graph




Best Practices


    

  • Keep diagrams simple --- split complex diagrams into multiple smaller ones
    • 

  • Use descriptive labels on nodes and edges
    • 

  • Flowcharts work best for processes, sequence diagrams for API interactions
    • 

  • Test that diagrams render correctly in both light and dark themes
    •