← 返回产品图鉴适合谁 查看源码 ↗访问官网 ↗
开源项目
beautiful-mermaid
把 Mermaid 图渲成好看的 SVG 和终端字符画
详细介绍
Craft 团队为自家 AI 助手做的 Mermaid 渲染库，2026 年初开源，至今 ★11K+。它对着官方渲染器几个实在的别扭来：默认样式不够专业、改配色要跟 CSS 类搏斗、终端里出不来图、为几张简单图还得拖进一堆依赖。整库纯 TypeScript、零 DOM 依赖、同步出图，同一份文本既能出 SVG 给界面用，也能出字符画给终端用，覆盖流程图、状态图、时序图、类图、ER 图与 XY 图表六类。
值得关注的地方
- 两色即可成图：只给背景色和前景色，文字深浅、连线、节点描边全由 color-mix() 自动推导；内置 15 套主题，VS Code 的 Shiki 主题能直接喂进来，换主题走 CSS 变量、不必重渲染
- SVG 与字符画双输出：界面里放矢量图，CLI 和终端里放 ASCII / Unicode 框图，用的是同一份源文本
- 同步渲染、零 DOM 依赖：不用 await、不闪屏，React 里塞进 useMemo 就够；实测 100 张流程图耗时 113ms
- 实测两个坑：节点必须逐行写，README 里「graph LR; A --> B」这种单行分号写法会直接报错；字符画按码点算宽度，中文节点会把框线撑歪，纯英文正常
- 维护状态：npm 包停在 1.1.3（2026-02-26 发布），仓库最后一次提交是 2026-05-06——现有能力已经稳，但短期内别指望它补新图类型
要在自己产品、CLI 工具或 Agent 输出里嵌图，又嫌官方 Mermaid 渲染器难看、主题难调的开发者。