2

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!

N Strahl
  • 75
  • 8

2 Answers2

1

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

<img src='//C:/path/image.png'
N Strahl
  • 75
  • 8
0

It seems to me that mermaid tries to load images from some server. However since the images are stored locally, I am making use of python http server to create a server locally.

Just open command prompt or equivalent, move to the folder that contain your images and run the given command to create http server.

cd <folder location>
python -m http.server

Next using ip address and port number, create the required url. In my case, ip address was "127.0.0.1" and port number was "8000", so the required link is http://127.0.0.1:8000/

Finally you can embed code as,

A --> B[<img src='http://127.0.0.1:8000/<image-name>.png' width='100' height='100'/>]
Kuldeep Kumar
  • 1
  • 1