如何在美人鱼流程图中添加分组或大纲框

好的，这是一个解决方法，但没关系，它显示了我想要的东西。Mermaid 有一个称为子图的流程图组件。这似乎正是我想要的，但是存在一个渲染问题，其中子图的标题在中间，我看不到移动到一边的方法（他们的 github 页面中有一张打开的票证，但尚未完成）。所以箭头在文本上。为了解决这个问题，在搜索了一个更漂亮的解决方案之后，我发现您可以在前后添加一些空格，以使文本和框大小符合您的要求，因此这是最终的美人鱼代码：

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