Hugo Cosmos | Mermaid

MermaidJS is library for generating svg charts and diagrams from text. You can edit your mermaid code using Online Mermaid Editor.

Flowchart

Sequence Diagram

Class Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


```mermaid
classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides
```

State Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


```mermaid
stateDiagram
    direction LR
    [*] --> A
    A --> B
    B --> C
    state B {
      direction LR
      a --> b
    }
    B --> D
```

Entity Relationship Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


```mermaid
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }
```

Gantt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


```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 sec      :2014-01-12  , 12d
    another task      : 24d
```

Pie Chart

1
2
3
4
5
6
7
8


```mermaid
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

Gitgraph Diagram

Mindmap

Mermaid also support mindmap now, but we don’t use it yet.

1
2
3
4
5


<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
  import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

Details of Mermaid

Hugo Short Code: Mermaid