【当AI开始画图，程序员的工具箱里还缺什么】

有一个现象越来越明显：当你和AI结对编程时，最让人抓狂的时刻往往不是代码写不出来，而是脑子里那张数据流图、状态机、系统架构图，怎么也说不清楚。

文字是线性的，但系统是立体的。这中间的鸿沟，需要图来填。

Mermaid早就成了文本画图的事实标准，用几行代码就能生成专业图表，堪称神器。但用过的人都知道，它有几个老毛病：默认样式不够精致，想改个颜色得跟CSS搏斗半天，更别提在终端里输出了，压根不支持。

Craft团队最近开源了一个叫beautiful-mermaid的工具，专门解决这些痛点。

先说最惊艳的设计：双色哲学。

整套主题系统只需要两个颜色，背景色和前景色。就这两个参数，系统会自动推导出文字、边框、箭头、节点填充等所有元素的配色。这背后用的是CSS的color-mix函数，比如次要文字就是前景色混入60%的背景色，连接线是混入30%。

这个设计妙在哪里？它把“好看”这件玄学的事情，变成了可计算的事情。你不需要懂设计，只要选对两个颜色，出来的图就是协调的。

当然，如果你是配色高手，也可以单独指定某个元素的颜色，系统会优先使用你的设定。这叫“渐进增强”，入门简单，上限也高。

再说终端输出这个功能。

很多开发者的工作环境就是一个黑底白字的终端窗口，以前想看图只能切到浏览器。现在beautiful-mermaid可以直接渲染成ASCII字符画，用加号、减号、竖线拼出流程图。虽然粗糙，但在命令行工具里够用了。

这个ASCII渲染引擎有个有趣的来历。原作者Alexander Grooff用Go语言写了一版，Craft团队把它移植到TypeScript，又加上了时序图、类图、ER图的支持。开源社区的接力赛，就是这么跑的。

内置了15套主题，从Tokyo Night到Dracula，从Nord到Solarized，都是程序员圈子里的经典配色。更厉害的是，它能直接读取VS Code的主题文件，这意味着你在编辑器里用什么配色，图表就能自动跟上。

还有一个细节值得说：所有颜色都是CSS自定义属性，换主题不需要重新渲染，改几个变量值，图表瞬间变脸。这对做深色模式切换的产品来说，简直是福音。

支持五种图表类型：流程图、状态图、时序图、类图、ER图。基本覆盖了日常开发中最常用的场景。

性能方面，官方说100张图渲染不到500毫秒，而且零DOM依赖，纯TypeScript实现，浏览器、Node、Bun都能跑。

工具的价值，往往不在于它能做什么，而在于它能让你少想什么。当画图这件事变得足够简单，你才能把注意力放回真正重要的问题上。

github.com/lukilabs/beautiful-mermaid