如何在Mermaid中实现径向布局以构建Turtle图？

我太懂你这种“就差最后一步布局”的纠结了——想用Mermaid快速出图，又不想因为个径向布局就切换到D3折腾。其实不用急着换工具，Mermaid虽然没有原生的径向布局和绝对定位功能，但我们可以用一些小技巧模拟出近似的圆形环绕效果，下面给你几个实用的方案：

方案1：用子图分组拉开节点位置 #

把每个环绕节点放进独立的子图里，让Mermaid自动把子图分布在中心Process的周围，这种方式最省心，效果也最接近预期。

flowchart LR
    subgraph 左上区域
        What([<b>WHAT:</b>])
    end
    subgraph 右上区域
        Who([<b>WHO:</b>])
    end
    subgraph 左下区域
        How([<b>HOW:</b>])
    end
    subgraph 右下区域
        Criteria([<b>CRITERIA:</b>])
    end
    subgraph 左侧中间
        Inputs@{shape: lean-r, label: <b>INPUTS</b>}
    end
    subgraph 右侧中间
        Outputs@{shape: lean-r, label: <b>OUTPUTS</b>}
    end

    # 中心节点
    Process@{shape: hex, label: <b>Process X:</b>}

    # 建立连接
    What --> Process
    Who --> Process
    How --> Process
    Criteria --> Process
    Inputs --> Process
    Process --> Outputs

    # 样式还原你的初始设置
    style Process fill:#2f7e3e,stroke:#333,stroke-width:2,color:#fff
    style What fill:#ffff88,stroke:#333
    style Who fill:#ffff88,stroke:#333
    style How fill:#ffff88,stroke:#333
    style Criteria fill:#ffff88,stroke:#333
    style Inputs fill:#ffffff,stroke:#333
    style Outputs fill:#ffffff,stroke:#333

子图会自动占据不同的空间，让周围节点自然环绕在Process周围，虽然不是严格的正圆形，但完全能满足Turtle图的可视化需求。

方案2：用长连接+隐形节点微调位置 #

如果觉得子图的布局不够灵活，可以用多横线的长连接（---->代替-->）拉开节点与中心的距离，再配合隐形节点（设置为不可见）来引导节点的分布方向，模拟圆形弧度。

flowchart LR
    # 中心节点
    Process@{shape: hex, label: <b>Process X:</b>}:::process

    # 环绕节点 + 隐形节点引导位置
    What([<b>WHAT:</b>]):::turtleBox ---- hidden1:::hidden ----> Process
    Who([<b>WHO:</b>]):::turtleBox ---- hidden2:::hidden ----> Process
    How([<b>HOW:</b>]):::turtleBox ---- hidden3:::hidden ----> Process
    Criteria([<b>CRITERIA:</b>]):::turtleBox ---- hidden4:::hidden ----> Process
    Inputs@{shape: lean-r, label: <b>INPUTS</b>}:::leanR ---- hidden5:::hidden ----> Process
    Process ---- hidden6:::hidden ----> Outputs@{shape: lean-r, label: <b>OUTPUTS</b>}:::leanR

    # 样式定义
    classDef process fill:#2f7e3e,stroke:#333,stroke-width:2,color:#fff
    classDef turtleBox fill:#ffff88,stroke:#333
    classDef leanR fill:#ffffff,stroke:#333
    classDef hidden display:none

隐形节点不会显示在图中，但能让Mermaid调整对应节点的初始位置，配合长连接就能让节点更均匀地环绕中心。

方案3：用多方向流程图手动分配位置 #

切换到graph TD（上下方向），把中心Process放在中间行，然后把环绕节点分别分配到上两行、下两行、左中、右中位置，用长连接拉开间距，模拟圆形：

graph TD
    # 上侧两个节点
    What([<b>WHAT:</b>]):::turtleBox ----> Process
    Who([<b>WHO:</b>]):::turtleBox ----> Process
    # 左侧中间节点
    Inputs@{shape: lean-r, label: <b>INPUTS</b>}:::leanR ----> Process
    # 中心节点
    Process@{shape: hex, label: <b>Process X:</b>}:::process
    # 右侧中间节点
    Process ----> Outputs@{shape: lean-r, label: <b>OUTPUTS</b>}:::leanR
    # 下侧两个节点
    How([<b>HOW:</b>]):::turtleBox ----> Process
    Criteria([<b>CRITERIA:</b>]):::turtleBox ----> Process

    # 样式还原
    classDef process fill:#2f7e3e,stroke:#333,stroke-width:2,color:#fff
    classDef turtleBox fill:#ffff88,stroke:#333
    classDef leanR fill:#ffffff,stroke:#333

这种方式的节点分布逻辑更直观，你可以通过调整连接的横线数量（比如---->是4个横杠，------>是6个）来微调每个节点与中心的距离，让布局更接近圆形。

最后说句实在的 #

如果你的需求是数学级完美的正圆形径向布局，那D3确实是更专业的选择；但如果只是要满足Turtle图的可视化需求，上面的Mermaid模拟方案完全够用，不用额外引入新工具。我自己做流程可视化的时候，经常用这些技巧绕开Mermaid的布局限制，效果都还不错~

内容来源于stack exchange