Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sequenceDiagram.md += previews under snippets #2878

Closed
wants to merge 1 commit into from
Closed

sequenceDiagram.md += previews under snippets #2878

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 181 additions & 0 deletions docs/sequenceDiagram.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ sequenceDiagram
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.

Expand All @@ -35,9 +42,18 @@ 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-example
sequenceDiagram
actor Alice
Expand All @@ -46,6 +62,14 @@ 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.
Expand All @@ -58,6 +82,14 @@ sequenceDiagram
J->>A: Great!
```

```mermaid
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
```

## Messages

Messages can be of two displayed either solid or with a dotted line.
Expand Down Expand Up @@ -91,6 +123,14 @@ sequenceDiagram
deactivate John
```

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```

There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:

```mermaid-example
Expand All @@ -99,6 +139,12 @@ sequenceDiagram
John-->>-Alice: Great!
```

```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```

Activations can be stacked for same actor:

```mermaid-example
Expand All @@ -109,6 +155,14 @@ sequenceDiagram
John-->>-Alice: I feel great!
```

```mermaid
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!
```

## Notes

It is possible to add notes to a sequence diagram. This is done by the notation
Expand All @@ -122,6 +176,12 @@ sequenceDiagram
Note right of John: Text in note
```

```mermaid
sequenceDiagram
participant John
Note right of John: Text in note
```

It is also possible to create notes spanning two participants:

```mermaid-example
Expand All @@ -130,6 +190,12 @@ sequenceDiagram
Note over Alice,John: A typical interaction
```

```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```

## Loops

It is possible to express loops in a sequence diagram. This is done by the notation
Expand All @@ -150,6 +216,14 @@ sequenceDiagram
end
```

```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```

## Alt

It is possible to express alternative paths in a sequence diagram. This is done by the notation
Expand Down Expand Up @@ -185,6 +259,19 @@ sequenceDiagram
end
```

```mermaid
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
```

## Parallel

It is possible to show actions that are happening in parallel.
Expand Down Expand Up @@ -214,6 +301,17 @@ sequenceDiagram
John-->>Alice: Hi Alice!
```

```mermaid
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!
```

It is also possible to nest parallel blocks.

```mermaid-example
Expand All @@ -230,6 +328,20 @@ sequenceDiagram
end
```

```mermaid
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
```

## Background Highlighting

It is possible to highlight flows by providing colored background rects. This is done by the notation
Expand Down Expand Up @@ -269,6 +381,25 @@ sequenceDiagram

```

```mermaid
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.

```

## Comments

Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
Expand All @@ -280,6 +411,13 @@ sequenceDiagram
John-->>Alice: Great!
```

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
```

## Entity codes to escape characters

It is possible to escape characters using the syntax exemplified here.
Expand All @@ -290,6 +428,12 @@ sequenceDiagram
B->>A: I #9829; you #infin; times more!
```

```mermaid
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
```

Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text.
Expand Down Expand Up @@ -319,6 +463,19 @@ sequenceDiagram
Bob-->>John: Jolly good!
```

```mermaid
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!
```

## Actor Menus

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.
Expand All @@ -340,6 +497,19 @@ sequenceDiagram
Alice-)John: See you later!
```

```mermaid
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```

#### Advanced Menu Syntax
There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well.

Expand All @@ -362,6 +532,17 @@ sequenceDiagram
Alice-)John: See you later!
```

```mermaid
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```

## Styling

Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
Expand Down