beautiful-mermaid 是什么？

一个 TypeScript 库，可将 Mermaid 图表渲染为可主题化的 SVG 或 ASCII/Unicode 文本，无需 DOM 依赖。 beautiful-mermaid 可以把 Mermaid 图表源码渲染为 SVG 字符串，或渲染为纯文本的 ASCII/Unicode 图形。支持流程图、状态图、时序图、类图和 ER 图，并支持柱状、折线及组合形式的 XY 图表。

beautiful-mermaid 可以免费使用吗？用的什么许可证？

beautiful-mermaid 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

beautiful-mermaid 还在维护吗？

半年内有更新。beautiful-mermaid 最近一次提交是在 2026年5月6日。

beautiful-mermaid 适合用来做什么？

在 AI 聊天或智能体界面中展示生成的流程图和架构图在 React 应用中同步渲染 Mermaid 图表，无需异步加载在 CLI 工具或终端输出中打印架构图、状态图让图表配色与现有编辑器或应用主题保持一致

beautiful-mermaid 怎么安装和运行？

使用 npm 安装包: npm install beautiful-mermaid 在代码中将流程图渲染为 SVG

在哪里获取 beautiful-mermaid？

源代码和安装说明在 GitHub 上：https://github.com/lukilabs/beautiful-mermaid

lukilabs/beautiful-mermaid

一个 TypeScript 库，可将 Mermaid 图表渲染为可主题化的 SVG 或 ASCII/Unicode 文本，无需 DOM 依赖。

在 GitHub 查看

Star: 11,200
Fork: 411
未关闭 Issue: 93
最近提交: 6个月前

这是什么？

beautiful-mermaid 可以把 Mermaid 图表源码渲染为 SVG 字符串，或渲染为纯文本的 ASCII/Unicode 图形。支持流程图、状态图、时序图、类图和 ER 图，并支持柱状、折线及组合形式的 XY 图表。

渲染过程是同步的，因此可以在 React 渲染期间通过 useMemo 直接生成 SVG，避免闪烁。主题只需提供背景色和前景色两个颜色，也可选填强调色、次要文字色等。颜色以 CSS 自定义属性输出，切换主题时无需重新渲染。库内置 15 套主题，也能将任意 Shiki（VS Code）主题映射为图表配色。

ASCII 渲染部分基于 Go 语言项目 mermaid-ascii 移植到 TypeScript，并扩展了时序图、类图和 ER 图的支持。输出可选 Unicode 制表符或纯 ASCII 字符，终端场景下还能使用 ANSI 或 HTML 着色。

核心功能

01支持流程图、状态图、时序图、类图、ER 图和 XY 图表
02可输出用于网页的 SVG，或用于终端的 ASCII/Unicode 文本
03同步 API，可在 React 渲染中配合 useMemo 使用
04仅用背景色和前景色即可生成完整配色，内置 15 套主题
05通过 fromShikiTheme 直接使用任意 Shiki/VS Code 主题
06基于 CSS 自定义属性，切换主题无需重新渲染

适用场景

在 AI 聊天或智能体界面中展示生成的流程图和架构图
在 React 应用中同步渲染 Mermaid 图表，无需异步加载
在 CLI 工具或终端输出中打印架构图、状态图
让图表配色与现有编辑器或应用主题保持一致

快速上手

1
使用 npm 安装包
npm install beautiful-mermaid
2
在代码中将流程图渲染为 SVG

使用前须知

渲染是同步的，但 ELK.js 布局通过 FakeWorker 绕过运行，因此超大图表可能较慢。
README 仅列出六种图表类型，其他 Mermaid 图表类型不在支持范围内。

常见问题

beautiful-mermaid 是什么？: 一个 TypeScript 库，可将 Mermaid 图表渲染为可主题化的 SVG 或 ASCII/Unicode 文本，无需 DOM 依赖。 beautiful-mermaid 可以把 Mermaid 图表源码渲染为 SVG 字符串，或渲染为纯文本的 ASCII/Unicode 图形。支持流程图、状态图、时序图、类图和 ER 图，并支持柱状、折线及组合形式的 XY 图表。
beautiful-mermaid 可以免费使用吗？用的什么许可证？: beautiful-mermaid 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
beautiful-mermaid 还在维护吗？: 半年内有更新。beautiful-mermaid 最近一次提交是在 2026年5月6日。
beautiful-mermaid 适合用来做什么？: 在 AI 聊天或智能体界面中展示生成的流程图和架构图在 React 应用中同步渲染 Mermaid 图表，无需异步加载在 CLI 工具或终端输出中打印架构图、状态图让图表配色与现有编辑器或应用主题保持一致
beautiful-mermaid 怎么安装和运行？: 使用 npm 安装包: npm install beautiful-mermaid 在代码中将流程图渲染为 SVG
在哪里获取 beautiful-mermaid？: 源代码和安装说明在 GitHub 上：https://github.com/lukilabs/beautiful-mermaid

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。