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

Jump to bottom

Add section on showing parallel blocks for sequence diagrams #1275

Merged
merged 3 commits into from
Feb 25, 2020
Merged

Add section on showing parallel blocks for sequence diagrams #1275

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54f55cc
#425: Add documentation on using `par` for sequence diagrams
ginomempin Feb 24, 2020
f8481f8
docs: Fix markdown lint MD012 and MD022
ginomempin Feb 24, 2020
b376e4d
docs: Fix typo "possiebl"
ginomempin Feb 24, 2020
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
56 changes: 47 additions & 9 deletions docs/sequenceDiagram.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ Type | Description
-x | Solid line with a cross at the end (async)
--x | Dotted line with a cross at the end (async)


## Activations

It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
Expand Down Expand Up @@ -127,7 +126,6 @@ sequenceDiagram
John-->>-Alice: I feel great!
```


## Notes

It is possible to add notes to a sequence diagram. This is done by the notation
Expand Down Expand Up @@ -159,7 +157,6 @@ sequenceDiagram
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 Down Expand Up @@ -187,7 +184,6 @@ sequenceDiagram
end
```


## Alt

It is possible to express alternative paths in a sequence diagram. This is done by the notation
Expand Down Expand Up @@ -235,7 +231,53 @@ 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

The colors are defined using rgb and rgba syntax.
Expand Down Expand Up @@ -284,7 +326,7 @@ sequenceDiagram

## sequenceNumbers

It is possiebl to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
```
<script>
mermaid.initialize({
Expand Down Expand Up @@ -340,10 +382,8 @@ loopLine | Defines styles for the lines in the loop box.
note | Styles for the note box.
noteText | Styles for the text on in the note boxes.


### Sample stylesheet


```css
body {
background: white;
Expand Down Expand Up @@ -426,7 +466,6 @@ text.actor {
}
```


## Configuration

Is it possible to adjust the margins for rendering the sequence diagram.
Expand All @@ -452,4 +491,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