beautiful-mermaid

今天，我在 GitHub 上发现有个很火的开源项目，短短三天，就暴涨了 4700+ Star。

该项目就是 beautiful-mermaid，了解了下，正式解决了 Mermaid 生成的图表单调问题。

看这增长速度，显然是大家都被默认的 “理工直男风” 图表折磨许久了，说实话，我看到那些案例也确实挺好看的。

简单来说，它给 Mermaid 提供了一种换皮肤方法，将原本平平无奇的图表，一键变成类似 Linear、Vercel 等物种不同风格。

另外还提供了 15 种背景样式可自由选择，这种风格最大的好处就是百搭，不管是放在暗色模式的文档里，还是高大上的产品页，都毫无违和感。

除了生成常见的 SVG 矢量图，它还支持生成高精度的 ASCII 字符画。

哪怕是在纯文本的终端窗口或者代码注释里，我们也能看到带圆角、有设计的图表，这点非常极客。

官网给出的示例里，连最基础的方框和箭头，经过它渲染后，质感都提升了好几个档次。

而且它内置了一套很聪明的配色逻辑。

我们只需要定好背景和前景两个主色，剩下的线条、填充、高亮颜色，它都能自动算出来，怎么搭都不会丑。

不过话说回来，样式库虽然有了，但要让我们每次写文档都去手动配参数，还是不够省事。

既然现在写代码都靠 AI 了，那能不能让 AI 把“美化”这一步也顺带做了？

顺着这个需求，我又发现了另一个配合使用的开源项目：Pretty-mermaid-skills。

GitHub：https://github.com/imxv/Pretty-mermaid-skills

这个项目的思路特别讨巧，它把 beautiful-mermaid 的美化能力，打包成了一套给 AI 用的 Skill。

开发者提供了一套调试好的 Prompt 和配置，专门用来喂给 Claude、ChatGPT 或者 Cursor。

提供了一键安装方式，在终端里执行如下命令即可：

npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

如果配置好这套技能，剩下的事就简单了。

当我们再让 AI 帮忙画个“支付流程图”或者“架构图”时，它吐出来的就不再是裸奔的默认代码。

它会直接调用 beautiful-mermaid 的样式，生成一段自带配色、圆角和布局优化的完整代码。

这一套组合拳下来，体验真的非常丝滑。

我们不需要懂 CSS，也不用去记那些复杂的配置项，只管把脑子里的逻辑告诉 AI 就行。

目前 beautiful-mermaid 提供了开箱即用的 NPM 包，也能直接在网页端引入。

而 Pretty-mermaid-skills 也适配了各家主流大模型，集成起来没什么门槛。

如果大家平时也受够了手动调样式的苦，这两个项目绝对值得一试。

GitHub 项目地址：https://github.com/lukilabs/beautiful-mermaid