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

Question

有没有办法在流程图节点中使用mermaid.js嵌入图片？我尝试过：

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

- codie

---

这是一个例子：https://github.com/mermaid-js/mermaid/issues/1133#issuecomment-564036333 - Motin

Answer 1

以下是本主题中的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>

- rpggio

---

你好，我们能否在链接上添加这个图标，而不是文本？ - Kalashir

但是，如果我本地有图像，无法上传它？它必须与 .md 文件一起发送。 - Kazz

Answer 2

没有JavaScript的示例：

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[<img src='https://iconscout.com/ms-icon-310x310.png' width='40' height='40' />]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

- Stav Alfi

---

然而，这仅在mermaid实时编辑器中有效。有什么想法可以在VS Code编辑器、Github readme、quarto等中使用这种方法吗？ - atsyplenkov

VSCode - 扩展：bierner.markdown-mermaid - Stav Alfi

GitHub 不支持 Mermaid。我不知道 Quarto。 - Stav Alfi

这个不起作用。 - Alex Ramalho