关于 mermaid
使用 beautiful-mermaid 渲染 Mermaid 图表的技能，适用于需要生成图表图像或终端文本输出的场景。支持五种图表类型，并提供 SVG 与 ASCII 两种输出。
主要功能
- 01渲染五种 Mermaid 图表
- 02输出 SVG 或 ASCII
- 03为 SVG 设置主题
- 04从文件或标准输入读取
适用场景
- 01将流程图导出为 SVG
- 02在终端查看图表文本
- 03绘制 API 交互时序图
- 04呈现数据库实体关系
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/mermaid确认已加载。
附带文件references/syntax.mdscripts/render.ts
详细介绍
Mermaid 图表渲染器
使用 beautiful-mermaid 库渲染。支持 5 种图表类型，提供双输出模式。
快速开始
依赖项（
beautiful-mermaid）在首次运行时自动安装。
SVG 输出
# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg
# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
ASCII 输出
# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii
# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii
输出示例：
┌───────┐ ┌─────┐
│ Start │────▶│ End │
└───────┘ └─────┘
支持的图表
| 类型 | 语法 | 最适合 |
|---|---|---|
| 流程图 | graph TD/LR | 流程、决策 |
| 时序图 | sequenceDiagram | API 调用、交互 |
| 状态图 | stateDiagram-v2 | 状态 |
| 类图 | classDiagram | OOP 设计 |
| ER 图 | erDiagram | 数据库模式 |
主题（仅 SVG）
npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg
使用无效的主题名称查看可用主题列表（例如 --theme ?）
资源
scripts/render.ts- 主渲染脚本references/syntax.md- Mermaid 语法快速参考
评论
支持 Markdown