现在用 AI 工具生成 Mermaid，已经成了很多人的日常。
无论是 ChatGPT、Claude，还是各类 Copilot 或 Agent，只需一句话，就能生成流程图、时序图或系统架构图的 Mermaid 代码——效率极高。
但很快会遇到一个现实问题：
AI 把图“写”出来了，但你很难把它“好看地展示”出来。
问题不在生成，而在渲染
- Mermaid 默认的渲染效果较为朴素。
- 严重依赖浏览器或 Markdown 预览工具。
- 在终端、CLI 或 SSH 环境下几乎无法直接查看。
这在「AI + 自动化 + 终端工具」的工作流中尤为突出。
beautiful-mermaid：专门优化 Mermaid 渲染的工具
最近在 GitHub 上发现一个刚开源的项目 beautiful-mermaid，其定位非常明确：
不改变 Mermaid 的语法和能力，只专注于重做渲染这一步。
它主要解决两个核心问题：提升视觉效果，以及支持终端环境使用。
核心能力
- ✅ 渲染审美在线的 SVG 图表。
- ✅ 输出 终端友好的 ASCII 字符画。
- ✅ 纯 TypeScript 实现。
- 无 DOM 依赖。
- 无浏览器依赖。
- ✅ 原生支持 5 种常见图表类型：
- 流程图
- 状态图
- 时序图
- 类图
- ER 图
非常适合与 AI 生成 Mermaid 代码的场景搭配使用。
主题系统设计“工程师友好”
在样式方面，beautiful-mermaid 也做了精心设计：
- 内置 15 套主题。
- 可自定义强调色、边框色、连线等细节。
- 支持 直接使用 VS Code 主题配色。
- 所有颜色通过 CSS 变量 控制。
- 切换主题无需重新渲染。
- 修改变量即可实时生效。
这套系统对文档系统、终端工具和 IDE 插件都非常友好。
顺带一提：skills 封装版本
另外，还有一个名为 skills 的封装版本：
- 支持通过
npx skills一键安装。 - 基本包含了 beautiful-mermaid 的所有核心能力。
- 更侧重于“开箱即用”的 CLI 体验。
实际使用下来体验不错，尤其是在与 AI 生成 Mermaid 代码搭配时。
项目地址
- beautiful-mermaid
http://github.com/lukilabs/beautiful-mermaid - skills
https://github.com/imxv/Pretty-mermaid-skills
关注“鲸栖”小程序，掌握最新AI资讯
本文来自网络搜集，不代表鲸林向海立场，如有侵权，联系删除。转载请注明出处：https://www.itsolotime.com/archives/21164
