是否有办法在美人鱼流程图中使用本地图像文件

Question

我有兴趣知道如果它是理论上可能嵌入到美人鱼图表的本地图像。我正在尝试使用mermaid_cli，因为它安装在我的机器上，因此理论上应该更容易访问本地文件。

这是我一直在尝试的代码(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;

然后我调用

mmdc -i chart.mmd -o chart_cli.png

它将不渲染图像。但是，我已经将图像上传到我的GitHub存储库并提供了URL，然后它就可以工作了。我想知道我是否可以跳过上传图像的步骤，只使用文件路径。我也尝试了不同的"file://C:/…"但无济于事。提前感谢!

Answer 1

我明白了!在文件路径之前添加//为我工作。例如:

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

Answer 2

在我看来，美人鱼试图从一些服务器加载图像。然而，由于图像存储在本地，我使用python http server在本地创建服务器。

打开命令提示符或类似的命令，移动到包含图像的文件夹，并运行给定的命令来创建http服务器。

cd <folder location>
python -m http.server 

下一个使用ip地址和端口号，创建所需的url。在我的例子中，ip地址是"127.0.0.1"。端口号为"8000"，所以所需链接为http://127.0.0.1:8000/

最后你可以嵌入代码，

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