如何在Mermaid图中绘制不连接节点的箭头?
当然有办法解决!你猜的没错,Mermaid的箭头确实要求两端都关联节点,但我们可以通过隐藏空白节点或者直接利用自环语法来实现你想要的效果,下面给你具体的解决方案:
1. 解决节点自环(A指向A)的问题
你之前的代码里A(Sample Text) -->A没生效,大概率是语法格式的小问题——Mermaid其实支持节点自环,只要节点已经被定义过,直接写A-->A就可以正常渲染。比如:
graph LR A(Sample Text) --> A; % 节点自环,正常生效 A --> B; B --> A;
只要保证代码结构清晰(比如用分号分隔语句),自环箭头就能正常显示。
2. 实现指向空白区域的箭头(B-->)
要模拟箭头指向“无节点”的效果,我们可以创建一个不可见的空白节点,让箭头指向它,再通过样式把节点隐藏起来。有两种常用写法:
写法一:用类定义统一设置隐藏样式
graph LR A(Sample Text) --> A; A --> B; B --> A; B --> empty; % 箭头指向空白节点 empty[ ]:::hidden; % 定义空内容的节点,并应用hidden类 classDef hidden fill:none, stroke:none; % 定义隐藏类:无填充、无边框
写法二:直接给节点设置样式
如果不想定义类,也可以直接给空白节点加样式:
graph LR A(Sample Text) --> A; A --> B; B --> A; B --> empty; empty[ ] style empty fill:none, stroke:none; % 直接隐藏节点
这两种写法最终效果都是:只显示B指向空白区域的箭头,看不到目标节点。
内容的提问来源于stack exchange,提问作者TiFr3D
相关产品推荐
相关产品推荐

