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?

Frame

Answer 1

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.

Jardena

Answer 2

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

Wittgenstein

This is for flowchart not sequenceDiagram. Why was it accepted? 😕 – Compendious

Dunno, I guess it applies to both? – Wittgenstein

No, it only applies to flowchart. – Compendious

came here looking for something specific to sequence diagrams more like what should be the accepted answer by @Compendious with rect + note – Sulphanilamide

Answer 3

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

Frederickfredericka

Answer 4

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

Toxoid

Answer 5

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

Compendious