做了一个 mermaid 演练场的网站

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这些天写博客，使用了一下 mermaid ，从此就爱上了它。简单的几个语句，就能绘制出来精美的图片。但是往一些平台上进行转发的时候，发现其编辑器不能原生支持 mermaid 表达式，于是将代码转到官方的演练场录入代码，并将其转成 png 图片。在这其中，我发现它还有保存功能，可以把代码保存起来，方便下次直接使用，但是我保存了三张，然后想保存第四张的时候，发现坏事了，得花钱！从来没有见过免费版如此抠搜的服务方，所以一怒之下，我决定自己做一个演练场的网站。经过近一个月的编码，当然我也借助了一下 AI 的力量。不敢独享，放出来给大家批评一下 https://mermaid-playground.pages.dev/ 。

mermaid

网站

11 条回复 • 2025-07-21 19:17:52 +08:00

DrakezZ

14 天前

额可以用用 Excalidraw ？

dcsuibian

14 天前

我一般用 Typora

TAsdd

14 天前

draw.io 试试？保存的 PNG 图片还是可以编辑的

yunnysunny

13 天前

@TAsdd 我之前已知用 draw.io 的，感觉什么都能画，就是费工夫，我需要一点点的调整、对其各个形状的大小和位置。我感觉常用的时序图、流程图、E-R 图之类的用 mermaid 就更方便，直接用几行代码就帮我搞定了，对于形状的大小、位置调整都省掉了。一些比较复杂的图，类似于服务器拓扑结构之类的还是 draw.io 更胜任，毕竟它内置了海量的 icon 图标供你选择。

yunnysunny

13 天前

@dcsuibian 我平常也用 obsidian ，可以直接渲染出来 mermaid 图，但是将其转载到某些网站，比如某乎上，就必须自己想办法转成图片了。

twig

13 天前

Notion 和 GitHub 都可以显示 Mermaid 。直接把 Mermaid 代码贴过去，就有图了，而且还能回头编辑。画规则的流程图逻辑图比 Excalidraw 方便一点。（灵魂画手的话自然是 Excalidraw 更好。）

yunnysunny

12 天前

@twig github 现在确实能解析 mermaid ，但是是以 svg 模式渲染的，没法直接下载 png 图。notion 中确实也天生支持 mermaid ，但是需要打开 notion 后，创建一个 page ，然后再创建一个 mermaid 代码块，输入代码后，在渲染区域上右键另存为图片，略显繁琐。Excalidraw 我刚才试了一下，确实可以导入 mermaid 代码，渲染的效果也很好，做临时代码解析确实是一个好的选择。我的演练场跟 Excalidraw 相比，唯一的优势也只是可以支持存储数据到 supabase 。

twig

12 天前 via iPhone

@yunnysunny 原来 Excalidraw 能导入 mermaid ，厉害了。

XuHuan1025

11 天前

https://www.mermaidchart.com/ 一直用的这个舒服

XuHuan1025

11 天前

喜欢这个风格

yunnysunny

11 天前

@XuHuan1025 我一开始说的官方网网站就是指它，它的样式确实经验。但无奈只能存三张图，所以我决定自己做一个网站。