Mermaid: Insert Images in flowchart

[vikram-rawat]

How can I make a jpeg, png , gif as a NODE in flowchart.

Most of the time we need that for presentation purpose.

Can We do that please. Please let me know

If not can you add that Please.....

[Krockema]

Normaly,
graph TD; Dir((<img src='https://iconscout.com/ms-icon-310x310.png' width='40' />))

does the Trick. But somehow only in the Live editor not on local page, any hints ?

Edit1: Yes i did set htmlLabels: true
like http://knsv.github.io/mermaid/index.html#using-the-mermaidapi-initialize-mermaid-initialize-call

Edit: works if you use API instead

mermaidAPI.initialize({
        startOnLoad: false
    });
    $(function () {
        // Example of using the API
        var element = document.querySelector('.mermaid');
        var insertSvg = function (svgCode, bindFunctions) {
            element.innerHTML = svgCode;
        };
        var graphDefinition = "graph LR; Systemstart-->Icon(<img src='https://iconscout.com/ms-icon-310x310.png' width='40' height='40' />)";
        var graph = mermaidAPI.render('mermaid', graphDefinition, insertSvg);
    });

Bug?

[lukasz-capala]

To get it work without API you need to use html special characters instead of direct chars like single quote, apostrophe, equal, etc.
D-->X((<img src='/address/to/image.png' width='desired_width' />))

[JUSTINMKAUFMAN]

Would it be possible to include a complete example flowchart where multiple modes display images?

[lennynyktyk]

I am able to do this usemermaid-cli, but through a convoluted way.

1. Use a div/span with a class (" is necessary):

Phone(<span class=&quot;iphone-icon&quot;></span> My iPhone)-->(<span class=&quot;server-icon&quot;></span> My Server)

1. Then I created a CSS file with the class definitions:

.iphone-icon { width:64px; height:64px; background: url(https://example.com/iphone-icon.png) no-repeat center center; }
.server-icon { width:64px; height:64px; background: url(https://example.com/server-icon.png) no-repeat center center; }

1. Then specify the -C option followed by the filesystem path to the CSS file when creating a SVG.
2. Then put the contents of the CSS file at the end of the <style> tag inside the SVG.
3. Finally you can convert it to PNG, JPG in necessary.

NOTE: All CSS URLs should be absolute web URLs if you plan to share the SVG. Alternatively you could embed the icons in the CSS file using data-urls.

[trueskawka]

Building up on top of @lennynyktyk's answer, I added definitions for icons in CSS.

.icon {
    background-repeat: no-repeat;
    background-position: 50% 50%; /* centers the icon image in the span element background */
    background-size: auto 100%; /* makes the full icon appear in the background*/
    width: 50px;
    height: 50px;
    display: block; /* displays icon above text */
    margin: 0 auto; /* centers the icon horizontally */
}

/* the URL needs to be relative to Mermaid JS library file, which is inside of node_modules */
.example-image {
    background-image: url('../../images/example-image.png')
}

I'm able to use them:

Example(<span class='icon example-image'></span> Example Image)

With this approach, it's enough to define a general .icon class and add a class for every image with background-image property. I use it to generate PNGs, hence the relative URLs (don't need the URL to be working in the generated file).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.