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?

[innonagle]

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)

2. 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; }

3. Then specify the -C option followed by the filesystem path to the CSS file when creating a SVG.
4. Then put the contents of the CSS file at the end of the <style> tag inside the SVG.
5. 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]

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.

[Polirecyliente]

Can this issue be reopened? It would be useful to insert my custom SVG files as custom shapes in a flowchart.

I tried doing graph TD; Dir((<img src='https://iconscout.com/ms-icon-310x310.png' width='40' />)) but it does not work for me, also D-->X((<img src='/address/to/image.png' width='desired_width' />)) does not work for me. Also doing Example(<span class='icon example-image'></span> Example Image) didn't work for me, but probably I'm doing some step wrong.

[jkamenik]

I figure out that I could get this to work locally by adjusting the config to ensure htmlLabels is true and securityLevel is "loose". Both are needed to allow HTML elements to be rendered.

The graph:

graph LR
%% Directive to load the special config
%% @config{./config.json} %%

%% Don't escape the <>, but need to use ' instead of "
x((<img width='50px' height='50px' src='https://iconscout.com/ms-icon-310x310.png' />))

Loading

The config:

{
    "securityLevel": "loose",

    "flowchart": {
        "htmlLabels": true
    }
}

[sjackson0109]

is it possible to apply images cleanly with mermaid styles?

Mine renders, but i cannot position the icon outside the mermaid shape-dimentions. Certainly cannot change the placement, alignment or positioning using CSS attributes in the classDef.

This is about the best I can do with an hour or messing with CSS:

flowchart LR
    subgraph Border
        subgraph vNet[HUB]
            direction TB
            Subnet("Subnet <br /> 10.1.1.0/24")
            Subnet("Subnet <br /> 10.1.1.0/24")
            vNetIcon["<br /><img class='Icon' src='../images/networking/vnet.svg' />..."]
        end
        
    end
%% Defining Class Styles
classDef Border fill:#fff,stroke:#fff,stroke-width:4px,color:#fff,stroke-dasharray: 5 5;
classDef vNet fill:#dfe5f3,height:120px,stroke:#4698eb,stroke-width:2px,color:#000,stroke-dasharray: 8 4,width:214px;
classDef Subnet fill:#fff,stroke:#4698eb,stroke-width:1px,color:#000,stroke-dasharray: 4 8;
classDef Icon margin:0px, stroke-width:0px, padding:0px, fill:#000, position:absolute, bottom:0px, right:0px;

%% Custom Styles

%% Assigning Nodes to Classes
class Border Border;
class vNet vNet;
class Subnet Subnet;
class vNetIcon Icon;

of course i can replace the fill:#000 with fill:transparent in the classDef Icon line.

[SomwareHR]

Maybe this helps someone.
Github does not render it well, but it works fine in Obsidian.

%%{init:{"theme":"dark","flowchart":{"curve":"linear"}}}%% 

flowchart BT
    Jedan[Jedan\nChristmas] -->|KomentarA| Dva[Neštonešto]
    Dva --> Tri{Let me think}
    Tri -->|Broj4| Četiri[LeKomentar]
    Tri -->|PremaDva| Pet[Tekst5]
    Tri -->|Tri| Šest[fa:fa-car Car]

Pet[<img src='https://iconscout.com/ms-icon-310x310.png' width='40' /> \nasd]

Šest([<img src='https://icon-library.com/images/small-icon-png/small-icon-png-6.jpg' width='40' /> QWE]) 

Tri[(<img src='https://icon-library.com/images/small-icon-png/small-icon-png-6.jpg' width='40',height='40' />)]

Loading

[patricorgi]

Can you do the same thing in gitGraph?

[AhmedThahir]

Hi there,
Is there a way to relative file path to work?

(I'm using Typora)

✅ Absolute File Path Works

flowchart LR
i("
<img src='my_full_path_from_macos/image.png' style='max-width:1000px;min-height:0'/>
") -..-> Minimize

classDef image fill:none,stroke:none
class i image

❌ Relative File Path does not work

flowchart LR
i("
<img src='./image.png' style='max-width:1000px;min-height:0'/>
") -..-> Minimize

classDef image fill:none,stroke:none
class i image

[sjackson0109]

Sorry BOTH examples you gave are relative file-paths. IE relative to the location of the MD file.

an absolute file path would be something like this:

flowchart LR
i("
<img src='C:\Testing\image.png' style='max-width:1000px;min-height:0'/>
") -..-> Minimize

classDef image fill:none,stroke:none
class i image

or

flowchart LR
i("
<img src='https://mywebsite.net/images/image.png' style='max-width:1000px;min-height:0'/>
") -..-> Minimize

classDef image fill:none,stroke:none
class i image

or even

flowchart LR
i("
<img src='/image.png' style='max-width:1000px;min-height:0'/>
") -..-> Minimize

classDef image fill:none,stroke:none
class i image

Note the last one is the root-directory of the web-site instance.

[AhmedThahir]

Sorry, but in macos there is no C:// ... It's directly with /Users/...

[sjackson0109]

Yeah but your ‘absolute’ example had a full-stop preceding the first slash ‘/‘. Making it relative to the current working directory.Linux/mac/windows.. it’s all the same.On 7 Jan 2024, at 08:21, Ahmed Thahir ***@***.***> wrote: Sorry, but in macos there is no C:// ... It's directly with /Users/... —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[AhmedThahir]

Alright!

Could you help me with getting images to work with relative links?

[sjackson0109]

Just to be absolutely clear.. mermaid has nothing to do with loading files. That’s all native html.If your web service (say Nginx/httpd) is bound to /mnt/www upon startup. Then all paths that are relative from that directory, should work.Eg:File-system:Logo.md- /images- /images/logo.pngIf your markdown file includes a mermaid area, and as you said, you added in a html IMG tag, referencing the sub/directory.First prove you can reach the file: by going to http://websiteFQDN/images/logo.png - does the file show?If it does, you can set the paths as:- Absolute = ‘ http://websiteFQDN/images/logo.png‘ or  ‘/images/logo.png’ for short (much better practice NOT to hard code the fqdn inside the html files, makes your webpages portable).- Relative = ‘./images/logo.png’If your md file is in a different folder, eg:Index.HTML- /images- /images/logo.png- /diagrams- /diagrams/logo.mdThen the ‘relative’ location needs to be one folder higher from logo.md- Relative = ‘../images/logo.png’(Notice the doubt dot refers to parent directory)Hope it helps.On 7 Jan 2024, at 12:28, Ahmed Thahir ***@***.***> wrote: Alright! Could you help me with getting images to work with relative links? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>