2020-07-24 03:39:43 +02:00
# Examples
**Edit this Page** [![N|Solid ](./img/GitHub-Mark-32px.png )](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
2019-10-30 18:30:14 +01:00
## Basic Pie Chart
```
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
2020-04-15 00:15:10 +02:00
```mermaid
2019-10-30 18:30:14 +01:00
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
```
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
```mermaid
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
2020-05-01 19:18:07 +02:00
```
2019-07-16 21:13:40 +02:00
## Basic sequence diagram
2019-07-12 20:40:54 +02:00
2019-07-16 21:13:40 +02:00
```
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long< br / > long time, so long< br / > that the text does< br / > not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
2019-07-12 20:40:54 +02:00
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long< br / > long time, so long< br / > that the text does< br / > not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
## Basic flowchart
2020-04-15 00:15:10 +02:00
```
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
2019-07-12 20:40:54 +02:00
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
## Larger flowchart with some styling
2020-04-15 00:15:10 +02:00
```
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line< br / > edge comment --> ro
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
```
2019-07-12 20:40:54 +02:00
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
2019-07-16 21:13:40 +02:00
subgraph A
2019-07-12 20:40:54 +02:00
od>Odd shape]-- Two line< br / > edge comment --> ro
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
```
## Loops, alt and opt
2020-04-15 00:15:10 +02:00
```
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
2019-07-12 20:40:54 +02:00
```mermaid
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
## Message to self in loop
2020-04-15 00:15:10 +02:00
```
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!
```
2019-07-12 20:40:54 +02:00
```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!
```