如何使用 "mermaid.js" 在节点中嵌入图像

Question

有什么办法可以在流程图节点中嵌入mermaid.js的图片吗？我试过了：

<div class="mermaid">
  graph LR
  A(<img src="pic.svg"></img>) --> B
</div>

Answer 1

这是来自 this thread

的 API 示例

var mermaidAPI = mermaid.mermaidAPI;

mermaidAPI.initialize({
  startOnLoad:false
});

var element = document.getElementById("app");
var insertSvg = function(svgCode, bindFunctions) {
  element.innerHTML = svgCode;
};
var graphDefinition = `graph LR; Systemstart-->SomeIcon(<img src='https://iconscout.com/ms-icon-310x310.png' width='40' height='40' />)`;
var graph = mermaidAPI.render("mermaid", graphDefinition, insertSvg);

<script src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>

<div id="app"></div>

如何使用 "mermaid.js" 在节点中嵌入图像

How to embed an image in a node with "mermaid.js"

html

javascript

mermaid