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