Mermaid

Mermaid

^

• Please use the following (to change color):

eg.

{{#mermaid:
%% color-bg: #202020
%% color-line: #ff4d4d
graph TD
A[Start] --> B[Förbered]
B --> C[Installera]
C --> D[Tester]
linkStyle default stroke:#ff4d4d,stroke-width:2px,stroke-opacity:0.95
}}

Example of syntax for Mermaid with color

{{#mermaid:
graph TD
  Start([🚀 Start])
    --> Download["📥 Download<br/>Linux<br/>ISO<br/>(wget eller<br/>webbläsare)<br/><br/><br/><br/>"]
  Download
    --> Lsblk["🔍 lsblk<br/>lsblk -l<br/>List<br/>devices<br/><br/><br/>"]
  Lsblk
    --> Check{Double-check<br/>target<br/>device?}
  Check -->|No| Lsblk
  Check -->|Yes| Warning["⚠️ WARNING<br/>All data<br/>will be<br/>erased!<br/><br/><br/>"]
  Warning
    --> Confirm{Proceed?<br/><br/>}
  Confirm -->|Cancel| Cancel([❌ Cancelled<br/><br/>])
  Confirm -->|Continue| Umount["🔓 umount<br/>sudo umount<br/>/dev/sdX*<br/><br/>"]
  Umount
    --> DD["✍️ dd<br/>sudo dd if=image.iso of=/dev/sdX bs=4M status=progress<br/><br/>"]
  DD
    --> Wait["⏳ Wait for<br/>completion<br/><br/>"]
  Wait
    --> Eject["🔌 eject<br/>eject<br/>/dev/sdX<br/><br/><br/>"]
  Eject
    --> Done([✅ Done!<br/><br/>])

  %% Styling - generous padding and font size for all boxes
  style Start fill:#2ECC71,stroke:#27AE60,color:#fff,padding:36px,font-size:11px
  style Download fill:#9B59B6,stroke:#8E44AD,color:#fff,padding:36px,font-size:11px
  style Lsblk fill:#3498DB,stroke:#2980B9,color:#fff,padding:36px,font-size:11px
  style Check fill:#F39C12,stroke:#D68910,color:#111,padding:36px,font-size:11px
  style Warning fill:#E74C3C,stroke:#C0392B,color:#fff,padding:36px,font-size:11px
  style Confirm fill:#F39C12,stroke:#D68910,color:#111,padding:36px,font-size:11px
  style Umount fill:#9B59B6,stroke:#8E44AD,color:#fff,padding:36px,font-size:11px
  style DD fill:#E74C3C,stroke:#C0392B,color:#fff,padding:36px,font-size:11px
  style Wait fill:#1ABC9C,stroke:#16A085,color:#fff,padding:36px,font-size:11px
  style Eject fill:#3498DB,stroke:#2980B9,color:#fff,padding:36px,font-size:11px
  style Done fill:#2ECC71,stroke:#27AE60,color:#fff,padding:36px,font-size:11px

  %% Set all connector lines to white
  linkStyle default stroke:#fff,stroke-width:1px
  |
  config.theme = dark
  config.flowchart.useMaxWidth = true
  config.flowchart.padding = 40
  config.flowchart.nodeSpacing = 90
  config.flowchart.rankSpacing = 150
}}

Sequence Diagram

{{#mermaid:sequenceDiagram
participant Bella
participant Stella
participant Bianca
Bella->>Stella: Hello Bianca, how are you?
loop Healthcheck
  Bella->>Stella: Fight against hypochondria
end
Note right of Bella: Rational thoughts <br/>prevail...
Bella-->>Bianca: Great!
Bella->>Stella: How about you?
Stella-->>Bella: Jolly good!
}}

Gantt

{{#mermaid:gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task  :done,    des1, 2014-01-06, 2d
Active task     :active,  des2, 2014-01-08, 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                      :1d
}}

Graph

{{#mermaid:graph TD
A[input files] --> B[pipeline]
B --> C[output 1]
B --> D[output 2]
C --> E[post-process 1]
C --> F[post-process 2]
C --> G1[post-process 3]
D --> G2[post-process 4]
C --> H[display]
D --> H2[display]
B --> I[summary]
E --> I
F --> I
G1 --> I
G2 --> I
H --> I
H2 --> I
}}

Will get you:

With links

{{#mermaid:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
click A "https://sandbox.semantic-mediawiki.org/wiki/A"
click B "https://sandbox.semantic-mediawiki.org/wiki/B"
click C "https://sandbox.semantic-mediawiki.org/wiki/C"
click D "https://sandbox.semantic-mediawiki.org/wiki/D"
linkStyle default stroke:#fff,stroke-width:2px
}}

With links and tooltips

{{#mermaid:graph LR;
A-->B;
click A "https://sandbox.semantic-mediawiki.org/wiki/A" "This is the tooltip for a link to page A."
click B "https://sandbox.semantic-mediawiki.org/wiki/B" "This is the tooltip for a link to page B."
}}

Subgraph Example

{{#mermaid:
%% color: #090107
graph TD
subgraph ICT Department
A1("Assets received") --> A2("Count and check that all items delivered according to delivery note")
A2 --> A3("Add non-consumable asset(s) to asset registry")
A3 --> A4("Store or redistribute asset")
end
subgraph Stores
A2 --> B1("Generate GRV")
end
subgraph Sub-process
A3 --> C1("Insurance process")
end
}}

Wide Graph

{{#mermaid:graph TD;
A["This is a very wide box"]
B["This is a very wide box"]
C["This is a very wide box"]
D["This is a very wide box"]
E["This is a very wide box"]
F["This is a very wide box"]
G["This is a very wide box"]
H["This is a very wide box"]
I["This is a very wide box"]
J["This is a very wide box"]
A-->B
B-->C
C-->D
D-->E
E-->F
F-->G
G-->H
H-->I
I-->J
}}