该项目开发了beautiful-mermaid工具，旨在改进Mermaid图表的美观性和功能性，解决默认渲染器在视觉效果、主题定制、终端输出和依赖项方面的不足。它支持从富界面到纯终端的多种环境，并基于mermaid-ascii引擎进行了TypeScript移植和扩展，特别适用于AI辅助编程中的图表可视化需求。

项目简介

GitHub项目：beautiful-mermaid
这是一个基于Mermaid的增强型图表渲染工具，由Craft团队开发，旨在解决原生Mermaid在美观性、主题定制和终端兼容性方面的不足。支持5种图表类型，提供15种内置主题，并实现SVG与ASCII双模式输出。

核心功能

1. 图表类型支持

   • 流程图（Flowcharts）、状态图（State）、时序图（Sequence）、类图（Class）、ER图（ER Diagrams）。
   • 示例代码可直接转换为可视化图表或ASCII字符画。

2. 双模式输出

   • SVG模式：适用于富UI界面，支持动态主题切换（通过CSS变量实时更新）。
   • ASCII模式：适配终端环境，提供Unicode和纯ASCII两种风格（如┌───┐或+---+）。

3. 主题系统

   • 极简双色模式：仅需背景色（bg）和前景色（fg），自动推导其他元素颜色。
   • 扩展多色模式：可自定义线条、高亮、边框等颜色。
   • 内置15种主题：包括Tokyo Night、Dracula、GitHub Dark等流行配色。
   • Shiki兼容：直接使用VS Code主题（如Material、Rose Pine）。

4. 高性能

   • 纯TypeScript实现，无DOM依赖，500ms内可渲染100+图表。

快速上手

安装：
```bash npm install beautiful-mermaid

或使用bun/pnpm

```

基础示例：
- SVG输出：
javascript import { renderMermaid } from 'beautiful-mermaid'; const svg = await renderMermaid('graph TD; A --> B'); - ASCII输出：
javascript const ascii = renderMermaidAscii('graph LR; A --> B'); // 输出：┌───┐────►┌───┐

主题定制

• 自定义主题：
  javascript const myTheme = { bg: '#0f0f0f', fg: '#e0e0e0', accent: '#ff6b6b' };
• 动态切换：
  javascript svg.style.setProperty('--bg', '#282a36'); // 实时生效

技术细节

• ASCII渲染引擎：基于Alexander Grooff的mermaid-ascii，扩展了Unicode支持和多图表类型适配。
• 开源协议：MIT License。

适用场景

• AI编程辅助工具中的架构图展示
• 终端CLI工具集成
• 需要高定制化图表的开发者

由Craft团队开发，专注提升开发者的图表可视化体验。

以下是评论内容的总结：

正面评价

1. ASCII图表的优势

   • 支持终端和网页显示，使用等宽字体效果很好
   • "I love ASCII diagrams! The fact that I can write a diagram that looks equally wonderful in my terminal via cat as it does rendered on my website is incredible." (jonfw)
   • "ASCII output is the missing piece for AI-assisted coding workflows." (nulone)

2. 功能改进

   • 支持子图方向覆盖，可模拟泳道图
   • "Subgraph Direction Override: Using direction LR inside a subgraph while the outer graph flows TD." (rahimnathwani)

3. 与其他工具结合

   • 可搭配UnicodePlots.jl等工具使用
   • "Pair this with Unicode plots and you're set!" (dleeftink)

负面评价

1. 渲染问题

   • ASCII渲染与SVG不一致，存在错误
   • "The ascii here has the overlapping words, and you cannot tell the difference in any of the lines." (apwheele)

2. 依赖问题

   • 需要下载AI代理平台才能使用演示
   • "The live demo requires some download of an AI agent platform?" (a_t48)

3. 兼容性问题

   • LaTeX兼容性不足
   • "How is the LaTeX compatibility? Base mermaid's LaTeX compatibility is quite sparse." (wyes)

其他相关工具推荐

1. Monodraw

   • 用于构建通用ASCII图表的应用
   • "I will also shout out monodraw as a really nice little application for building generic ASCII diagrams." (jonfw)

2. Kroki

   • 支持多种图表格式，动态集成
   • "Kroki offers: BlockDiag, BPMN, Bytefield, SeqDiag..." (thangalin)

3. Diagon

   • 文本转ASCII工具
   • "Also see https://arthursonzogni.com/Diagon for text to ascii." (smusamashah)

其他观点

1. 重复项目

   • 类似项目近期已出现多次
   • "I get a sense of deja vu. There was another such project posted within the last 3 months." (peanutz454)

2. 大型图表处理

   • 对大型图表的文本换行处理存疑
   • "Does it handle large graphs well, or does the text wrap get messy?" (doanbactam)