如何使用 Mermaid FlowChart 使节点走到底部

发布于 2025-01-14 17:19:39 字数 739 浏览 5 评论 0原文

我正在用 Mermaid 绘制流程图，但它没有按我想要的方式工作。

这是我的代码：

flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2-->|NO|ed

这是结果：

我想让返回结果节点转到底部。

原文

I'm drawing a flowchart with Mermaid but it isn't working the way I want.

Here is my code:

flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2-->|NO|ed

and this is result:

I want to make the return result node go to the bottom.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

∞琼窗梦回ˉ 2025-01-21 17:19:39

您可以告诉 Mermaid 特定链接应该具有特定的最小长度：

流程图中的每个节点最终都会根据其链接到的节点分配给渲染图中的一个等级，即垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的排名，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接更长。

在这里，我在从 a2 到 ed 的链接中添加了四个额外的 -，因此 ed 节点是与 a7 节点对齐。如果您希望它更低，只需添加另一个 - 即可。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2------>|NO|ed
    %%                    ^^^^^^
</div>

You can tell Mermaid that a particular link should have a certain minimum length:

Each node in the flowchart is ultimately assigned to a rank in the rendered graph, i.e. to a vertical or horizontal level (depending on the flowchart orientation), based on the nodes to which it is linked. By default, links can span any number of ranks, but you can ask for any link to be longer than the others by adding extra dashes in the link definition.

Here, I've added four extra -s in the link from a2 to ed so the ed node is aligned with the a7 node. If you want it to be even lower, just add another -.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    a0[["xml_parsing"]]
    a1{{"result = []"}}
    a2{"any elements in  collection?"}
    a3{{"container = next element"}}
    a4{{"name = text of SHORT-NAME tag of container"}}
    a5{"is name end with '_PIM'?"}
    a6{{"size = text of NvMNvBlockLength tag of container"}}
    a7{{"append [container, name, size] to result"}}
    ed([return result])

    a0-->a1-->a2-->|YES|a3-->a4-->a5-->|NO|a2
    a5-->|YES|a6-->a7-->a2------>|NO|ed
    %%                    ^^^^^^
</div>

回复收藏 0 原文

~没有更多了~