Mermaid

Overview

This is my Note on Mermaid a Diagramming and charting tool. I use this inside of Emacs and Org-Mode in connection with Org-Babel.

Content

Examples

Mermaid Flowchart Reference Guide

• Flowchart Basics

  flowchart TD
      Start --> End
  

  

• Directions

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

• Node Shapes

  flowchart LR
      A[Rectangle]
      B(Rounded Rectangle)
      C([Stadium])
      D[[Subroutine]]
      E[(Database)]
      F((Circle))
      G>Asymmetric]
      H{Rhombus}
      IHexagon
      J[/Parallelogram/]
      K[\Parallelogram alt\]
      L[/Trapezoid\]
      M[\Trapezoid alt/]
  

  

• Connection Types

  flowchart LR
      A --> B
      C --- D
      E -.-> F
      G ==> H
      I --Text--- J
      K -->|Text| L
      M -.Text.-> N
      O ==Text==> P
  

  

  • --> - Arrow
  • --- - Line without arrow
  • -.-> - Dotted line with arrow
  • ==> - Thick line with arrow
  • -->|Text| or --Text--> - Label

• Multiple Connections

  flowchart TD
      A --> B & C & D
      B & C & D --> E
  

  

• Longer Connections

  flowchart TD
      A --> B
      A ---> C
      A -----> D
  

  

• Subgraphs

  flowchart TB
      subgraph sub1[Group 1]
          A1 --> A2
      end
      subgraph sub2[Group 2]
          B1 --> B2
      end
      A2 --> B1
  

  

• Styling

  flowchart LR
      A:::classname --> B
      classDef classname fill:#f9f,stroke:#333,stroke-width:4px
  

  

• Click Events (in web environments)

  flowchart LR
      A[Link] --> B
      click A "https://example.com"
  

  

• Practical Example

  flowchart TD
      Start([Start]) --> Input[/Input/]
      Input --> Process[Processing]
      Process --> Decision{Condition?}
      Decision -->|Yes| Output1[Output A]
      Decision -->|No| Output2[Output B]
      Output1 --> End([End])
      Output2 --> End
  
      style Start fill:#90EE90
      style End fill:#FFB6C1
      style Decision fill:#FFD700
  

  

• Note

  flowchart is the modern syntax for creating flow diagrams in Mermaid and supports more features than the older graph syntax.

Sequence Diagram

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob
    B->>A: Hello Alice
    A-->>B: Dashed Line
    Note right of B: Note
    loop Every Day
        B->>A: Status?
    end

Class Diagram

classDiagram
    Class01 <|-- Class02
    Class03 *-- Class04
    Class01 : +int attribute
    Class01 : +method()
    class Class02{
        +String name
        +getName()
   }

State Diagram

stateDiagram
    [*] --> Still
    Still --> Moving
    Moving --> Still
    Moving --> Crash
   Crash --> [*]

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string custNumber
    }

Gantt Chart

gantt
    title Projekt Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Task 1 :a1, 2024-01-01, 30d
    Task 2 :after a1, 20d
    section Phase 2
    Task 3 :2024-02-20, 25d

Pie Chart

pie title distribution
    "A" : 42
    "B" : 30
   "C" : 28

Git Graph

gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
   commit

User Journey

journey
    title My Workingday
    section Morning
      Drinking Coffee: 5: Me
      Writing Code: 3: Me
    section Afternoon
   Meeting: 2: Me, Colleague

Mindmap

mindmap
  root((Theme))
    Branch 1
      Subbranch 1.1
      Subbranch 1.2
    Branch 2
   Subbranch 2.1

Timeline

timeline
    title History of technology
    2000 : Internet-Boom
    2010 : Mobile Revolution
   2020 : AI-Age

Footer

Links