add boxes / containers in mermaid sequence diagram

Question

I'm making sequence diagrams with Mermaid, and I find the loop feature very cool, drawing a labeled rectangle around a loop with this code chunk:

sequenceDiagram
    loop Title
        Alice->>Bob: Hello John, how are you?
        Bob->>Alice: Answer
            loop Title
                Bob->>Bob: Thinks
            end
    end

Rendering like this:

My question is: Can I use this rectangle container element for something else than a loop, for just grouping things, and naming it whatever i want, other than "loop" (it doesn't work if I change the keyword loop). It seems that there are only 'loop', 'opt' and 'alt' authorized keywords?

score 4 · Answer 1 · answered Jan 10 '23 at 15:45

Hi maybe not exact the same you wish but you can try

sequenceDiagram
    participant Alice
    participant John
    
    rect rgb(191, 223, 255)
   
        Alice->>Bob: Hello John, how are you?
        Bob->>Alice: Answer
            rect rgb(200, 150, 255)
                Bob->>Bob: Thinks
            end
    end

this will create an rectangle

score 4 · Answer 2 · answered Mar 31 '23 at 16:33

I think rect would work for what you're doing: https://mermaid.js.org/syntax/sequenceDiagram.html#background-highlighting has a pretty good example with the following code:

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.

score 3 · Accepted Answer · answered Oct 07 '22 at 20:59

3

It looks like subgraph is what you want:

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

https://mermaid-js.github.io/mermaid/#/flowchart?id=subgraphs

answered Oct 07 '22 at 20:59

lmat - Reinstate Monica

7,289
6
48
62

2

This is for `flowchart` not `sequenceDiagram`. Why was it accepted? – Zubin Apr 26 '23 at 19:30
Dunno, I guess it applies to both? – lmat - Reinstate Monica Apr 27 '23 at 20:02
3

No, it only applies to flowchart. – Zubin May 05 '23 at 14:28
came here looking for something specific to `sequence diagrams` more like what [should be the accepted answer](https://stackoverflow.com/a/75900818/3015484) by @Zubin with `rect + note` – InkieBeard Jun 22 '23 at 04:01

score 2 · Answer 4 · answered Jul 26 '21 at 20:53

alt or opt can help you achieve this:

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

See documentation

score 2 · Answer 5 · answered Apr 26 '23 at 19:37

2

To label a section which isn't a loop, alt (alternative path), or opt (optional); use Critical Region:

answered Apr 26 '23 at 19:37

Zubin

9,422
7
48
52

score 1 · Answer 6 · answered Jul 17 '22 at 16:06

1

For now we cannot achieve this with current mermaid version. Hope they will update this in a newer version. See github issue.

answered Jul 17 '22 at 16:06

Gayal Kuruppu

1,261
1
17
29

add boxes / containers in mermaid sequence diagram

6 Answers6