7.6 KB302 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).
6
7# Examples
8
9This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
10
11**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**
12
13**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**
14
15## Basic Pie Chart
16
17```mermaid-example
18pie title NETFLIX
19 "Time spent looking for movie" : 90
20 "Time spent watching it" : 10
21```
22
23```mermaid
24pie title NETFLIX
25 "Time spent looking for movie" : 90
26 "Time spent watching it" : 10
27```
28
29```mermaid-example
30pie title What Voldemort doesn't have?
31 "FRIENDS" : 2
32 "FAMILY" : 3
33 "NOSE" : 45
34```
35
36```mermaid
37pie title What Voldemort doesn't have?
38 "FRIENDS" : 2
39 "FAMILY" : 3
40 "NOSE" : 45
41```
42
43## Basic sequence diagram
44
45```mermaid-example
46sequenceDiagram
47 Alice ->> Bob: Hello Bob, how are you?
48 Bob-->>John: How about you John?
49 Bob--x Alice: I am good thanks!
50 Bob-x John: I am good thanks!
51 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
52
53 Bob-->Alice: Checking with John...
54 Alice->John: Yes... John, how are you?
55```
56
57```mermaid
58sequenceDiagram
59 Alice ->> Bob: Hello Bob, how are you?
60 Bob-->>John: How about you John?
61 Bob--x Alice: I am good thanks!
62 Bob-x John: I am good thanks!
63 Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
64
65 Bob-->Alice: Checking with John...
66 Alice->John: Yes... John, how are you?
67```
68
69## Basic flowchart
70
71```mermaid-example
72graph LR
73 A[Square Rect] -- Link text --> B((Circle))
74 A --> C(Round Rect)
75 B --> D{Rhombus}
76 C --> D
77```
78
79```mermaid
80graph LR
81 A[Square Rect] -- Link text --> B((Circle))
82 A --> C(Round Rect)
83 B --> D{Rhombus}
84 C --> D
85```
86
87## Larger flowchart with some styling
88
89```mermaid-example
90graph TB
91 sq[Square shape] --> ci((Circle shape))
92
93 subgraph A
94 od>Odd shape]-- Two line<br/>edge comment --> ro
95 di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
96 di==>ro2(Rounded square shape)
97 end
98
99 %% Notice that no text in shape are added here instead that is appended further down
100 e --> od3>Really long text with linebreak<br>in an Odd shape]
101
102 %% Comments after double percent signs
103 e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
104
105 cyr[Cyrillic]-->cyr2((Circle shape Начало));
106
107 classDef green fill:#9f6,stroke:#333,stroke-width:2px;
108 classDef orange fill:#f96,stroke:#333,stroke-width:4px;
109 class sq,e green
110 class di orange
111```
112
113```mermaid
114graph TB
115 sq[Square shape] --> ci((Circle shape))
116
117 subgraph A
118 od>Odd shape]-- Two line<br/>edge comment --> ro
119 di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
120 di==>ro2(Rounded square shape)
121 end
122
123 %% Notice that no text in shape are added here instead that is appended further down
124 e --> od3>Really long text with linebreak<br>in an Odd shape]
125
126 %% Comments after double percent signs
127 e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
128
129 cyr[Cyrillic]-->cyr2((Circle shape Начало));
130
131 classDef green fill:#9f6,stroke:#333,stroke-width:2px;
132 classDef orange fill:#f96,stroke:#333,stroke-width:4px;
133 class sq,e green
134 class di orange
135```
136
137## SequenceDiagram: Loops, alt and opt
138
139```mermaid-example
140sequenceDiagram
141 loop Daily query
142 Alice->>Bob: Hello Bob, how are you?
143 alt is sick
144 Bob->>Alice: Not so good :(
145 else is well
146 Bob->>Alice: Feeling fresh like a daisy
147 end
148
149 opt Extra response
150 Bob->>Alice: Thanks for asking
151 end
152 end
153```
154
155```mermaid
156sequenceDiagram
157 loop Daily query
158 Alice->>Bob: Hello Bob, how are you?
159 alt is sick
160 Bob->>Alice: Not so good :(
161 else is well
162 Bob->>Alice: Feeling fresh like a daisy
163 end
164
165 opt Extra response
166 Bob->>Alice: Thanks for asking
167 end
168 end
169```
170
171## SequenceDiagram: Message to self in loop
172
173```mermaid-example
174sequenceDiagram
175 participant Alice
176 participant Bob
177 Alice->>John: Hello John, how are you?
178 loop HealthCheck
179 John->>John: Fight against hypochondria
180 end
181 Note right of John: Rational thoughts<br/>prevail...
182 John-->>Alice: Great!
183 John->>Bob: How about you?
184 Bob-->>John: Jolly good!
185```
186
187```mermaid
188sequenceDiagram
189 participant Alice
190 participant Bob
191 Alice->>John: Hello John, how are you?
192 loop HealthCheck
193 John->>John: Fight against hypochondria
194 end
195 Note right of John: Rational thoughts<br/>prevail...
196 John-->>Alice: Great!
197 John->>Bob: How about you?
198 Bob-->>John: Jolly good!
199```
200
201## Sequence Diagram: Blogging app service communication
202
203```mermaid-example
204sequenceDiagram
205 participant web as Web Browser
206 participant blog as Blog Service
207 participant account as Account Service
208 participant mail as Mail Service
209 participant db as Storage
210
211 Note over web,db: The user must be logged in to submit blog posts
212 web->>+account: Logs in using credentials
213 account->>db: Query stored accounts
214 db->>account: Respond with query result
215
216 alt Credentials not found
217 account->>web: Invalid credentials
218 else Credentials found
219 account->>-web: Successfully logged in
220
221 Note over web,db: When the user is authenticated, they can now submit new posts
222 web->>+blog: Submit new post
223 blog->>db: Store post data
224
225 par Notifications
226 blog--)mail: Send mail to blog subscribers
227 blog--)db: Store in-site notifications
228 and Response
229 blog-->>-web: Successfully posted
230 end
231 end
232
233```
234
235```mermaid
236sequenceDiagram
237 participant web as Web Browser
238 participant blog as Blog Service
239 participant account as Account Service
240 participant mail as Mail Service
241 participant db as Storage
242
243 Note over web,db: The user must be logged in to submit blog posts
244 web->>+account: Logs in using credentials
245 account->>db: Query stored accounts
246 db->>account: Respond with query result
247
248 alt Credentials not found
249 account->>web: Invalid credentials
250 else Credentials found
251 account->>-web: Successfully logged in
252
253 Note over web,db: When the user is authenticated, they can now submit new posts
254 web->>+blog: Submit new post
255 blog->>db: Store post data
256
257 par Notifications
258 blog--)mail: Send mail to blog subscribers
259 blog--)db: Store in-site notifications
260 and Response
261 blog-->>-web: Successfully posted
262 end
263 end
264
265```
266
267## A commit flow diagram.
268
269```mermaid-example
270gitGraph:
271 commit "Ashish"
272 branch newbranch
273 checkout newbranch
274 commit id:"1111"
275 commit tag:"test"
276 checkout main
277 commit type: HIGHLIGHT
278 commit
279 merge newbranch
280 commit
281 branch b2
282 commit
283```
284
285```mermaid
286gitGraph:
287 commit "Ashish"
288 branch newbranch
289 checkout newbranch
290 commit id:"1111"
291 commit tag:"test"
292 checkout main
293 commit type: HIGHLIGHT
294 commit
295 merge newbranch
296 commit
297 branch b2
298 commit
299```
300
301<!--- cspell:ignore Ashish newbranch --->
302