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

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元素。

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

编辑:我在https://github.com/knsv/mermaid/issues/467存储库上打开了一个mermaid.js。截至2017年6月尚未确定。

Answer 1

当然，可以在“美人鱼”节点中添加链接，如下所示：

​

mermaid.initialize({
  startOnLoad: true
});

<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>

​

还可以使用此脚本进行回调。

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

然后将它插入到HTML中的节点A->B下面的HTML中。

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

Answer 2

我知道已经很晚了，但是:我在寻找类似的东西，发现了这个。您的问题是"的href定义破坏了美人鱼语法。

我能实现你想做的事

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

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

见这里的例子。

更新一年后

在较新版本的美人鱼中，不再直接支持(ಠ_ಠ)

在关于8.2版的特别说明下更多关于它的信息

现在您还需要允许不安全的内容通过

mermaidAPI.initialize({
    securityLevel: 'loose'
});

Answer 3

有几个图表具有交互支持：

• 流程图
  • flowDB.js
  • 其他用途

• classDiagram
  • classDB.js

• 甘特
  • ganttDB.js

此功能在使用时禁用。 在使用securityLevel='loose'时启用了。

示例

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>
<h2>FlowChart</h2>
<div class="mermaid">
  graph LR
  A -- text --> B --> Stackoverflow -- msg --> myLabel2
  click Stackoverflow "https://stackoverflow.com/" "some desc when mouse hover" _blank
  click myLabel2 "https://stackoverflow.com/" "some desc when mouse hover"
</div>

<h2>classDiagram</h2>
<div class="mermaid">
  %% https://github.com/mermaid-js/mermaid/blob/cbe3a9159db4d5e67d270fe701cd63de1510f6ee/docs/directives.md?plain=1#L10-L48
  %%{init: {'theme': 'forest'}}%%
  classDiagram
    class myCls {
      attr type
      method()
    }
    %% ↓ must set: securityLevel=loose %% default para: clsID
    click myCls call myFunc() "desc."

    class myCls2
    click myCls2 call myFunc('hello world') "desc."

    class myClsUseLink {
      +field1
    }

    link myClsUseLink "https://www.github.com" "This is a link"
</div>

<h2>Gantt</h2>
<div class="mermaid">
  gantt
  dateFormat HH:mm
  axisFormat %H:%M
  try to click me : gotoSO, 19:00, 5min
  %% click : debug, after gotoSO,  5min  --> error, click is "keyword"
  clickMe : debug, after gotoSO,  5min
  endNode : milestone, m, 20:00, 0min
  click gotoSO href "https://stackoverflow.com/"
  click debug call myFunc()
  %% NOTE: not working on github
</div>

<script>
  mermaid.initialize({
    securityLevel: 'loose', // strict, loose, antiscript, sandbox // // https://github.com/mermaid-js/mermaid/blob/b141f24068e9c5f6979706383a29db6380ffdf31/docs/usage.md?plain=1#L114-L117
  });

  function myFunc(arg) {
    console.log(arg)
  }
</script>

​