From 54f55cc02143386920e49ba1f5166bd931cf5799 Mon Sep 17 00:00:00 2001 From: gino Date: Mon, 24 Feb 2020 13:41:47 +0900 Subject: [PATCH] #425: Add documentation on using `par` for sequence diagrams Support for `par` was already added here: https://github.com/mermaid-js/mermaid/issues/425 But is not in the docs: https://mermaid-js.github.io/mermaid/#/sequenceDiagram --- docs/sequenceDiagram.md | 47 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index bf95d078cc..3ea0b3db1d 100755 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -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 @@ -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 -