Mermaid

Introduction

Mermaid is a JavaScript-based diagramming and visualization library that enables the creation of diagrams and flowcharts using text descriptions. Mermaid is frequently used in Markdown documents (e.g., in GitHub, GitLab, or Confluence) to visually represent complex relationships.

Advantages of Mermaid:

• Simple integration into Markdown documents.
• No external tools required – diagrams are rendered directly in the browser.
• Supports a wide variety of diagram types.
• Ideal for documentation, presentations, and technical specifications.

---

Possible Diagrams

Flowchart

Flowcharts visualize processes or workflows. They consist of nodes (steps) and connections (arrows) representing the sequence of steps.

Example:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E

Explanation:

• flowchart TD: Defines a flowchart from top to bottom.
• A[Start]: A node labeled “Start”.
• -->: Connection between nodes.
• |Yes| and |No|: Labels for the connections.

Class Diagram

Class diagrams show the structure of classes, their attributes, methods, and relationships to each other.

Example:

classDiagram
    class Animal {
        -name: String
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

classDiagram
    class Animal {
        -name: String
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

Explanation:

• classDiagram: Defines a class diagram.
• Animal and Dog: Classes with attributes (-name) and methods (+eat()).
• <|--: Inheritance relationship (Dog inherits from Animal).

Sequence Diagram

Sequence diagrams visualize interactions between objects or actors in a chronological sequence.

Example:

sequenceDiagram
    Alice->>Bob: Hello!
    Bob-->>Alice: Hello back!

sequenceDiagram
    Alice->>Bob: Hello!
    Bob-->>Alice: Hello back!

Explanation:

• sequenceDiagram: Defines a sequence diagram.
• Alice->>Bob: Message from Alice to Bob.
• -->>: Response from Bob to Alice.

Entity-Relationship Diagram (ER Diagram)

ER diagrams show the relationships between entities in a database.

Example:

erDiagram
    CUSTOMER ||--o{ ORDER : has
    CUSTOMER {
        int id PK
        string name
    }
    ORDER {
        int id PK
        date orderDate
    }

erDiagram
    CUSTOMER ||--o{ ORDER : has
    CUSTOMER {
        int id PK
        string name
    }
    ORDER {
        int id PK
        date orderDate
    }

Explanation:

• erDiagram: Defines an ER diagram.
• CUSTOMER ||--o{ ORDER: One customer has many orders.
• PK: Primary key.

State Diagram

State diagrams show the states of a system and the transitions between these states.

Example:

stateDiagram-v2
    state s1
    state Off
    state On
    
    [*] --> Off
    Off --> On: Turn On
    On --> Off: Turn Off

stateDiagram-v2
    state s1
    state Off
    state On
    
    [*] --> Off
    Off --> On: Turn On
    On --> Off: Turn Off

Explanation:

• stateDiagram-v2: Defines a state diagram.
• [*]: Start state.
• Off --> On: Transition from “Off” to “On” via “Turn On”.

Mindmap Diagram

Mindmaps visualize hierarchical ideas or concepts.

Example:

mindmap
  root((Topic))
    Branch 1
      Subtopic 1
      Subtopic 2
    Branch 2
      Subtopic 3

mindmap
  root((Topic))
    Branch 1
      Subtopic 1
      Subtopic 2
    Branch 2
      Subtopic 3

Explanation:

• mindmap: Defines a mindmap.
• root((Topic)): Central topic.
• Indentations define the hierarchy.

Requirement Diagram

Requirement diagrams show requirements and their relationships.

Example:

requirementDiagram
  requirement Requirement1 {
    id: 1
    text: "The system must be secure."
  }

  element System {
    type: software
  }

  System - satisfies -> Requirement1

requirementDiagram
  requirement Requirement1 {
    id: 1
    text: "The system must be secure."
  }

  element System {
    type: software
  }

  System - satisfies -> Requirement1

Explanation:

• requirementDiagram: Defines a requirement diagram.
• requirement: Defines a requirement.
• satisfies: Relationship between element and requirement.

Gantt Diagram

Gantt diagrams visualize project plans and timelines.

Example:

gantt
    title Project Plan
    dateFormat YYYY-MM-DD
    section Phase 1
    Task 1 :a1, 2024-01-01, 7d
    Task 2 :after a1, 3d

gantt
    title Project Plan
    dateFormat YYYY-MM-DD
    section Phase 1
    Task 1 :a1, 2024-01-01, 7d
    Task 2 :after a1, 3d

Explanation:

• gantt: Defines a Gantt diagram.
• dateFormat: Format for date specifications.
• Task 1 :a1, 2024-01-01, 7d: Task 1 lasts 7 days starting from January 1, 2024.

Timeline

Timelines show events in chronological order.

Example:

timeline
    title Important Events 2024 - 2025
    2024 : Event 1
    2025 : Event 2

timeline
    title Important Events 2024 - 2025
    2024 : Event 1
    2025 : Event 2

Explanation:

• timeline: Defines a timeline.
• 2024 : Event 1: Event in the year 2024.

Further Information

Weblinks

Mermaid Open-Source