开源推荐
morning
GitHub 热门项目: 美丽的美人鱼
2026-05-27
1 阅读
GitHub Trending
GitHub 项目：美丽的美人鱼
仓库地址：https://github.com/lukilabs/beautiful-mermaid
星级：10085 | 作者：lukilabs
项目描述：暂无描述
===================================================
自述文件内容：
# 美丽的美人鱼
**将美人鱼图渲染为美丽的 SVG 或 ASCII 艺术**
超快、完全主题化、零 DOM 依赖。专为人工智能时代而打造。
[](https://www.npmjs.com/package/beautiful-mermaid)
[](许可证)
[**现场演示和样品**](https://agents.craft.do/mermaid)
**[→ 在 Craft Agents 中实时使用](https://agents.craft.do)**
---
## 为什么我们要建造这个
图表对于人工智能辅助编程至关重要。当您使用人工智能编码助手时，能够直接在终端或聊天界面中可视化数据流、状态机和系统架构，从而使复杂的概念可以立即掌握。
[Mermaid](https://mermaid.js.org/) 是基于文本的图表的事实标准。太棒了。但默认渲染器有问题：
- **美学** — 可能是个人喜好，但希望它们看起来更专业
- **复杂的主题** - 自定义颜色需要与 CSS 类进行斗争
- **无终端输出** — 无法为 CLI 工具渲染为 ASCII
- **严重依赖** - 为简单图表引入大量代码
我们在 [Craft](https://craft.do) 上构建了 `beautiful-mermaid` 来为 [Craft Agents](https://agents.craft.do) 中的图表提供动力。它快速、美观并且适用于任何地方——从丰富的 UI 到简单的终端。
ASCII 渲染引擎基于 Alexander Grooff 的 [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii)。我们将它从 Go 移植到 TypeScript 并对其进行了扩展。感谢亚历山大为我们奠定了良好的基础！ （并且灵感表明这是可能的。）
## 特点
- **6 种图表类型** — 流程图、状态图、序列图、类图、ER 图和 XY 图（条形图、折线图、组合图）
- **双输出** — 用于丰富 UI 的 SVG，用于终端的 ASCII/Unicode
- **同步渲染** — 无异步，无闪光。与 React `useMemo()` 一起使用
- **15 个内置主题** — 添加您自己的主题非常简单
- **完全 Shiki 兼容性** — 直接使用任何 VS Code 主题
- **实时主题切换** — CSS 自定义属性，无需重新渲染
- **单色模式** — 仅用 2 种颜色即可绘制出精美的图表
- **零 DOM 依赖** — 纯 TypeScript，随处可用
- **超快** — 在 500 毫秒内渲染 100 多个图表
## 安装
````bash
npm 安装美丽的美人鱼
# 或
发髻添加美丽的美人鱼
# 或
pnpm 添加美丽的美人鱼
````
## 快速入门
### SVG 输出
``打字稿
从“美丽的美人鱼”导入 { renderMermaidSVG }
const svg = renderMermaidSVG(`
图解TD
A[开始] --> B{决定}
B -->|是| C[行动]
B -->|否| D[完]
`)
````
渲染是**完全同步** - 没有“等待”，没有承诺。 ELK.js 布局引擎通过 FakeWorker 旁路同步运行，因此您可以立即获取 SVG 字符串。
需要异步吗？使用 `renderMermaidSVGAsync()` — 相同的输出，返回一个 `Promise