marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 01:39:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Box support in Sequence Diagrams

Browse Source
This commit is contained in:
Olivier Leveau
2023-01-05 15:40:40 +01:00
parent 967d3bbb60
commit e659601e03
8 changed files with 393 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -58,6 +58,38 @@ sequenceDiagram
J->>A: Great!
```
### Grouping / Box
The actor(s) can be grouped in vertical boxes. You can define a color (if not it will be transparent) and/or a descriptive label using the following notation:
```
box lightgreen Group Number 1
... actors ...
end
box Another Group
... actors ...
end
box rgb(33,66,99)
... actors ...
end
```
```mermaid-example
sequenceDiagram
box lightgreen Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charly ?
B->>C: Hello Charly, how are you?
```
## Messages
Messages can be of two displayed either solid or with a dotted line.