mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
4a7489a7b6
- covert `cSpell.json` to `cspell.config.yaml` - break up the word list into multiple dictionary files - fix spelling issues - Enable spell checking code for non-test files
302 lines
7.6 KiB
Markdown
302 lines
7.6 KiB
Markdown
> **Warning**
|
|
>
|
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
>
|
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).
|
|
|
|
# Examples
|
|
|
|
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](../config/usage.md?id=usage).**
|
|
|
|
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**
|
|
|
|
## Basic Pie Chart
|
|
|
|
```mermaid-example
|
|
pie title NETFLIX
|
|
"Time spent looking for movie" : 90
|
|
"Time spent watching it" : 10
|
|
```
|
|
|
|
```mermaid
|
|
pie title NETFLIX
|
|
"Time spent looking for movie" : 90
|
|
"Time spent watching it" : 10
|
|
```
|
|
|
|
```mermaid-example
|
|
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
|
|
```
|
|
|
|
## Basic sequence diagram
|
|
|
|
```mermaid-example
|
|
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?
|
|
```
|
|
|
|
```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
|
|
|
|
```mermaid-example
|
|
graph LR
|
|
A[Square Rect] -- Link text --> B((Circle))
|
|
A --> C(Round Rect)
|
|
B --> D{Rhombus}
|
|
C --> D
|
|
```
|
|
|
|
```mermaid
|
|
graph LR
|
|
A[Square Rect] -- Link text --> B((Circle))
|
|
A --> C(Round Rect)
|
|
B --> D{Rhombus}
|
|
C --> D
|
|
```
|
|
|
|
## Larger flowchart with some styling
|
|
|
|
```mermaid-example
|
|
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
|
|
```
|
|
|
|
```mermaid
|
|
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
|
|
```
|
|
|
|
## SequenceDiagram: Loops, alt and opt
|
|
|
|
```mermaid-example
|
|
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
|
|
```
|
|
|
|
```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
|
|
```
|
|
|
|
## SequenceDiagram: Message to self in loop
|
|
|
|
```mermaid-example
|
|
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!
|
|
```
|
|
|
|
```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!
|
|
```
|
|
|
|
## Sequence Diagram: Blogging app service communication
|
|
|
|
```mermaid-example
|
|
sequenceDiagram
|
|
participant web as Web Browser
|
|
participant blog as Blog Service
|
|
participant account as Account Service
|
|
participant mail as Mail Service
|
|
participant db as Storage
|
|
|
|
Note over web,db: The user must be logged in to submit blog posts
|
|
web->>+account: Logs in using credentials
|
|
account->>db: Query stored accounts
|
|
db->>account: Respond with query result
|
|
|
|
alt Credentials not found
|
|
account->>web: Invalid credentials
|
|
else Credentials found
|
|
account->>-web: Successfully logged in
|
|
|
|
Note over web,db: When the user is authenticated, they can now submit new posts
|
|
web->>+blog: Submit new post
|
|
blog->>db: Store post data
|
|
|
|
par Notifications
|
|
blog--)mail: Send mail to blog subscribers
|
|
blog--)db: Store in-site notifications
|
|
and Response
|
|
blog-->>-web: Successfully posted
|
|
end
|
|
end
|
|
|
|
```
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant web as Web Browser
|
|
participant blog as Blog Service
|
|
participant account as Account Service
|
|
participant mail as Mail Service
|
|
participant db as Storage
|
|
|
|
Note over web,db: The user must be logged in to submit blog posts
|
|
web->>+account: Logs in using credentials
|
|
account->>db: Query stored accounts
|
|
db->>account: Respond with query result
|
|
|
|
alt Credentials not found
|
|
account->>web: Invalid credentials
|
|
else Credentials found
|
|
account->>-web: Successfully logged in
|
|
|
|
Note over web,db: When the user is authenticated, they can now submit new posts
|
|
web->>+blog: Submit new post
|
|
blog->>db: Store post data
|
|
|
|
par Notifications
|
|
blog--)mail: Send mail to blog subscribers
|
|
blog--)db: Store in-site notifications
|
|
and Response
|
|
blog-->>-web: Successfully posted
|
|
end
|
|
end
|
|
|
|
```
|
|
|
|
## A commit flow diagram.
|
|
|
|
```mermaid-example
|
|
gitGraph:
|
|
commit "Ashish"
|
|
branch newbranch
|
|
checkout newbranch
|
|
commit id:"1111"
|
|
commit tag:"test"
|
|
checkout main
|
|
commit type: HIGHLIGHT
|
|
commit
|
|
merge newbranch
|
|
commit
|
|
branch b2
|
|
commit
|
|
```
|
|
|
|
```mermaid
|
|
gitGraph:
|
|
commit "Ashish"
|
|
branch newbranch
|
|
checkout newbranch
|
|
commit id:"1111"
|
|
commit tag:"test"
|
|
checkout main
|
|
commit type: HIGHLIGHT
|
|
commit
|
|
merge newbranch
|
|
commit
|
|
branch b2
|
|
commit
|
|
```
|
|
|
|
<!--- cspell:ignore Ashish newbranch --->
|