How to add grouping or outline box in mermaid flowchart

Question

In mermaid I have a flow diagram and i want to somehow group a series of steps and outline them as a group within a box with a label/title and the the rest of the steps on a separate grouped box. Something like in this example here. How can this be done? I cant find an outline box option.

Answer 1

Ok this is a bit of a work around but it is ok it shows what I want. Mermaid ha a component for flowcharts called subgraphs. This seems to be exactly what I wanted but there is a rendering issue where the title of the subgraph is in the middle and I dont see a way to move to the side(there is an open ticket in their github page, but not done yet). So the arrow goes over the text. To work around that, after searching for a prettier solution I found that you can jut add a few spaces before and after to make the text and the box size like you want so this is the final mermaid code:

flowchart TD

    subgraph service1["default service&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;"];
  A["User places order"].-> |event.order.created| B["Check if order status succeeded"];
  B .-> |event.order.succeeded| C["Check if confirmation received"];
  end
  subgraph service2["&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;secondary service&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;"]; 
  C .-> |event.confirmation.received| D["Create order summary"];
  end