Search code examples
mermaid

Is there a way to use a local image file in a mermaid flowchart

I am interested in knowing if it is theoretically possible to embed a local image onto a mermaid chart. I am trying to do this with mermaid_cli since it is installed locally on my machine and it should therefore in theory be easier to access local files.

This is the code I have been trying (chart.mmd):

%%{init: { "securityLevel": "loose", "flowchart": { "htmlLabels": true } } }%%
flowchart LR;
    A( <img src='C:/path/image.png' height='200px' width='200px'/> )--> B & C & D;
    B--> A & E;
    C--> A & E;
    D--> A & E;
    E--> B & C & D;

and then I'm calling

mmdc -i chart.mmd -o chart_cli.png

It will not render the image. However, I have uploaded the image onto my GitHub repository and provided the URL then it works. I was wondering if I could skip the step of uploading an image and just use the file path. I have also tried different variations of 'file://C:/...' but to no avail. Thanks in advance!

Solution

  • I figured it out! Adding // before the file path worked for me. For example:

    <img src='//C:/path/image.png'