References
Flowchart flowchart syntax description
Sequence diagrams syntax description
Class diagrams - class diagrams syntax description
Syntax description of State diagrams
Entity Relationship Diagrams syntax description
User Journey Diagram - syntax description of User Journey Diagram
Gantt chart Gantt syntax description
Instruction - Directives syntax description
Pie chart - Pie chart diagrams syntax description
mermaid online mapping tool - can be saved as a picture
Flow chart - Flowchart
The difference between keyword graph and flowchart: flowchart supports some special properties, such as the connection between subgraphs and more special arrows.
Flow chart direction
- TB - top to bottom
- TD - top-down/ same as top to bottom
- BT - bottom to top
- RL - right to left
- LR - left to right
Graphic shape and connection mode
graph LR
id1[this]
id2[[those]]
id3([here])
id4[(Database)]
id5((circle))
id6>arrow]
id7{rhombus}
id8{{hexagon node}}
id9[/box/]
id10[/trapzoid\]
id1 --- id2 --> id3 -.-> id4
id5 --- |text1| id6 -->|text2| id7 -.->|text3| id8
id9 == desc ==>id10
id9 --> |desc2| id10
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
flowchart LR
A o--o B
B <--> C
C x--x D
Custom style
flowchart can't customize the style (maybe I can't, ha ha)
Use keyword style
graph LR
id1(Start)
id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
id1 -->a & b -->id2
Declare as a class and use / subgraph multiple times
It can also be configured directly in the theme configuration file (xxx.css). If a class is named default, it will be assigned to all classes without a specific class definition. Classdefault fill: #f9f, stroke: #333, stroke width: 4PX;.
flowchart
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
graph
graph LR %% flowchart Change to graph it's fine too %% Style 1, filled with red, border with blue, border width of two pixels classDef mystyle1 fill:#f00, stroke:#00f, stroke-width:2px; classDef mystyle2 fill:#0f0, stroke:#f00, stroke-width:4px; classDef mystyle3 fill:#00f, stroke:#0f0, stroke-width:8px,color:#fff,stroke-dasharray: 5 5 classDef default fill:#f9f,stroke:#333,stroke-width:4px; %% :::Represents an inherited class (style) D[(Default style)] A:::mystyle1 --> D B:::mystyle2 --> D C:::mystyle3 --> D %% D Default to default style C --> b2 subgraph one a1 --- a2 end subgraph two b1 --> b2 end A -.-> a1 %% graph Graphics cannot be connected between subgraphs, but the elements inside the subgraph can still be connected %%one --> two
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
%% <br/>Can wrap
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
Binding event
I don't quite understand
Pie chart pie
pie
title timeSpend
"movie" : 20
"book" : 10
"study" : 10
"sleep" : 50
Sequence diagram
Basic syntax: [Actor][Arrow][Actor]:Message text, Actor means role. Among them, Arrow has - >, – >, - > >, – > >, - x, – X.
Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss: the style of sequence diagram is completed by defining multiple CSS classes. During rendering, these classes are from Src / themes / sequence Extracted from the file in SCSS.
sequenceDiagram
%% auto number
autonumber
%% aliases，alias
participant J as John
participant A as Alice
participant C as CofCai
A->>J: Hello John, how are you?
J-->>A: Great!
%% Notes
Note left of J: I'm John
Note right of A: I'm Alice
Note over J,A: a typical interaction
%% loop
loop Every minute
J -->> A:I love you!
end
%% Selectable path
alt is sick
J ->> A:Not so good
else is well
J ->> A:fell so good!
end
%% No, else You can provide the default opt
opt Extra response
J ->> A:Thanks for asking
end
%% Show actions that occur in parallel, parallel: parallel
%% par [action1]
par action1
A -->> J:hello guys
and action2
A -->> C:hello guys
and action3
C ->>J:hello guys
end
%% Highlight the background to provide a colored background rectangle
rect rgb(255, 255, 0)
loop come
%% <br/>Can wrap
C ->> C:I have color<br/>Self circulation of
end
end
class diagrams
Used to express the ownership relationship between classes
classDiagram
%% Duck Inherited from Animal
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
%% +Namely public；-Namely private；#protected~ Package/Internal
Animal : +int age
Animal : +String gender
%% Return value type, followed by parentheses. Remember to have a space
Animal: +isMammal() bool
Animal: +mate()
%% Duck have Animal Properties and methods of
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run(speed)
}
Duck <|-- yellowDuck
class yellowDuck{
-string color
-int size
}
Relationship between classes
classDiagram
%% [classA][Arrow][ClassB]:LabelText
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
Class annotation
- <<Interface>> To represent an Interface class
- <<abstract>> To represent an abstract class
- <<Service>> To represent a service class
- <<enumeration>> To represent an enum
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
State diagrams
State diagram is a kind of diagram used to describe system behavior in computer science and related fields. The state diagram requires the system described to be composed of a limited number of states;
Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss: the style of the state diagram is accomplished by defining multiple CSS classes. During rendering, these classes are from Src / themes / state Extracted from the file in SCSS.
stateDiagram-v2
%% Definition of status
%% state "this is a state description" as s2
%% s2: this is a state description
%% State transition transitions
%% s1 --> s2: A transitions
[*] --> Still:begin
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
An example to see all
stateDiagram-v2
%% fork: Fork, join: coupling
%% Declare a fork/dispersed
state fork_state <<fork>>
%% Declare a join/Convergence
state join_state <<join>>
%% label
note left of fork_state: This is a separation point
note left of join_state: This is a gathering point
state First {
[*] --> fir
fir --> [*]
state inner {
[*] --> a
a --> [*]
}
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
[*] --> fork_state
fork_state --> First
fork_state --> Second
First --> join_state
Second --> join_state
join_state --> Third
Concurrent
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
Entity relationship diagram
await a vacancy or job opening
User journey map
await a vacancy or job opening
Gantt chart
await a vacancy or job opening