beautiful-mermaid：Mermaid 流程图美颜渲染器

用 Mermaid 画过流程图的人都知道——官方默认渲染出来，总带着一股“工程师审美”。
方块是方的，线是直的，颜色是默认蓝。说不上丑，但放在 PPT、技术文档、博客里，就是差那么点意思。
最近几年更尴尬了。AI 写代码越来越普及，Claude、Cursor 一键生成 Mermaid 代码，结果——AI 自己画的图，普遍更丑。颜色撞色、字号不一致、节点变形……直接放文档里老板会皱眉。

最近在 GitHub 上看到一个叫 beautiful-mermaid 的开源渲染器，10.7k Star，366 Fork，MIT 协议。Craft 团队做的，专门解决“Mermaid 丑”这个老问题。

4 个数字够炸裂：

• • 6 种图表类型——流程图、状态图、序列图、类图、ER 图、XY 图表（柱状/折线/组合）全支持  

  

• • 15 个内置主题——GitHub 暗色、Tokyo Night、Catppuccin、Dracula、Nord 等常用配色全打包  

  

• • 同步渲染——不是 async，直接拿结果，React useMemo() 零 flash 集成  

• • 100+ 图 < 500ms——批量生成也不卡  

真正能打的差异化卖点是这两个。

第一，实时主题切换。 所有颜色都是 CSS 自定义属性（--bg / --fg / --accent），传 var(--background) 给它，整个图表自动跟着 app 主题走。不用重渲染。

这意味着什么？你 app 切换深色 / 浅色模式，Mermaid 图表 0 延迟跟着变。

第二，ASCII 输出。 终端、CLI 工具、聊天界面、Markdown 文档，直接输出 ASCII 字符就能看 Mermaid 流程图。
这在 AI 编程场景下特别有用——AI 在终端里给你画架构图，不用打开浏览器。

上手也简单，只需通过 npm 安装：

npm install beautiful-mermaid

一行代码渲染 SVG：

import { renderMermaidSVG } from 'beautiful-mermaid';

const svg = renderMermaidSVG(`graph TD; A[Start] --> B{Decision}`);

一行代码输出 ASCII：

const ascii = renderMermaidASCII(`graph LR; A --> B`);
// 输出：A ► B

Mono 模式更狠——只传背景色和前景色两个变量，自动用 color-mix() 派生整套配色。

要是你嫌 15 主题不够，还能直接用任何 VS Code 主题（Shiki 兼容）——fromShikiTheme() 把 VS Code 配色映射成 Mermaid 节点颜色。

Mermaid 流行的本质是“用文字画图”——不用拖拽，代码即图，写文档时顺手就能插。
但“丑”一直是硬伤。beautiful-mermaid 解的就是这个——让 Mermaid 图表配得上它该去的地方。

GitHub 项目地址：https://github.com/lukilabs/beautiful-mermaid

如果这份工具正好打中你的痛点，欢迎来 云栈社区 聊聊你的体验，说不定还能挖到更多宝藏项目。