See: https://mermaid-js.github.io
Mermaid lets you represent diagrams using text and code. This simplifies maintaining complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
Some examples of mermaid diagrams:
- Simple diagrams
- Class diagrams
- Entity relationships diagrams
- Sequence diagrams
- State diagrams
- Gantt diagrams
- Flow charts
- Pie charts
- User journey
- Git graph
- Other examples
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
Class diagrams
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
Entity relationships diagrams
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Sequence diagrams
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
State diagrams
stateDiagram-v2
[*] --> Still
Still --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]
Gantt diagrams
gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
Flow charts
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Pie charts
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
User journey
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
Git graph
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
Other examples
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D