mermaid

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mermaid Diagram Renderer

Mermaid图表渲染工具

Render Mermaid diagrams using

beautiful-mermaid

library. Supports 5 diagram types with dual output modes.

使用

beautiful-mermaid

库渲染Mermaid图表。支持5种图表类型，提供两种输出模式。

Quick Start

快速开始

Dependencies (
beautiful-mermaid
) auto-install on first run.

依赖项（
beautiful-mermaid
）会在首次运行时自动安装。

SVG Output (Default)

SVG输出（默认）

bash

undefined

bash

undefined

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

undefined

echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg

undefined

ASCII Output (Terminal)

ASCII输出（终端适配）

bash

undefined

bash

undefined

ASCII art for terminal display

生成适合终端显示的ASCII艺术图

npx tsx scripts/render.ts diagram.mmd --ascii

Pipe directly

直接管道输入

echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii


Output example:

┌───────┐ ┌─────┐ │ Start │────▶│ End │ └───────┘ └─────┘

undefined

echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii


输出示例：

┌───────┐ ┌─────┐ │ Start │────▶│ End │ └───────┘ └─────┘

undefined

Supported Diagrams

支持的图表类型

Type	Syntax	Best For
Flowchart	`graph TD/LR`	Processes, decisions
Sequence	`sequenceDiagram`	API calls, interactions
State	`stateDiagram-v2`	State machines
Class	`classDiagram`	OOP design
ER	`erDiagram`	Database schemas

类型	语法格式	适用场景
流程图	`graph TD/LR`	流程展示、决策逻辑
时序图	`sequenceDiagram`	API调用、交互流程
状态图	`stateDiagram-v2`	状态机模型
类图	`classDiagram`	面向对象设计
ER图	`erDiagram`	数据库架构设计

Theming (SVG only)

主题设置（仅SVG支持）

bash

npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg

Use invalid theme name to see available themes list (e.g.,

--theme ?

)

bash

npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg

使用无效的主题名称可查看可用主题列表（例如：

--theme ?

）

Resources

资源

```
scripts/render.ts
```
- Main rendering script
```
references/syntax.md
```
- Mermaid syntax quick reference

```
scripts/render.ts
```
- 主渲染脚本
```
references/syntax.md
```
- Mermaid语法速查手册