纯 TypeScript 零依赖，同时输出 SVG 与 ASCII：beautiful-mermaid 让 Mermaid 图表更美更快

做开发的朋友一定用过 Mermaid。
用文字写流程图、状态机、时序图，又快又方便，简直是文档神器。但用久了，你可能会发现一个问题——默认渲染出来的图表，说实话，有点“素”。颜色单一，主题调整起来要跟 CSS 类名死磕，想在终端里输出？不好意思，不支持。依赖还一堆，项目轻量化？很难。

最近在 GitHub 上刷到一个非常火的项目——beautiful-mermaid，很好地解决了这些问题。

项目简介

beautiful-mermaid 是一个用纯 TypeScript 写的 Mermaid 图表渲染库，能把 Mermaid 语法渲染成漂亮的 SVG，或者终端里也能看的 ASCII 艺术。

核心优势可以总结为三个字：快、美、零依赖。不依赖 DOM，所以在 Node.js、Edge Runtime、浏览器都能跑。渲染是同步的，100 张图表 500ms 以内搞定。目前在 GitHub 上已收获 9.5k Star ，229 个 Fork，上线不久就引发广泛关注。

功能特性

01 支持五种图表类型

beautiful-mermaid 覆盖了开发场景里最常用的几种：流程图、状态图、时序图、类图和 ER 图。写 API 文档、系统架构、数据库结构，基本都能搞定，不需要换别的工具。

02 SVG 和 ASCII，两种输出模式

这个挺有意思的。渲染 SVG 是标配，但它还支持输出 ASCII/Unicode 字符画。也就是说，在终端、CLI 工具，甚至 AI 对话框里，都能直接显示图表。一套代码，富界面和纯文本环境全覆盖。

03 同步渲染，零闪烁

很多图表库渲染是异步的，放到页面上会有一个“先空白后出现”的闪烁感。beautiful-mermaid 的渲染是完全同步的，不需要 await，不需要 Promise。在 React 里直接塞进 useMemo()，图表跟着内容一起出来，干净利落。

04 15 套内置主题，开箱即美

Tokyo Night、Dracula、Catppuccin、Nord、GitHub……这些名字对开发者来说应该都很熟悉。15 套精心调校的主题直接内置，一行代码切换，不用自己调颜色。

05 极简双色模式，两个参数搞定配色

这是个很妙的设计。只需要传入背景色和前景色两个参数，系统会自动用 color-mix() 推导出图表里所有元素的颜色——文字、连线、节点边框、填充……全都自动派生，整体视觉协调，完全不用手动一个个调。

06 完整兼容 Shiki，VS Code 主题直接拿来用

用 fromShikiTheme() 可以把任何 Shiki 主题直接转成图表配色。VS Code 社区里几百套主题，想用哪套用哪套，开发者的主题偏好完全不用将就。

快速安装与使用

安装很简单，支持 npm、bun、pnpm：

npm install beautiful-mermaid
# 或
bun add beautiful-mermaid
# 或
pnpm add beautiful-mermaid

渲染 SVG

import { renderMermaidSVG } from 'beautiful-mermaid'

const svg = renderMermaidSVG(`
  graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
`)

直接拿到 SVG 字符串，同步返回，没有任何等待。

渲染 ASCII（终端模式）

import { renderMermaidASCII } from 'beautiful-mermaid'

const ascii = renderMermaidASCII(`graph LR; A --> B --> C`)

使用内置主题

import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'

const svg = renderMermaidSVG(diagram, THEMES['tokyo-night'])

想自定义主题，最简单只需要两个颜色：

const svg = renderMermaidSVG(diagram, {
  bg: '#1a1a2e',
  fg: '#e0e0e0',
})

小结

beautiful-mermaid 是一个在设计上充满巧思的 Mermaid 渲染器。它没有重复造轮子，而是在标准 Mermaid 语法的基础上，把渲染性能、视觉美感、开发体验这三个维度都提升了一个台阶。  

无论你是在搭建 AI 编程助手、写技术文档、做 CLI 工具，还是单纯想让项目里的图表更好看一点，它都能给你带来惊喜。

更多细节功能，感兴趣的可以到项目地址查看：
https://github.com/lukilabs/beautiful-mermaid