今天，我在 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
评论 (0)