Question

我想，在下图中，

<link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.js"></script>
<div class="mermaid">
  graph TD; 
  A[hello] 
  B[an <b>important</b> link] 
  A-->B
</div>

在link下添加指向http://google.com的实际链接。

我尝试将相关节点修改为

B[an <b>important</b> <a href="http://google.com">link</a>]

但这会破坏（崩溃）图表。具体来说，我注意到不接受的是href元素。

是否可以在美人鱼节点描述中添加链接？

编辑：我在mermaid.js存储库中打开了bug report。截至2017年6月尚未确定。

Answer 1

我知道已经晚了，但是：我正在寻找类似的东西，并且找到了。您的问题是"定义中的href破坏了美人鱼的语法。

我可以通过使用来实现您想要的

B[an <b>important</b> <a href='http://google.com'>link</a>]

因此将"定义的双引号href替换为单引号'

请参见the example here。

Answer 2

当然，可以在Mermaid节点中添加链接，如下所示：

＆＃13;

mermaid.initialize({
  startOnLoad: true
});

＆＃13;

<script src="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js"></script>
<link href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.css" rel="stylesheet" />

<div class='mermaid'>
  graph TD; 
  A(Start)-->B(Do some stuff); 
  B(Take some rest)-->C(do more);
  click B "http://www.github.com" "This is a link"
  
</div>

＆＃13;

您也可以使用此脚本进行回调

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

然后将其插入HTML中的节点A - ＆gt; B中的HTML

click A callback "Hi I'm a callback, whats up"

如何在美人鱼节点描述中添加链接？

2 个答案: