177 lines
3.7 KiB
Markdown
177 lines
3.7 KiB
Markdown
---
|
|
weight: 220
|
|
title: "Mermaid"
|
|
description: "Example Mermaid diagrams"
|
|
icon: "function"
|
|
date: "2023-09-08T05:12:51+01:00"
|
|
lastmod: "2023-09-08T05:12:51+01:00"
|
|
draft: false
|
|
toc: true
|
|
---
|
|
|
|
## Flowchart
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
|
|
A[Hard] -->|Text| B(Round)
|
|
B --> C{Decision}
|
|
C -->|One| D[Result 1]
|
|
C -->|Two| E[Result 2]
|
|
```
|
|
|
|
## Sequence diagram
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
Alice->>John: Hello John, how are you?
|
|
loop Healthcheck
|
|
John->>John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts!
|
|
John-->>Alice: Great!
|
|
John->>Bob: How about you?
|
|
Bob-->>John: Jolly good!
|
|
```
|
|
|
|
## Gantt Chart
|
|
|
|
```mermaid
|
|
gantt
|
|
section Section
|
|
Completed :done, des1, 2014-01-06,2014-01-08
|
|
Active :active, des2, 2014-01-07, 3d
|
|
Parallel 1 : des3, after des1, 1d
|
|
Parallel 2 : des4, after des1, 1d
|
|
Parallel 3 : des5, after des3, 1d
|
|
Parallel 4 : des6, after des4, 1d
|
|
```
|
|
|
|
## Class diagram
|
|
|
|
```mermaid
|
|
classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
<<interface>> Class01
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
class Class10 {
|
|
>>service>>
|
|
int id
|
|
size()
|
|
}
|
|
```
|
|
|
|
## State diagram
|
|
|
|
```mermaid
|
|
stateDiagram-v2
|
|
[*] --> Still
|
|
Still --> [*]
|
|
Still --> Moving
|
|
Moving --> Still
|
|
Moving --> Crash
|
|
Crash --> [*]
|
|
```
|
|
|
|
## Pie Chart
|
|
|
|
```mermaid
|
|
pie
|
|
"Dogs" : 386
|
|
"Cats" : 85.9
|
|
"Rats" : 15
|
|
```
|
|
|
|
## Git Graph
|
|
|
|
```mermaid
|
|
gitGraph
|
|
commit
|
|
commit
|
|
branch develop
|
|
checkout develop
|
|
commit
|
|
commit
|
|
checkout main
|
|
merge develop
|
|
commit
|
|
commit
|
|
```
|
|
|
|
## Bar chart (using gantt chart)
|
|
|
|
```mermaid
|
|
gantt
|
|
title Git Issues - days since last update
|
|
dateFormat X
|
|
axisFormat %s
|
|
|
|
section Issue19062
|
|
71 : 0, 71
|
|
section Issue19401
|
|
36 : 0, 36
|
|
section Issue193
|
|
34 : 0, 34
|
|
section Issue7441
|
|
9 : 0, 9
|
|
section Issue1300
|
|
5 : 0, 5
|
|
```
|
|
|
|
## User Journey diagram
|
|
|
|
```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: 3: Me
|
|
```
|
|
|
|
## C4 diagram
|
|
|
|
```mermaid
|
|
C4Context
|
|
title System Context diagram for Internet Banking System
|
|
|
|
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
|
Person(customerB, "Banking Customer B")
|
|
Person_Ext(customerC, "Banking Customer C")
|
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
|
|
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
|
|
|
Enterprise_Boundary(b1, "BankBoundary") {
|
|
|
|
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
|
|
|
System_Boundary(b2, "BankBoundary2") {
|
|
System(SystemA, "Banking System A")
|
|
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
|
|
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
|
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
|
|
|
Boundary(b3, "BankBoundary3", "boundary") {
|
|
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
|
|
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
|
}
|
|
}
|
|
|
|
BiRel(customerA, SystemAA, "Uses")
|
|
BiRel(SystemAA, SystemE, "Uses")
|
|
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
|
Rel(SystemC, customerA, "Sends e-mails to")
|
|
``` |