Mermaid.js流程图子图方向不生效及sg0包含节点A问题求助

问题1：子图横向排列而非纵向 #

原因：主流程图使用BT（从上到下）布局，但子图之间未设置垂直方向的连接关系，Mermaid布局引擎默认会将无关联的子图横向排列以利用水平空间。

解决方法：给子图之间添加垂直连接指令，明确它们的纵向排列顺序，比如sg0 --> sg1、sg1 --> sg2、sg2 --> sg3，引导布局引擎按纵向排列子图。

问题2：sg0“吞掉”节点A #

原因：Mermaid会将节点的首次出现位置作为其归属容器。你的代码中，节点A虽然在主图里写了A --> B，但sg0内部的C --> A是A被解析的更早位置（子图内的代码会优先触发节点归属判定），所以A被归入sg0子图中。

解决方法：在主图中先显式定义A节点（或确保A在子图连接之前被主图声明），比如在主图开头单独写A，或调整代码顺序让A --> B在所有子图代码之前被解析，确保A属于主图而非子图。

修改后的示例代码 #

flowchart BT
    %% 先显式声明A属于主图，避免被子图吞并
    A
    A --> B

    %% 子图间添加垂直连接，强制纵向排列
    sg0 --> sg1
    sg1 --> sg2
    sg2 --> sg3

    subgraph sg0
        direction TB
        C --> A
        D --> A
        E --> A
    end
    subgraph sg1
        direction TB
        F --> A
        G --> A
        H --> A
    end
    subgraph sg2
        direction TB
        I --> A
        J --> A
    end
    subgraph sg3
        direction TB
        K --> A
        L --> A
    end

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