有没有一种方法可以在美人鱼流程图中使用本地图像文件

发布于 2025-02-06 09:34:35 字数 633 浏览 1 评论 0 原文

我有兴趣知道是否可以将本地图像嵌入到美人鱼图表上。我正在尝试使用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,然后它起作用。我想知道是否可以跳过上传图像并使用文件路径的步骤。我还尝试了“文件:// c:/...”的不同变体,但无济于事。提前致谢!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

盗心人 2025-02-13 09:34:36

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

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

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

<img src='//C:/path/image.png'
北风几吹夏 2025-02-13 09:34:36

在我看来,美人鱼试图从某些服务器加载图像。但是,由于图像是在本地存储的,因此我使用Python HTTP服务器在本地创建服务器。

只需打开命令提示符或同等标准,请移动到包含图像的文件夹,然后运行给定命令以创建HTTP服务器。

cd <folder location>
python -m http.server 

接下来使用 IP地址端口号,创建所需的URL。在我的情况下,IP地址为“ 127.0.0.1”,端口号为“ 8000”,因此所需的链接为

最后,您可以将代码嵌入为,

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

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'/>]
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文