pretty-mermaid：一键渲染精美Mermaid图表，支持SVG和ASCII格式

pretty-mermaid by imxv/pretty-mermaid-skills

1,300 周安装量

564 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

开发生产力设计

🇨🇳中文介绍

Pretty Mermaid

通过一条命令渲染精美、专业风格的 Mermaid 图表。支持用于网页/文档的 SVG 格式和用于终端的 ASCII 格式。

快速开始

渲染单个图表

从文件渲染：

node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.svg \
  --format svg \
  --theme tokyo-night

从用户提供的 Mermaid 代码渲染：

将代码保存到 .mmd 文件
使用所需的主题运行渲染脚本

批量渲染多个图表

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --format svg \
  --theme dracula \
  --workers 4

ASCII 输出（终端友好）

node scripts/render.mjs \
  --input diagram.mmd \
  --format ascii \
  --use-ascii

工作流决策树

步骤 1：用户想要什么？

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

根据用户需求创建

步骤 1：确定图表类型

流程/工作流 → 流程图
API/交互 → 序列图
状态/生命周期 → 状态图
对象模型 → 类图
数据库 → ER 图

步骤 2：创建图表文件

cat > user-diagram.mmd << 'EOF'
# [插入生成的 Mermaid 代码]
EOF

步骤 3：渲染并迭代

node scripts/render.mjs \
  --input user-diagram.mmd \
  --output preview.svg \
  --theme tokyo-night

# 与用户一起审查，如果需要则编辑 diagram.mmd，然后重新渲染

node scripts/themes.mjs

Available Beautiful-Mermaid Themes:

 1. zinc-light
 2. zinc-dark
 3. tokyo-night
 4. tokyo-night-storm
 5. tokyo-night-light
 6. catppuccin-mocha
 7. catppuccin-latte
 8. nord
 9. nord-light
10. dracula
11. github-dark
12. github-light
13. solarized-dark
14. solarized-light
15. one-dark

Total: 15 themes

适用于深色模式文档：

tokyo-night ⭐ - 现代、开发者友好
github-dark - 熟悉的 GitHub 风格
dracula - 鲜艳、高对比度
nord - 酷炫、极简

适用于浅色模式文档：

github-light - 干净、专业
zinc-light - 高对比度、适合打印
catppuccin-latte - 温暖、友好

详细主题信息： 请参阅 THEMES.md

对图表应用主题

node scripts/render.mjs \
  --input diagram.mmd \
  --output themed.svg \
  --theme tokyo-night

使用多个主题渲染同一个图表：

for theme in tokyo-night dracula github-dark; do
  node scripts/render.mjs \
    --input diagram.mmd \
    --output "diagram-${theme}.svg" \
    --theme "$theme"
done

步骤 1：组织图表

diagrams/
├── architecture.mmd
├── workflow.mmd
└── database.mmd

步骤 2：批量渲染

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme tokyo-night \
  --workers 4

Found 3 diagram(s) to render...
✓ architecture.mmd
✓ workflow.mmd
✓ database.mmd

3/3 diagrams rendered successfully

批量渲染多种格式

同时渲染 SVG 和 ASCII：

# SVG 用于文档
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./svg \
  --format svg \
  --theme github-dark

# ASCII 用于 README
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./ascii \
  --format ascii \
  --use-ascii

--workers N - 并行渲染（默认：4）
建议：对于 10 个以上的图表使用 --workers 8

1. 用于文档的架构图

# 用户提供架构描述
# → 创建 flowchart.mmd
# → 使用专业主题渲染

node scripts/render.mjs \
  --input architecture.mmd \
  --output docs/architecture.svg \
  --theme github-dark \
  --transparent

# 用户描述 API 流程
# → 创建 sequence.mmd
# → 使用清晰主题渲染

node scripts/render.mjs \
  --input api-flow.mmd \
  --output api-sequence.svg \
  --theme tokyo-night

3. 数据库模式可视化

# 用户提供表定义
# → 创建 er.mmd
# → 为数据库文档渲染

node scripts/render.mjs \
  --input schema.mmd \
  --output database-schema.svg \
  --theme dracula

4. 终端友好的工作流

# 用于 README 或终端显示
node scripts/render.mjs \
  --input workflow.mmd \
  --format ascii \
  --use-ascii > workflow.txt

5. 演示文稿幻灯片

# 用于投影仪的高对比度
node scripts/render.mjs \
  --input slides-diagram.mmd \
  --output presentation.svg \
  --theme zinc-light

beautiful-mermaid 未安装

Error: Cannot find module 'beautiful-mermaid'

注意： 这应该在首次运行时自动安装。如果失败：

cd /path/to/pretty-mermaid-skill && npm install

无效的 Mermaid 语法

Error: Parse error on line 3

根据 DIAGRAM_TYPES.md 验证语法
在 https://mermaid.live/ 上测试
检查常见错误：
- A --> B 中缺少空格
- 节点形状语法错误
- 括号未闭合

Error: Input file not found: diagram.mmd

解决方案： 验证文件路径是否正确，如果需要请使用绝对路径

用于渲染操作的可执行 Node.js 脚本：

render.mjs - 主渲染脚本
batch.mjs - 批量处理脚本
themes.mjs - 主题列表工具

用于指导图表创建的文档：

THEMES.md - 带有示例的详细主题参考
DIAGRAM_TYPES.md - 所有图表类型的综合语法指南
api_reference.md - beautiful-mermaid API 文档

用于快速创建图表的模板文件：

example_diagrams/flowchart.mmd - 流程图模板
example_diagrams/sequence.mmd - 序列图模板
example_diagrams/state.mmd - 状态图模板
example_diagrams/class.mmd - 类图模板
example_diagrams/er.mmd - ER 图模板

提示与最佳实践

对于 3 个以上的图表进行批量渲染（并行处理）
保持图表节点数在 50 个以下以实现快速渲染
使用 ASCII 进行快速预览

技术文档使用 tokyo-night 或 github-dark
为深色/浅色模式兼容性添加透明度：--transparent
在批量渲染前在目标环境中测试主题

从 assets/example_diagrams/ 中的模板开始
根据用户反馈进行迭代
最后应用主题
如果需要，同时渲染 SVG（文档）和 ASCII（README）

演示文稿使用高对比度主题
为所有连接添加文本标签
避免仅使用颜色编码信息

🇺🇸English

Pretty Mermaid

Render stunning, professionally-styled Mermaid diagrams with one command. Supports SVG for web/docs and ASCII for terminals.

Quick Start

Render a Single Diagram

From a file:

node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.svg \
  --format svg \
  --theme tokyo-night

From user-provided Mermaid code:

Save the code to a .mmd file
Run the render script with desired theme

Batch Render Multiple Diagrams

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --format svg \
  --theme dracula \
  --workers 4

ASCII Output (Terminal-Friendly)

node scripts/render.mjs \
  --input diagram.mmd \
  --format ascii \
  --use-ascii

Workflow Decision Tree

Step 1: What does the user want?

Render existing Mermaid code → Go to Rendering
Create new diagram → Go to Creating
Apply/change theme → Go to Theming
Batch process → Go to Batch Rendering

Step 2: Choose output format

SVG (web, docs, presentations) → --format svg
ASCII (terminal, logs, plain text) → --format ascii

Step 3: Select theme

Dark mode docs → tokyo-night (recommended)
Light mode docs → github-light
Vibrant colors → dracula
See all themes → Run node scripts/themes.mjs

Rendering Diagrams

From File

When user provides a .mmd file or Mermaid code block:

Save to file (if code block):

cat > diagram.mmd << 'EOF'
flowchart LR
    A[Start] --> B[End]
EOF

Render with theme :

node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.svg \
  --theme tokyo-night

Verify output :
- SVG: Open in browser or embed in docs
- ASCII: Display in terminal

Output Formats

SVG (Scalable Vector Graphics)

Best for: Web pages, documentation, presentations
Features: Full color support, transparency, scalable
Usage: --format svg --output diagram.svg

ASCII (Terminal Art)

Best for: Terminal output, plain text logs, README files
Features: Pure text, works anywhere, no dependencies
Usage: --format ascii (prints to stdout)
Options:
- --use-ascii - Use pure ASCII (no Unicode)
- --padding-x 5 - Horizontal spacing
- --padding-y 5 - Vertical spacing

Advanced Options

Custom Colors (overrides theme):

node scripts/render.mjs \
  --input diagram.mmd \
  --bg "#1a1b26" \
  --fg "#a9b1d6" \
  --accent "#7aa2f7" \
  --output custom.svg

Transparent Background :

node scripts/render.mjs \
  --input diagram.mmd \
  --transparent \
  --output transparent.svg

Custom Font :

node scripts/render.mjs \
  --input diagram.mmd \
  --font "JetBrains Mono" \
  --output custom-font.svg

Creating Diagrams

Using Templates

Step 1: List available templates

ls assets/example_diagrams/
# flowchart.mmd  sequence.mmd  state.mmd  class.mmd  er.mmd

Step 2: Copy and modify

cp assets/example_diagrams/flowchart.mmd my-workflow.mmd
# Edit my-workflow.mmd with user requirements

Step 3: Render

node scripts/render.mjs \
  --input my-workflow.mmd \
  --output my-workflow.svg \
  --theme github-dark

Diagram Type Reference

For detailed syntax and best practices, see DIAGRAM_TYPES.md.

Quick reference:

Flowchart - Processes, workflows, decision trees

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Sequence - API calls, interactions, message flows

sequenceDiagram
    User->>Server: Request
    Server-->>User: Response

State - Application states, lifecycle, FSM

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading
    Loading --> [*]

Class - Object models, architecture, relationships

classDiagram
    User --> Post: creates
    Post --> Comment: has

ER - Database schema, data models

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains

From User Requirements

Step 1: Identify diagram type

Process/workflow → Flowchart
API/interaction → Sequence
States/lifecycle → State
Object model → Class
Database → ER

Step 2: Create diagram file

cat > user-diagram.mmd << 'EOF'
# [Insert generated Mermaid code]
EOF

Step 3: Render and iterate

node scripts/render.mjs \
  --input user-diagram.mmd \
  --output preview.svg \
  --theme tokyo-night

# Review with user, edit diagram.mmd if needed, re-render

Theming

List Available Themes

node scripts/themes.mjs

Output:

Available Beautiful-Mermaid Themes:

 1. zinc-light
 2. zinc-dark
 3. tokyo-night
 4. tokyo-night-storm
 5. tokyo-night-light
 6. catppuccin-mocha
 7. catppuccin-latte
 8. nord
 9. nord-light
10. dracula
11. github-dark
12. github-light
13. solarized-dark
14. solarized-light
15. one-dark

Total: 15 themes

Theme Selection Guide

For dark mode documentation:

tokyo-night ⭐ - Modern, developer-friendly
github-dark - Familiar GitHub style
dracula - Vibrant, high contrast
nord - Cool, minimalist

For light mode documentation:

github-light - Clean, professional
zinc-light - High contrast, printable
catppuccin-latte - Warm, friendly

Detailed theme information: See THEMES.md

Apply Theme to Diagram

node scripts/render.mjs \
  --input diagram.mmd \
  --output themed.svg \
  --theme tokyo-night

Compare Themes

Render the same diagram with multiple themes:

for theme in tokyo-night dracula github-dark; do
  node scripts/render.mjs \
    --input diagram.mmd \
    --output "diagram-${theme}.svg" \
    --theme "$theme"
done

Batch Rendering

Batch Render Directory

Step 1: Organize diagrams

diagrams/
├── architecture.mmd
├── workflow.mmd
└── database.mmd

Step 2: Batch render

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme tokyo-night \
  --workers 4

Output:

Found 3 diagram(s) to render...
✓ architecture.mmd
✓ workflow.mmd
✓ database.mmd

3/3 diagrams rendered successfully

Batch with Multiple Formats

Render both SVG and ASCII:

# SVG for docs
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./svg \
  --format svg \
  --theme github-dark

# ASCII for README
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./ascii \
  --format ascii \
  --use-ascii

Performance Options

--workers N - Parallel rendering (default: 4)
Recommended: --workers 8 for 10+ diagrams

Common Use Cases

1. Architecture Diagram for Documentation

# User provides architecture description
# → Create flowchart.mmd
# → Render with professional theme

node scripts/render.mjs \
  --input architecture.mmd \
  --output docs/architecture.svg \
  --theme github-dark \
  --transparent

2. API Sequence Diagram

# User describes API flow
# → Create sequence.mmd
# → Render with clear theme

node scripts/render.mjs \
  --input api-flow.mmd \
  --output api-sequence.svg \
  --theme tokyo-night

3. Database Schema Visualization

# User provides table definitions
# → Create er.mmd
# → Render for database docs

node scripts/render.mjs \
  --input schema.mmd \
  --output database-schema.svg \
  --theme dracula

4. Terminal-Friendly Workflow

# For README or terminal display
node scripts/render.mjs \
  --input workflow.mmd \
  --format ascii \
  --use-ascii > workflow.txt

5. Presentation Slides

# High-contrast for projectors
node scripts/render.mjs \
  --input slides-diagram.mmd \
  --output presentation.svg \
  --theme zinc-light

Troubleshooting

beautiful-mermaid Not Installed

Error: Cannot find module 'beautiful-mermaid'

Note: This should auto-install on first run. If it fails:

cd /path/to/pretty-mermaid-skill && npm install

Invalid Mermaid Syntax

Error: Parse error on line 3

Solution:

Validate syntax against DIAGRAM_TYPES.md
Test on https://mermaid.live/
Check for common errors:
- Missing spaces in A --> B
- Incorrect node shape syntax
- Unclosed brackets

File Not Found

Error: Input file not found: diagram.mmd

Solution: Verify file path is correct, use absolute path if needed

Resources

scripts/

Executable Node.js scripts for rendering operations:

render.mjs - Main rendering script
batch.mjs - Batch processing script
themes.mjs - Theme listing utility

references/

Documentation to inform diagram creation:

THEMES.md - Detailed theme reference with examples
DIAGRAM_TYPES.md - Comprehensive syntax guide for all diagram types
api_reference.md - beautiful-mermaid API documentation

assets/

Template files for quick diagram creation:

example_diagrams/flowchart.mmd - Flowchart template
example_diagrams/sequence.mmd - Sequence diagram template
example_diagrams/state.mmd - State diagram template
example_diagrams/class.mmd - Class diagram template
example_diagrams/er.mmd - ER diagram template

Tips & Best Practices

Performance

Batch render for 3+ diagrams (parallel processing)
Keep diagrams under 50 nodes for fast rendering
Use ASCII for quick previews

Quality

Use tokyo-night or github-dark for technical docs
Add transparency for dark/light mode compatibility: --transparent
Test theme in target environment before batch rendering

Workflow

Start with templates from assets/example_diagrams/
Iterate with user feedback
Apply theme last
Render both SVG (docs) and ASCII (README) if needed

Accessibility

Use high-contrast themes for presentations
Add text labels to all connections
Avoid color-only information encoding

Weekly Installs

1.3K

Repository

imxv/pretty-mer…d-skills

GitHub Stars

564

First Seen

Jan 30, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykPass

Installed on

opencode1.0K

codex990

gemini-cli927

github-copilot879

kimi-cli817

amp808

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

102,200 周安装

pretty-mermaid：一键渲染精美Mermaid图表，支持SVG和ASCII格式

🇨🇳中文介绍

Pretty Mermaid

快速开始

渲染单个图表

批量渲染多个图表

ASCII 输出（终端友好）

工作流决策树

相关 Skills

渲染图表

从文件渲染

输出格式

高级选项

创建图表

使用模板

图表类型参考

根据用户需求创建

主题

列出可用主题

主题选择指南

对图表应用主题

比较主题

批量渲染

批量渲染目录

批量渲染多种格式

性能选项

常见用例

1. 用于文档的架构图

2. API 序列图

3. 数据库模式可视化

4. 终端友好的工作流

5. 演示文稿幻灯片

故障排除

beautiful-mermaid 未安装

无效的 Mermaid 语法

文件未找到

资源

scripts/

references/

assets/

提示与最佳实践

性能

质量

工作流

可访问性

🇺🇸English

Pretty Mermaid

Quick Start

Render a Single Diagram

Batch Render Multiple Diagrams

ASCII Output (Terminal-Friendly)

Workflow Decision Tree

Rendering Diagrams

From File

Output Formats

Advanced Options

Creating Diagrams

Using Templates

Diagram Type Reference

From User Requirements

Theming

List Available Themes

Theme Selection Guide

Apply Theme to Diagram

Compare Themes

Batch Rendering

Batch Render Directory

Batch with Multiple Formats

Performance Options

Common Use Cases

1. Architecture Diagram for Documentation

2. API Sequence Diagram

3. Database Schema Visualization

4. Terminal-Friendly Workflow

5. Presentation Slides

Troubleshooting

beautiful-mermaid Not Installed

Invalid Mermaid Syntax

File Not Found

Resources