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

Posted 2023-03-25

【中文标题】如何在美人鱼节点描述中添加链接？

【英文标题】：How to add a link in a mermaid node description?

【发布时间】：2017-06-17 01:31:46

【问题描述】：

我想看下图，

<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 月尚未修复。

【参考方案1】：

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

我可以通过使用实现你想要做的事情

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

所以用单引号 ' 替换 href 定义的双引号 "

见the example here。

---

一年后更新

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

在Special note regarding version 8.2了解更多信息

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

mermaidAPI.initialize(
    securityLevel: 'loose'
);

【参考方案2】：

可以，可以在美人鱼节点中添加链接，如下图：

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"

【讨论】：

谢谢，但我想要实现的是在节点描述内有一个链接（根据我的问题中的示例）

@WoJ - 为什么有必要。将节点设置为看起来像一个链接，绑定点击事件并继续。

我收到Error: "message": "InvalidAccessError: A parameter or an operation is not supported by the underlying object", "filename": "https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js", "lineno": 24, "colno": 0

@EddieRowe 它绝对应该以某种方式对用户可见，点击一个节点会有一些行为

【参考方案3】：

一些图表具有交互支持：

flowchart flowDB.js other usage classDiagram classDB.js gantt ganttDB.js

此功能在使用securityLevel='strict'时禁用

并且在使用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 --> *** -- msg --> myLabel2
  click *** "https://***.com/" "some desc when mouse hover" _blank
  click myLabel2 "https://***.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://***.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>