今天,我在 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)