beautiful-mermaid：这个渲染器让Mermaid更惊艳！

banq

beautiful-mermaid 是一个开源的 TypeScript 库，旨在将 Mermaid 文本格式的图表渲染成更美观、可定制的 SVG 图像或漂亮的 ASCII 图形，非常适合文档、报告、博客、终端输出等场景。

一款​​非常漂亮的Mermaid渲染器，与之前的Mermaid渲染器相比，它的画面更加干净，视觉效果也更加柔和，其精细程度令人难以忽视。

它速度极快，完全可定制主题，并支持 SVG 和 ASCII 两种格式的输出。Beautiful Mermaid 由 Craft 团队开发，完美诠释了图表如何兼具功能性和美观性。

核心功能概览
图表渲染增强它能把 Mermaid 的图表渲染为设计感更强、更专业的 SVG，相比原始默认样式更加现代、清晰、易读。

多种输出格式

  • SVG 输出 —— 带 CSS 变量支持颜色主题切换
  • ASCII / Unicode 输出 —— 在纯终端或纯文本环境中也能显示漂亮图形，例如代码注释或 CLI 工具输出等。
丰富主题与样式内置约 15 种主题风格，可用不同背景、前景色组合替代默认 Mermaid 样式，例如深色、浅色、Catppuccin、Nord、Solarized 等。
轻量且零依赖 DOM库本身不依赖浏览器 DOM，可以在浏览器、Node、终端等环境运行。

支持多种 Mermaid 图类型

  • 流程图（Flowchart）
  • 状态图（State Diagram）
  • 序列图（Sequence Diagram）
  • 类图（Class Diagram）
  • ER 实体关系图（ER Diagram）全部支持定制渲染。

快速使用示例
SVG 渲染

import { renderMermaid } from 'beautiful-mermaid'

const svg = await renderMermaid(<code>
  graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
</code>)


ASCII 输出

import { renderMermaidAscii } from 'beautiful-mermaid'

const ascii = renderMermaidAscii(<code>graph LR; A --> B --> C</code>)

输出示例（终端 ASCII）：

┌───┐     ┌───┐     ┌───┐
│ A │────►│ B │────►│ C │
└───┘     └───┘     └───┘

安装方式
通过前端或后端环境常用的包管理器安装：
npm install beautiful-mermaid
# 或者
bun add beautiful-mermaid
# 或者
pnpm add beautiful-mermaid

也可以通过 CDN 直接在浏览器中引入：


✨ 为什么选择 beautiful-mermaid？
原生的 Mermaid 语法虽广泛支持，但默认渲染的图像比较朴素；而 beautiful-mermaid 提供了：
✅ 更美观的图表输出
✅ 支持主题、色彩可定制
✅ 适合 AI、文档自动化工具构建更漂亮的图形展示
✅ 兼容终端 ASCII 显示，非常适合 CLI 场景

在开源社区一经发布便迅速获得了大量关注和 star 热度，反映了开发者对于更好图表样式输出的强烈需求。