marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-05 07:09:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Support for mermaid-example

Browse Source
This commit is contained in:
Yash-Singh1
2021-11-01 20:18:18 -07:00
parent dac542682d
commit 2ae442accc
14 changed files with 210 additions and 1747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
docs/sequenceDiagram.md
View File

@@ -5,20 +5,13 @@
Mermaid can render sequence diagrams.
```mermaid-code
```mermaid-example
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice--)John: See you later!
```
```note
A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
@@ -34,7 +27,7 @@ rendered in order of appearance in the diagram source text. Sometimes you might
different order than how they appear in the first message. It is possible to specify the actor's order of
appearance by doing the following:
```mermaid-code
```mermaid-example
sequenceDiagram
participant Alice
participant Bob
@@ -42,18 +35,10 @@ sequenceDiagram
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Actors
If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
```mermaid-code
```mermaid-example
sequenceDiagram
actor Alice
actor Bob
@@ -61,15 +46,7 @@ sequenceDiagram
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
```mermaid-code
```mermaid-example
sequenceDiagram
actor Alice
actor Bob
@@ -77,27 +54,11 @@ sequenceDiagram
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Aliases
The actor can have a convenient identifier and a descriptive label.
```mermaid-code
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
```
```mermaid
```mermaid-example
sequenceDiagram
participant A as Alice
participant J as John
@@ -130,15 +91,7 @@ There are six types of arrows currently supported:
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
```mermaid-code
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
@@ -148,13 +101,7 @@ sequenceDiagram
There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
```mermaid-code
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
@@ -162,15 +109,7 @@ sequenceDiagram
Activations can be stacked for same actor:
```mermaid-code
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
@@ -185,13 +124,7 @@ Note [ right of | left of | over ] [Actor]: Text in note content
See the example below:
```mermaid-code
sequenceDiagram
participant John
Note right of John: Text in note
```
```mermaid
```mermaid-example
sequenceDiagram
participant John
Note right of John: Text in note
@@ -199,13 +132,7 @@ sequenceDiagram
It is also possible to create notes spanning two participants:
```mermaid-code
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
@@ -223,15 +150,7 @@ end
See the example below:
```mermaid-code
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
@@ -261,20 +180,7 @@ end
See the example below:
```mermaid-code
sequenceDiagram
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
```
```mermaid
```mermaid-example
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
@@ -305,18 +211,7 @@ end
See the example below:
```mermaid-code
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
```
```mermaid
```mermaid-example
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
@@ -329,21 +224,7 @@ sequenceDiagram
It is also possible to nest parallel blocks.
```mermaid-code
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
```
```mermaid
```mermaid-example
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
@@ -377,26 +258,7 @@ end
See the examples below:
```mermaid-code
sequenceDiagram
participant Alice
participant John
rect rgb(191, 223, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(200, 150, 255)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
```
```mermaid
```mermaid-example
sequenceDiagram
participant Alice
participant John
@@ -430,12 +292,7 @@ sequenceDiagram
It is possible to escape characters using the syntax exemplified here.
```mermaid-code
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
```
```mermaid
```mermaid-example
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
@@ -459,20 +316,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
It can also be be turned on via the diagram code as in the diagram:
```mermaid-code
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
```mermaid
```mermaid-example
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
@@ -490,9 +334,9 @@ sequenceDiagram
Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url>
```
link <actor>: <link-label> @ <link-url>
```
```mermaid-code
sequenceDiagram
participant Alice
@@ -511,7 +355,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
This can be configured by adding the links lines with the format:
links <actor>: <json-formatted link-name link-url pairs>
```
links <actor>: <json-formatted link-name link-url pairs>
```
An example is below: