Mermaid对齐子图

编程语言 2026-07-10

我有一个类,用来测试因竞态条件导致的双插入操作。这确实需要一个好的解释,所以我转向了Mermaid:

flowchart TD
    A(Process start) --> B(Acquire target lock)
    B --> C{Create race condition}

    subgraph Left[Parent]
        D(Wait)
        E(SELECT)
        F(FALSE)
        G(INSERT)
        D --> E --> |delay| F --> G
    end

    subgraph Right[Child]
        M(Run to acquire target lock)
        N(SELECT)
        O(FALSE)
        P(INSERT)
        M --> N --> |delay| O --> P
    end

    C --> D
    C --> M

    M -->|signal ready| D

这不错,但还不够理想。我希望C-->D和 C-->M的箭头是水平的,并且从 C 的顶点出发,而不是从边的端点,然后向下转成90度的转弯,接着父节点和子节点的块应该对齐。

解决方案

在此处输入图片描述

我设法添加了一个节点,使父节点和子节点块对齐,同时还添加了一对没有具体形状的节点,允许从C 的顶点出发的90度转弯。不过在编辑器中开启自动布局会改变图形。希望这对你有帮助:

---
config:
  layout: fixed
---
flowchart TB
 subgraph Left["Parent"]
        D("Wait")
        E("SELECT")
        F("FALSE")
        G("INSERT")
  end
 subgraph Right["Child"]
        M("Run to acquire target lock")
        N("SELECT")
        O("FALSE")
        P("INSERT")
  end
    A("Process start") --> B("Acquire target lock")
    B --> C{"Create race condition"}
    D --> E
    E -- delay --> F
    F --> G
    M --> N
    M --- n1["signal ready"]
    N -- delay --> O
    O --> P
    C --- n2["Null"] & n3["Null"]
    n1 --> D
    n2 --> Right
    n3 --> Left

    n2@{ shape: anchor}
    n3@{ shape: anchor}
    style n1 stroke-width:0px,stroke-dasharray:0,fill:#CCCCCC
    style n3 fill:#000000
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章