Skip to content

Commit

Permalink
mermaid-js#425: Add documentation on using par for sequence diagrams
Browse files Browse the repository at this point in the history
Support for `par` was already added here:
mermaid-js#425

But is not in the docs:
https://mermaid-js.github.io/mermaid/#/sequenceDiagram
  • Loading branch information
ginomempin committed Feb 24, 2020
1 parent 1c07e55 commit 54f55cc
Showing 1 changed file with 46 additions and 1 deletion.
47 changes: 46 additions & 1 deletion docs/sequenceDiagram.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,52 @@ sequenceDiagram
end
```

## Parallel

It is possible to show actions that are happening in parallel.

This is done by the notation

```
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end
```

See the example below:

```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
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 @@ -452,4 +498,3 @@ Param | Description | Default value
--- | --- | ---
mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false
bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1

0 comments on commit 54f55cc

Please sign in to comment.