如何在美人鱼节点描述中添加链接?
Posted
技术标签:
【中文标题】如何在美人鱼节点描述中添加链接?【英文标题】: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>
【讨论】:
以上是关于如何在美人鱼节点描述中添加链接?的主要内容,如果未能解决你的问题,请参考以下文章