如何在Github文档中用Mermaid创建紧凑嵌套堆叠盒子图？

针对你需要在顶层盒子内嵌套紧凑小盒子的需求，这里有两种实用方案：

方案一：调整节点间距优化原有代码 #

在你的现有代码中添加node distance参数，直接缩小内部节点的垂直间距，配合隐形连接线维持垂直排列：

graph BT
    node distance 5px
    subgraph main[My Main Box]
        1[Foo]---2[Bar]
        2---3[Baz]
        linkStyle default fill-opacity:0,stroke-width:0px,stroke-opacity:0
    end

你可以根据需要调整node distance的数值，数值越小，内部盒子的间距越紧凑。

方案二：通过类样式压缩节点边距 #

定义自定义节点类来压缩内部盒子的上下边距，再用隐形连接线实现垂直排列：

flowchart TB
    subgraph main[My Main Box]
        foo[Foo] --> bar[Bar]
        bar --> baz[Baz]
    end
    class foo,bar,baz compactNode;
    classDef compactNode margin:2px;
    linkStyle default fill-opacity:0,stroke-width:0px,stroke-opacity:0;

这种方式可以更精细地控制单个节点的边距，适配不同的排版需求。

以上两种方案在GitHub的Mermaid渲染环境中都能正常生效，你可以根据实际效果调整参数。

内容的提问来源于stack exchange，提问作者Nicholas Clark