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

Question

Is there any way to embed a picture with mermaid.js in a flow diagram graph node? I tried:

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

Here is an example: https://github.com/mermaid-js/mermaid/issues/1133#issuecomment-564036333 — Motin, Jan 14 '22 at 17:54

score 10 · Accepted Answer · answered Jul 28 '18 at 14:51

10

Here is the API example from this thread

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>

answered Jul 28 '18 at 14:51

rpggio

2,447
1
19
13

1

Hello , Can we add this image icon on the link ? rather than text? – Kalashir Jul 15 '21 at 09:05
but what I Have the image locally a can't upload it? It have to be shipped with .md file. – Kazz Aug 19 '22 at 03:31

score 8 · Answer 2 · answered Aug 01 '22 at 09:01

8

Example without 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]

answered Aug 01 '22 at 09:01

Stav Alfi

13,139
23
99
171

2

However, this is working only in the mermaid live editor. Any ideas on how can we use this approach in VS Code editor, Github readme, quarto, etc? – atsyplenkov Aug 11 '22 at 08:27
vscode - extention: `bierner.markdown-mermaid` – Stav Alfi Aug 12 '22 at 13:18
This isn't working – Alex Ramalho Apr 25 '23 at 07:09

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

2 Answers2