Mermaid

https://mermaid.js.org
Admin
Mermaid is a JavaScript-based diagramming and charting tool that creates diagrams and flowcharts...
Tokens:166,558
Snippets:3,061
Trust Score:8.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### Clone and Install Mermaid Repository

Source: https://mermaid.js.org/intro

Initial setup for the Mermaid repository, requiring npx for the first installation.

```bash
git clone git@github.com:mermaid-js/mermaid.git
cd mermaid
# npx is required for first install as volta support for pnpm is not added yet.
npx pnpm install
pnpm test
```

--------------------------------

### Verify installation

Source: https://mermaid.js.org/community/contributing.html

Run tests to ensure the environment is set up correctly.

```bash
pnpm test
```

```bash
./run pnpm test
```

--------------------------------

### Define Gantt tasks with dependencies and durations

Source: https://mermaid.js.org/syntax/gantt.html

Example demonstrating task definitions using start dates, durations, the 'after' keyword for dependencies, and the 'until' keyword for relative end dates.

```mermaid
gantt
    apple :a, 2017-07-20, 1w
    banana :crit, b, 2017-07-23, 1d
    cherry :active, c, after b a, 1d
    kiwi   :d, 2017-07-20, until b c
```

--------------------------------

### Install dependencies

Source: https://mermaid.js.org/community/contributing.html

Install project packages using pnpm on host or via the run script in Docker.

```bash
pnpm install
```

```bash
./run pnpm install
```

--------------------------------

### Start Documentation Development Server

Source: https://mermaid.js.org/community/contributing.html

Commands to launch the Vitepress development server locally.

```bash
pnpm --filter mermaid run docs:dev
```

```bash
cd packages/mermaid
pnpm docs:dev
```

```bash
./run docs:dev
```

--------------------------------

### Create a basic Cynefin diagram

Source: https://mermaid.js.org/syntax/cynefin.html

A complete example showing all domains populated with items.

```mermaid
cynefin-beta
  title Incident Response

  complex
    "Investigate root cause"
    "Run chaos experiment"

  complicated
    "Analyze performance data"
    "Expert review needed"

  clear
    "Restart service"
    "Apply known fix"

  chaotic
    "Page on-call immediately"

  confusion
    "Unknown failure mode"
```

--------------------------------

### Create a Cynefin diagram with transitions

Source: https://mermaid.js.org/syntax/cynefin.html

Example demonstrating how to link domains with transition paths.

```mermaid
cynefin-beta
  title Strategy Categorization

  complex
    "Market research"

  complicated
    "Competitive analysis"

  clear
    "Standard pricing"

  chaotic
    "Crisis management"

  complex --> complicated : "Pattern identified"
  complicated --> clear : "Best practice codified"
  clear --> chaotic : "Complacency"
  chaotic --> complex : "Stabilized"
```

--------------------------------

### Install pnpm and Node.js

Source: https://mermaid.js.org/community/contributing.html

Install the pnpm package manager and set the required Node.js version.

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm env use --global 20
```

--------------------------------

### Install Mermaid via Yarn

Source: https://mermaid.js.org/intro/getting-started.html

Commands to install Yarn and add Mermaid as a project dependency.

```bash
npm install -g yarn
```

```bash
yarn add mermaid
```

```bash
yarn add --dev mermaid
```

--------------------------------

### Full state diagram with styling

Source: https://mermaid.js.org/syntax/stateDiagram.html

A complete example demonstrating class definitions and application.

```mermaid
   stateDiagram
   direction TB

   accTitle: This is the accessible title
   accDescr: This is an accessible description

   classDef notMoving fill:white
   classDef movement font-style:italic
   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

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

   class Still notMoving
   class Moving, Crash movement
   class Crash badBadEvent
   class end badBadEvent
```

--------------------------------

### Configure custom weekend settings

Source: https://mermaid.js.org/syntax/gantt.html

Example showing how to set the weekend start day to Friday, which excludes Friday and Saturday from the chart.

```mermaid
gantt
    title A Gantt Diagram Excluding Fri - Sat weekends
    dateFormat YYYY-MM-DD
    excludes weekends
    weekend friday
    section Section
        A task          :a1, 2024-01-01, 30d
        Another task    :after a1, 20d
```

--------------------------------

### Run Mermaid Development Server

Source: https://mermaid.js.org/community/contributing.html

Commands to start the local development server for testing changes.

```bash
pnpm run dev
```

```bash
./run dev
```

--------------------------------

### Full Kanban Diagram Example

Source: https://mermaid.js.org/syntax/kanban.html

A complete Kanban diagram demonstrating columns, tasks, metadata, and configuration.

```mermaid
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
```

--------------------------------

### Initialize Mermaid in HTML

Source: https://mermaid.js.org/intro

Example of loading Mermaid as a module and initializing it to render diagrams automatically.

```html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
```

--------------------------------

### Comprehensive Quadrant Chart Styling Example

Source: https://mermaid.js.org/syntax/quadrantChart.html

A full example demonstrating the combination of axis labels, quadrant definitions, direct styling, and class-based styling.

```mermaid
quadrantChart
  title Reach and engagement of campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need to promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.9, 0.0] radius: 12
  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
  Campaign E:::class2: [0.5, 0.4]
  Campaign F:::class3: [0.4, 0.5] color: #0000ff
  classDef class1 color: #109060
  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
  classDef class3 color: #f00fff, radius : 10
```

--------------------------------

### Render Diagrams with Mermaid CDN

Source: https://mermaid.js.org/intro/getting-started.html

Full HTML example demonstrating how to define diagrams in <pre> tags and initialize rendering.

```html
<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>

    And here is another:
    <pre class="mermaid">
            graph TD
            A[Client] -->|tcp_123| B
            B(Load Balancer)
            B -->|tcp_456| C[Server1]
            B -->|tcp_456| D[Server2]
    </pre>

    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>
```

--------------------------------

### Initialize Mermaid with Local Module

Source: https://mermaid.js.org/intro/getting-started.html

Example of referencing a local Mermaid ESM file instead of a CDN URL.

```html
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <pre class="mermaid">
            graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
    </pre>
    <pre class="mermaid">
            graph TD
            A[Client] --> B[Load Balancer]
            B --> C[Server1]
            B --> D[Server2]
    </pre>
    <script type="module">
      import mermaid from 'The/Path/In/Your/Package/mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>
```

--------------------------------

### Install Mermaid via Package Managers

Source: https://mermaid.js.org/intro

Commands to add Mermaid to a project.

```bash
npm i mermaid
```

```bash
yarn add mermaid
```

```bash
pnpm add mermaid
```

--------------------------------

### Install Node.js and pnpm via Volta

Source: https://mermaid.js.org/intro

Use Volta to manage Node.js and pnpm versions for the development environment.

```bash
volta install node
```

```bash
volta install pnpm
```

--------------------------------

### Run E2E tests via Host

Source: https://mermaid.js.org/community/contributing.html

Commands to start the development server and Cypress on a local host machine.

```bash
pnpm dev
```

```bash
pnpm cypress:open
```

--------------------------------

### Animal Class Diagram Example

Source: https://mermaid.js.org/syntax/classDiagram.html

Demonstrates defining classes with inheritance, attributes, methods, and notes.

```mermaid
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
```

--------------------------------

### Installing icon pack dependencies

Source: https://mermaid.js.org/config/icons.html

Installs the required icon pack package via npm.

```bash
npm install @iconify-json/logos@1
```

--------------------------------

### Create a basic xyChart

Source: https://mermaid.js.org/syntax/xyChart.html

A complete example showing a chart with both bar and line data series.

```mermaid
xychart
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

--------------------------------

### Initialize Mermaid via CDN

Source: https://mermaid.js.org/intro/getting-started.html

Basic setup to initialize Mermaid using the ESM module from a CDN.

```html
<body>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>
```

--------------------------------

### Standard sequence diagram example

Source: https://mermaid.js.org/config/directives.html

A basic sequence diagram without custom configuration.

```mermaid
sequenceDiagram

Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```

--------------------------------

### Complete Mermaid Integration Example

Source: https://mermaid.js.org/config/usage.html

A full HTML document demonstrating the integration of a Mermaid graph definition and the library import.

```html
<!doctype html>
<html lang="en">
  <body>
    <pre class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
    </pre>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    </script>
  </body>
</html>
```

--------------------------------

### Bank Account Class Diagram Example

Source: https://mermaid.js.org/syntax/classDiagram.html

Shows a basic class definition with attributes and methods.

```mermaid
---
title: Bank example
---
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)
```

--------------------------------

### Full Interactive HTML Example

Source: https://mermaid.js.org/syntax/flowchart.html

Complete implementation of interactive flowchart nodes within an HTML document, including Mermaid configuration.

```html
<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </pre>

  <script>
    window.callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      htmlLabels: true,
      flowchart: { useMaxWidth: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>
```

--------------------------------

### Interactive Gantt Example

Source: https://mermaid.js.org/syntax/gantt.html

A complete HTML implementation demonstrating clickable tasks that trigger alerts or navigate to external URLs.

```html
<body>
  <pre class="mermaid">
    gantt
      dateFormat  YYYY-MM-DD

      section Clickable
      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
      Print arguments         :cl2, after cl1, 3d
      Print task              :cl3, after cl2, 3d

      click cl1 href "https://mermaidjs.github.io/"
      click cl2 call printArguments("test1", "test2", test3)
      click cl3 call printTask()
  </pre>

  <script>
    const printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
    };
    const printTask = function (taskId) {
      alert('taskId: ' + taskId);
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>
```

--------------------------------

### Basic Tidy-tree Mindmap

Source: https://mermaid.js.org/config/tidy-tree.html

A simple mindmap example using the tidy-tree layout configuration.

```mermaid
---
config:
  layout: tidy-tree
---
mindmap
root((mindmap is a long thing))
  A
  B
  C
  D
```

--------------------------------

### Define start and end states

Source: https://mermaid.js.org/syntax/stateDiagram.html

Use the [*] syntax to indicate the beginning and conclusion of the diagram flow.

```mermaid
stateDiagram-v2
    [*] --> s1
    s1 --> [*]
```

--------------------------------

### GitGraph with Default, Dark, and Neutral Themes

Source: https://mermaid.js.org/syntax/gitgraph.html

Examples demonstrating the same GitGraph structure rendered with different theme configurations.

```mermaid
---
config:
  logLevel: 'debug'
  theme: 'default'
---
      gitGraph
        commit type:HIGHLIGHT
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release
```

```mermaid
---
config:
  logLevel: 'debug'
  theme: 'dark'
---
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release
```

```mermaid
---
config:
  logLevel: 'debug'
  theme: 'neutral'
---
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release
```

--------------------------------

### Create a rendering test

Source: https://mermaid.js.org/community/contributing.html

Example of using the imgSnapshotTest function to verify diagram rendering in Cypress.

```javascript
it('should render forks and joins', () => {
  imgSnapshotTest(
    `
    stateDiagram
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]
    `,
    { logLevel: 0 }
  );
});
```

--------------------------------

### Basic Gantt Diagram

Source: https://mermaid.js.org/syntax/gantt.html

A simple Gantt chart example showing task sequencing and section grouping.

```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

--------------------------------

### Define basic Sankey connections

Source: https://mermaid.js.org/syntax/sankey.html

A minimal example showing the required source, target, and value columns.

```mermaid
sankey

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
```

--------------------------------

### Basic Requirement Diagram

Source: https://mermaid.js.org/syntax/requirementDiagram.html

A standard example showing the definition of a requirement, an element, and a satisfaction relationship.

```mermaid
    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
```

--------------------------------

### Render a flowchart in Mermaid

Source: https://mermaid.js.org/intro/getting-started.html

A basic flowchart example demonstrating node definition and directional flow.

```mermaid
graph TD
    A[Enter Chart Definition] --> B(Preview)
    B --> C{decide}
    C --> D[Keep]
    C --> E[Edit Definition]
    E --> B
    D --> F[Save Image and Code]
    F --> B
```

--------------------------------

### Creating a Complete Wardley Map

Source: https://mermaid.js.org/syntax/wardley.html

A comprehensive example demonstrating components, evolution, anchors, links, accelerators, annotations, and notes.

```mermaid
wardley-beta
title Software Platform Strategy
size [1100, 800]

evolution Genesis@0.25 -> Custom@0.5 -> Product@0.75 -> Commodity@1.0

anchor Customer [0.90, 0.95]

component "Mobile App" [0.80, 0.85] (build)
component "Web App" [0.75, 0.80] label [-60, 10] (build)
component "API Gateway" [0.70, 0.65] (buy)
component "Auth Service" [0.60, 0.55] (outsource)
component "Database" [0.50, 0.45] (buy) (inertia)
component "Cloud Platform" [0.30, 0.95] (market)

Customer -> "Mobile App"
Customer -> "Web App"
"Mobile App" -> "API Gateway"
"Web App" -> "API Gateway"
"API Gateway" -> "Auth Service"
"API Gateway" -> "Database"
"Database" -> "Cloud Platform"

evolve "API Gateway" 0.85
evolve "Database" 0.75

accelerator "Cloud Native" [0.20, 0.85]
deaccelerator "Legacy Data" [0.45, 0.35]

annotations [0.10, 0.20]
annotation 1,[0.78, 0.82] "User touchpoints"
annotation 2,[0.70, 0.60] "Integration layer"
annotation 3,[0.50, 0.40] "Data persistence"

note "Build mobile-first experience" [0.85, 0.90]
note "Migrate to cloud-native database" [0.60, 0.50]
```

--------------------------------

### Define an Entity Relationship Diagram

Source: https://mermaid.js.org/intro/syntax-reference.html

Example of an ER diagram definition starting with the erDiagram declaration.

```mermaid
erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```

--------------------------------

### Create a sequence diagram with grouped actors

Source: https://mermaid.js.org/syntax/sequenceDiagram.html

Example demonstrating the use of boxes to organize participants in a sequence diagram.

```mermaid
    sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charley?
    B->>C: Hello Charley, how are you?
```

--------------------------------

### Configure Weekday Start for Ticks

Source: https://mermaid.js.org/syntax/gantt.html

Specifies the starting weekday for week-based tick intervals.

```mermaid
gantt
  tickInterval 1week
  weekday monday
```

--------------------------------

### Navigate to project directory

Source: https://mermaid.js.org/community/contributing.html

Change into the mermaid project folder after cloning.

```bash
cd mermaid
```

--------------------------------

### Define Diagram Styles

Source: https://mermaid.js.org/community/new-diagram.html

Example of a getStyles function that returns CSS strings using theme options for dynamic styling.

```javascript
const getStyles = (options) =>
  `
    .line {
      stroke-width: 1;
      stroke: ${options.lineColor};
      stroke-dasharray: 2;
    }
    // ...
    `;
```

--------------------------------

### Advanced Gantt Diagram with Exclusions and Statuses

Source: https://mermaid.js.org/syntax/gantt.html

A comprehensive example demonstrating task states like 'done', 'active', and 'crit', as well as date exclusions.

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
```

--------------------------------

### TCP Packet Diagram Example

Source: https://mermaid.js.org/syntax/packet.html

A complete example of a TCP packet structure using explicit bit ranges.

```mermaid
---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```

--------------------------------

### Radar Diagram Example

Source: https://mermaid.js.org/syntax/radar.html

A complete radar chart example comparing grades across multiple subjects for two individuals.

```mermaid
---
title: "Grades"
---
radar-beta
  axis m["Math"], s["Science"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}

  max 100
  min 0
```

--------------------------------

### UDP Packet Diagram Example

Source: https://mermaid.js.org/syntax/packet.html

A complete example of a UDP packet structure using a mix of relative bit counts and explicit ranges.

```mermaid
packet
title UDP Packet
+16: "Source Port"
+16: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```

--------------------------------

### Adding Comments to Flowcharts

Source: https://mermaid.js.org/syntax/flowchart.html

Comments are ignored by the parser and must be on their own line starting with %%.

```mermaid
flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
```

--------------------------------

### Implement Tooltips and Links

Source: https://mermaid.js.org/syntax/flowchart.html

Demonstrates binding callbacks and URLs to nodes with custom tooltip text.

```mermaid
flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"
```

--------------------------------

### Gantt Weekday Default Value

Source: https://mermaid.js.org/config/schema-docs/config-defs-gantt-diagram-config-properties-weekday.html

The default starting day for week-based intervals.

```json
"sunday"
```

--------------------------------

### Create a basic Git graph

Source: https://mermaid.js.org/syntax/gitgraph.html

Demonstrates a standard Git graph workflow including branching, checking out, and merging.

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

--------------------------------

### Flowchart with multi-line accessibility

Source: https://mermaid.js.org/config/accessibility.html

Example of a flowchart using multi-line accTitle and accDescr.

```mermaid
  graph LR
      accTitle: Bob's Burger's Making Big Decisions
      accDescr {
        The official Bob's Burgers corporate processes that are used
        for making very, very big decisions.
        This is actually a very simple flow: identify the big decision and then make the big decision.
         }
      A[Identify Big Decision] --> B{Make Big Decision}
      B --> D[Be done]
```

```html
<svg
  aria-labelledby="chart-title-mermaid_382ee221"
  aria-describedby="chart-desc-mermaid_382ee221"
  aria-roledescription="flowchart-v2"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  id="mermaid_382ee221"
>
  <title id="chart-title-mermaid_382ee221">Big decisions</title>
  <desc id="chart-desc-mermaid_382ee221">
    The official Bob's Burgers corporate processes that are used for making very, very big
    decisions. This is actually a very simple flow: identify the big decision and then make the big
    decision.
  </desc>
</svg>
```

--------------------------------

### Build Mermaid Locally

Source: https://mermaid.js.org/community/contributing.html

Commands to build the Mermaid library and documentation site.

```bash
pnpm run build
```

```bash
./run build
```

--------------------------------

### Flowchart with single-line accessibility

Source: https://mermaid.js.org/config/accessibility.html

Example of a flowchart using single-line accTitle and accDescr.

```mermaid
  graph LR
      accTitle: Big Decisions
      accDescr: Bob's Burgers process for making big decisions
      A[Identify Big Decision] --> B{Make Big Decision}
      B --> D[Be done]
```

```html
<svg
  aria-labelledby="chart-title-mermaid_382ee221"
  aria-describedby="chart-desc-mermaid_382ee221"
  aria-roledescription="flowchart-v2"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  id="mermaid_382ee221"
>
  <title id="chart-title-mermaid_382ee221">Big decisions</title>
  <desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
</svg>
```

--------------------------------

### Initialize diagrams with mermaid.init

Source: https://mermaid.js.org/config/usage.html

Deprecated method for manual diagram initialization. Use mermaid.run instead.

```javascript
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
```

```javascript
mermaid.init(undefined, $('#someId .yetAnotherClass'));
```

--------------------------------

### Swimlane Directional Syntax

Source: https://mermaid.js.org/syntax/swimlanes.html

Examples of defining the diagram direction using the swimlane-beta keyword.

```mermaid
swimlane-beta
```

```mermaid
swimlane-beta LR
```

--------------------------------

### initialize(config)

Source: https://mermaid.js.org/config/setup/mermaid/interfaces/Mermaid.html

Sets the configuration for Mermaid. This should be called before the run function.

```APIDOC
## initialize(config)

### Description
Used to set configurations for mermaid. This function should be called before the run function.

### Parameters
- **config** (MermaidConfig) - Required - Configuration object for mermaid.

### Returns
- **void**
```

--------------------------------

### Creation Message Syntax

Source: https://mermaid.js.org/syntax/zenuml.html

Uses the new keyword to instantiate objects.

```zenuml
zenuml
    new A1
    new A2(with, parameters)
```

--------------------------------

### Configure Cynefin diagram settings

Source: https://mermaid.js.org/syntax/cynefin.html

Use the init directive to override default diagram dimensions and visibility settings.

```mermaid
%%{init: {'cynefin': {'width': 1000, 'showDomainDescriptions': false}}}%%
cynefin-beta
  complex
    "Adaptive work"
```

--------------------------------

### Define JavaScript Callback

Source: https://mermaid.js.org/syntax/flowchart.html

Example of defining a global JavaScript function to be triggered by a node click.

```html
<script>
  window.callback = function () {
    alert('A callback was triggered');
  };
</script>
```

--------------------------------

### Creating a New Branch

Source: https://mermaid.js.org/syntax/gitgraph.html

Shows how to initialize a new branch using the branch keyword, which automatically sets it as the current branch.

```mermaid
    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
```

--------------------------------

### Configure Chart and Theme Variables

Source: https://mermaid.js.org/syntax/quadrantChart.html

Demonstrates applying custom chart dimensions and theme colors using the configuration block.

```mermaid
---
config:
  quadrantChart:
    chartWidth: 400
    chartHeight: 400
  themeVariables:
    quadrant1TextFill: "ff0000"
---
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete
```

--------------------------------

### Create a User Journey Diagram

Source: https://mermaid.js.org/intro

Maps out user steps and experiences.

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

--------------------------------

### Basic Pie Chart

Source: https://mermaid.js.org/syntax/pie.html

A simple pie chart example showing the distribution of adopted pets.

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

--------------------------------

### Run Tests

Source: https://mermaid.js.org/intro

Execute the test suite for the project.

```sh
pnpm test
```

--------------------------------

### Basic Kanban Diagram Structure

Source: https://mermaid.js.org/syntax/kanban.html

Initializes a Kanban diagram with a column and a task.

```mermaid
kanban
  column1[Column Title]
    task1[Task Description]
```

--------------------------------

### Render Mermaid Diagram Flow

Source: https://mermaid.js.org/config/setup/mermaid/interfaces/Mermaid.html

Example of a Mermaid graph definition used during the run process.

```mermaid
graph LR;
 a(Find elements)-->b{Processed}
 b-->|Yes|c(Leave element)
 b-->|No |d(Transform)
```

--------------------------------

### Initialize site-wide theme

Source: https://mermaid.js.org/config/theming.html

Use the initialize method to set a global theme for all Mermaid diagrams.

```javascript
mermaid.initialize({
  securityLevel: 'loose',
  theme: 'base',
});
```

--------------------------------

### Run Linting

Source: https://mermaid.js.org/intro

Execute ESLint to check for code quality.

```sh
pnpm lint
```

--------------------------------

### Combine Callbacks and Links

Source: https://mermaid.js.org/syntax/classDiagram.html

Demonstrates the usage of both callback and link syntax within a single class diagram.

```mermaid
classDiagram
    class Class01
    class Class02
    callback Class01 "callbackFunction" "Callback tooltip"
    link Class02 "https://www.github.com" "This is a link"
    class Class03
    class Class04
    click Class03 call callbackFunction() "Callback tooltip"
    click Class04 href "https://www.github.com" "This is a link"
```

--------------------------------

### Define a basic radar chart

Source: https://mermaid.js.org/syntax/radar.html

A complete example of a radar chart with multiple axes and data curves.

```mermaid
radar-beta
  title Restaurant Comparison
  axis food["Food Quality"], service["Service"], price["Price"]
  axis ambiance["Ambiance"]

  curve a["Restaurant A"]{4, 3, 2, 4}
  curve b["Restaurant B"]{3, 4, 3, 3}
  curve c["Restaurant C"]{2, 3, 4, 2}
  curve d["Restaurant D"]{2, 2, 4, 3}

  graticule polygon
  max 5
```

--------------------------------

### Apply different commit types

Source: https://mermaid.js.org/syntax/gitgraph.html

Demonstrates the use of NORMAL, REVERSE, and HIGHLIGHT types for commits.

```mermaid
    gitGraph
       commit id: "Normal"
       commit
       commit id: "Reverse" type: REVERSE
       commit
       commit id: "Highlight" type: HIGHLIGHT
       commit
```

--------------------------------

### Test DOM Interactions with jsdomIt

Source: https://mermaid.js.org/community/contributing.html

Example of using jsdomIt to test DOM-related code in a pseudo-browser environment.

```typescript
import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';

jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
  // Code in this block runs in a pseudo-browser environment
  addThing(svg); // The svg item is the D3 selection of the SVG node
  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
});
```

--------------------------------

### SVG aria-roledescription Example

Source: https://mermaid.js.org/config/accessibility.html

Displays the HTML structure of an SVG element with an automatically inserted aria-roledescription attribute.

```html
<svg
  aria-roledescription="stateDiagram"
  class="statediagram"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  id="mermaid-1668720491568"
></svg>
```

--------------------------------

### Define components and labels

Source: https://mermaid.js.org/syntax/wardley.html

Shows how to declare components with coordinates and optional labels or decorators.

```txt
component Name [visibility, evolution]
component Name [visibility, evolution] label [offsetX, offsetY]
component Name [visibility, evolution] (decorator)
```

```mermaid
wardley-beta
title Components

component API [0.60, 0.70]
component Database [0.40, 0.85] label [-50, 10]
component "Custom Service" [0.55, 0.35]
```

--------------------------------

### Create a Gantt Diagram

Source: https://mermaid.js.org/intro

Visualizes project schedules and task timelines.

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
```

--------------------------------

### Nesting Syntax

Source: https://mermaid.js.org/syntax/zenuml.html

Demonstrates nesting sync and async messages within a method block.

```zenuml
zenuml
    A.method() {
      B.nested_sync_method()
      B->C: nested async message
    }
```

--------------------------------

### Basic Git Graph Structure

Source: https://mermaid.js.org/syntax/gitgraph.html

Demonstrates defining branches, commits, and a reverse merge with custom tags and IDs.

```mermaid
    gitGraph
       commit id: "1"
       commit id: "2"
       branch nice_feature
       checkout nice_feature
       commit id: "3"
       checkout main
       commit id: "4"
       checkout nice_feature
       branch very_nice_feature
       checkout very_nice_feature
       commit id: "5"
       checkout main
       commit id: "6"
       checkout nice_feature
       commit id: "7"
       checkout main
       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
       checkout very_nice_feature
       commit id: "8"
       checkout main
       commit id: "9"
```

--------------------------------

### Basic Swimlane Diagram

Source: https://mermaid.js.org/syntax/swimlanes.html

A complete example showing multiple subgraphs representing different departments and the flow of work between them.

```mermaid
swimlane-beta LR
  subgraph Customer
    request[Request service]
    receive[Receive update]
  end

  subgraph Support
    triage[Triage request]
    answer[Send answer]
  end

  subgraph Engineering
    investigate[Investigate issue]
    fix[Prepare fix]
  end

  request --> triage
  triage -->|Known issue| answer
  triage -->|Needs code change| investigate
  investigate --> fix --> answer
  answer --> receive
```

--------------------------------

### Define ER Diagram with ELK Layout

Source: https://mermaid.js.org/syntax/entityRelationshipDiagram.html

Example of an ER diagram configuration using the ELK layout engine.

```mermaid
---
title: Order example
config:
    layout: elk
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

--------------------------------

### Reply Message Syntax

Source: https://mermaid.js.org/syntax/zenuml.html

Demonstrates various ways to express return values, including variable assignment and return keywords.

```zenuml
zenuml
    // 1. assign a variable from a sync message.
    a = A.SyncMessage()

    // 1.1. optionally give the variable a type
    SomeType a = A.SyncMessage()

    // 2. use return keyword
    A.SyncMessage() {
    return result
    }

    // 3. use @return or @reply annotator on an async message
    @return
    A->B: result
```

--------------------------------

### GitGraph with Theme Variables

Source: https://mermaid.js.org/syntax/gitgraph.html

A sample diagram using the default theme to demonstrate branch color and styling application.

```mermaid
---
config:
  logLevel: 'debug'
  theme: 'default'
---
       gitGraph
       commit
       branch develop
       commit tag:"v1.0.0"
       commit
       checkout main
       commit type: HIGHLIGHT
       commit
       merge develop
       commit
       branch featureA
       commit
```

--------------------------------

### Define an Architecture Diagram

Source: https://mermaid.js.org/syntax/architecture.html

A complete example showing the declaration of groups, services, and edges within an architecture diagram.

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

--------------------------------

### Create a complex mindmap with icons

Source: https://mermaid.js.org/syntax/mindmap.html

Demonstrates a multi-level mindmap structure including the use of icons via the ::icon syntax.

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

--------------------------------

### Create a Manual File Node

Source: https://mermaid.js.org/syntax/flowchart.html

Displays a flipped triangle shape for manual files.

```mermaid
flowchart TD
    A@{ shape: flip-tri, label: "Manual file" }
```

--------------------------------

### Detect Graph Type with Directive

Source: https://mermaid.js.org/config/setup/mermaid/interfaces/Mermaid.html

Example of graph text containing an %%init directive used for type detection.

```mermaid
  %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
  graph LR
   a-->b
   b-->c
   c-->d
   d-->e
   e-->f
   f-->g
   g-->h
```

--------------------------------

### Add Comments to Gantt Diagram

Source: https://mermaid.js.org/syntax/gantt.html

Use double percent signs (%%) at the start of a line to include comments that the parser will ignore.

```mermaid
gantt
    title A Gantt Diagram
    %% This is a comment
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

--------------------------------

### Sankey Configuration via Mermaid Initialize

Source: https://mermaid.js.org/syntax/sankey.html

Configures global Sankey diagram settings such as dimensions, link coloring, and node alignment using the mermaid.initialize method.

```html
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>
```

--------------------------------

### Adding Comments to Class Diagrams

Source: https://mermaid.js.org/syntax/classDiagram.html

Use double percent signs (%%) at the start of a line to include comments that the parser will ignore.

```mermaid
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
```

--------------------------------

### Create an empty Cynefin framework

Source: https://mermaid.js.org/syntax/cynefin.html

A template showing only the domain structure without items.

```mermaid
cynefin-beta
  title Cynefin Framework

  complex
  complicated
  clear
  chaotic
```
Tokens:
Raw