mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-15 21:39:40 +02:00
Merge branch 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid into sidv/configReturn
* 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid: (45 commits) updated styles, testcases and fixed html labels for image shape MC-1733 Reset layout updated ImageSqaure shape updated styles updated pos changes fixed html labels for icon shape updated test cases Added rounded icon shape Updated circle icon updated image shape Updated labels for shapes updated icon square and icon MC-1733 Reset layout Updated logic for vertex label Updated test cases Update .changeset/rude-meals-invite.md changesets added neo-fication and shape-resize for linedCylinder shape added neo-fication for curvedTrapezoid shape Version Packages ...
This commit is contained in:
Sidharth Vinod
@@ -1,301 +0,0 @@
|
||||
> **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 --->
|
||||
Reference in New Issue
Block a user