Skip to main content
Version: 0.8.4

Mermaid samples

1. Basic Structure​

Every Mermaid diagram starts the same way:

    ```mermaid
    [diagram type] [direction]
        [content]
    ```

2. Main Diagram Types & Syntax Variations​

Here are the most useful ones with syntax examples:

Direction variations:

  • TD or TB → Top to Bottom
  • BT → Bottom to Top
  • LR → Left to Right
  • RL → Right to Left

Node shape variations:

  • A[Text] → Rectangle
  • A(Text) → Rounded
  • A((Text)) → Circle
  • A[[Text]] → Stadium
  • A[(Text)] → Cylinder
  • A{{Text}} → Hexagon
  • A[/Text/] → Parallelogram

Sequence Diagram​

Class Diagram​

Mindmap

Timeline

Gantt Chart

Entity Relationship (ER)

State Diagram

Pie Chart

3. Advanced Syntax Features​

  • Comments: %% This is a comment
  • Styling:
  • Subgraphs (grouping nodes):
  • Click interactions:

4. Configuration Options​

You can add configuration at the top:

Common themes: default, base, dark, forest, neutral.