Mermaid如何实现并排子节点并保留子图独立排列方向？

完全可以用Mermaid绘制出目标示意图，对应两个问题的解决方式如下：

包含两个并排相连子节点的复合节点实现 #

用subgraph包裹同属一个复合节点的两个子节点是正确思路，配合子图内direction LR设置即可定义内部水平排列逻辑。要避免布局被跨节点连线干扰，只需要给同组子节点添加隐形排列约束。

全局与子图独立排列方向失效的解决 #

Mermaid flowchart的布局逻辑中，跨子图的可见连线布局优先级默认高于子图内部的direction设置，会强制把子图节点拉去匹配全局方向。解决方法是给每个子图内的水平节点对添加无权重隐形连线~~~，这类连线不会渲染出可见线条，只会强制约束两个节点保持同层级水平排列，不会破坏全局TB（从上到下）的整体排布逻辑。

可直接运行的完整代码 #

flowchart TB
    %% 第一个复合节点
    subgraph node0 [ ]
        direction LR
        node00[data constructor]
        node01[pointer]
        node00 --adjacent--- node01
    end
    %% 隐形约束强制内部节点水平并排
    node00 ~~~ node01
    %% 隐藏子图默认外框，匹配参考图效果
    style node0 stroke-width:0px

    %% 第二个复合节点
    subgraph node1 [ ]
        direction LR
        node10[data]
        node11[pointer]
        node10 --adjacent--- node11
    end
    node10 ~~~ node11
    style node1 stroke-width:0px

    %% 跨复合节点的指向连线
    node01 --> node10

    %% 如需扩展更长的链式结构，按上述subgraph格式复制新增，再添加上一个节点的pointer到下一个节点data的连线即可

渲染后全局所有复合节点保持从上到下的垂直排列，每个复合节点内部的两个子节点保持水平并排相连，和参考图效果完全一致。

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