Mermaid
Mermaid is a diagramming and charting tool that can be defined inside Markdown code blocks.
Component syntax
With a similar syntax to code blocks, creating a Mermaid diagram requires a ``` code fence with the inclusion of the mermaid specifier.
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Theming
Diagrams are rendered with your site's palette by default. Neko feeds the
resolved theme colours (primary ramp) and accent ramp into Mermaid's base
theme as themeVariables, so node fills, borders, lines, and text follow the
same colours as the rest of the site — the same theme.name / theme.colors
/ theme.accent you set in neko.yml. Every
diagram is rendered twice (a light and a dark variant) and the matching one is
shown with the page theme, so the colours adapt automatically in dark mode.
No configuration is needed — author the diagram as usual and it picks up the
brand colours. To opt a single diagram out and use a stock Mermaid look,
declare your own theme in an %%{init}%% directive (see below); when a
diagram sets its own theme, Neko renders it verbatim and does not apply the
brand palette.
Directives
Mermaid directives can be configured using the recommended %%{init: { }}%% syntax as the first line just inside the ```mermaid block.
From the Mermaid docs:
Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
All Mermaid directives are supported by Neko.
The following sample demonstrates applying a theme to the diagram:
```mermaid
%%{init: { 'theme': 'forest' }}%%
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Syntax highlighting block
In order to draw a mermaid code block with syntax highlighting instead of rendering the contents, please use the mermaid-js block syntax specifier.
```mermaid-js
%%{init: { 'theme': 'forest' }}%%
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
%%{init: { 'logLevel': 'debug', 'theme': 'forest' }}%%
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Diagram types
Flowchart
More details in the Mermaid docs.
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
Sequence diagram
More details in the Mermaid docs.
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Gantt diagram
More details in the Mermaid docs.
```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
```
Class diagram
More details in the Mermaid docs.
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
Entity Relationship
More details in the Mermaid docs.
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
User Journey
More details in the Mermaid docs.
```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
```
Kanban diagram
More details in the Mermaid docs.
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 som 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]
Sankey diagram
More details in the Mermaid docs.
```mermaid
sankey-beta
%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
```
Architecture diagram
More details in the Mermaid docs.
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
XY Chart
More details in the Mermaid docs.
xychart-beta
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]
Sequence diagram
More details in the Mermaid docs.