作为开发者，在编写技术文档时，Mermaid 是一个常用工具，通过几行代码即可生成流程图，效率极高。
然而，Mermaid 生成的图表也存在一个明显的短板：其默认样式较为普通，视觉上缺乏吸引力。
当我们需要将图表粘贴到 PPT 中进行演示，或发布到博客时，其单调的线条和背景往往显得不够专业。
近日，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 等 AI 工具。
它提供了一键安装方式，在终端中执行以下命令即可：
bash
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid
配置好这套技能后，后续操作就变得非常简单。
当我们再请 AI 绘制“支付流程图”或“系统架构图”时，它输出的将不再是样式原始的默认代码。
AI 会直接调用 beautiful-mermaid 的样式，生成一段自带配色、圆角和布局优化的完整 Mermaid 代码。
这一组合方案带来了极其流畅的体验。
开发者无需了解 CSS，也无需记忆复杂的配置项，只需将逻辑描述清楚，AI 便能生成美观的图表。
目前，beautiful-mermaid 提供了开箱即用的 NPM 包，也支持在网页端直接引入。
而 Pretty-mermaid-skills 也已适配了各家主流大模型，集成门槛很低。
如果你也厌倦了手动调整图表样式的繁琐，这两个项目绝对值得尝试。
GitHub 项目地址：https://github.com/lukilabs/beautiful-mermaid
关注“鲸栖”小程序，掌握最新AI资讯
本文来自网络搜集，不代表鲸林向海立场，如有侵权，联系删除。转载请注明出处：https://www.itsolotime.com/archives/19329
