pretty-mermaid by imxv/pretty-mermaid-skills
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill 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
node scripts/render.mjs \
--input diagram.mmd \
--format ascii \
--use-ascii
步骤 1:用户想要什么?
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
步骤 2:选择输出格式
--format svg--format ascii步骤 3:选择主题
tokyo-night(推荐)github-lightdraculanode scripts/themes.mjs当用户提供 .mmd 文件或 Mermaid 代码块时:
保存到文件(如果是代码块):
cat > diagram.mmd << 'EOF'
flowchart LR
A[Start] --> B[End]
EOF
使用主题渲染:
node scripts/render.mjs \
--input diagram.mmd \
--output diagram.svg \
--theme tokyo-night
验证输出:
SVG(可缩放矢量图形)
--format svg --output diagram.svgASCII(终端艺术)
--format ascii(打印到标准输出)--use-ascii - 使用纯 ASCII(无 Unicode)--padding-x 5 - 水平间距--padding-y 5 - 垂直间距自定义颜色(覆盖主题):
node scripts/render.mjs \
--input diagram.mmd \
--bg "#1a1b26" \
--fg "#a9b1d6" \
--accent "#7aa2f7" \
--output custom.svg
透明背景:
node scripts/render.mjs \
--input diagram.mmd \
--transparent \
--output transparent.svg
自定义字体:
node scripts/render.mjs \
--input diagram.mmd \
--font "JetBrains Mono" \
--output custom-font.svg
步骤 1:列出可用模板
ls assets/example_diagrams/
# flowchart.mmd sequence.mmd state.mmd class.mmd er.mmd
步骤 2:复制并修改
cp assets/example_diagrams/flowchart.mmd my-workflow.mmd
# 根据用户需求编辑 my-workflow.mmd
步骤 3:渲染
node scripts/render.mjs \
--input my-workflow.mmd \
--output my-workflow.svg \
--theme github-dark
关于详细的语法和最佳实践,请参阅 DIAGRAM_TYPES.md。
快速参考:
流程图 - 流程、工作流、决策树
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
序列图 - API 调用、交互、消息流
sequenceDiagram
User->>Server: Request
Server-->>User: Response
状态图 - 应用程序状态、生命周期、有限状态机
stateDiagram-v2
[*] --> Idle
Idle --> Loading
Loading --> [*]
类图 - 对象模型、架构、关系
classDiagram
User --> Post: creates
Post --> Comment: has
ER 图 - 数据库模式、数据模型
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
步骤 1:确定图表类型
步骤 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)--workers 8# 用户提供架构描述
# → 创建 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
# 用户提供表定义
# → 创建 er.mmd
# → 为数据库文档渲染
node scripts/render.mjs \
--input schema.mmd \
--output database-schema.svg \
--theme dracula
# 用于 README 或终端显示
node scripts/render.mjs \
--input workflow.mmd \
--format ascii \
--use-ascii > workflow.txt
# 用于投影仪的高对比度
node scripts/render.mjs \
--input slides-diagram.mmd \
--output presentation.svg \
--theme zinc-light
Error: Cannot find module 'beautiful-mermaid'
注意: 这应该在首次运行时自动安装。如果失败:
cd /path/to/pretty-mermaid-skill && npm install
Error: Parse error on line 3
解决方案:
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 图模板tokyo-night 或 github-dark--transparentassets/example_diagrams/ 中的模板开始每周安装数
1.3K
代码仓库
GitHub 星标数
564
首次出现
Jan 30, 2026
安全审计
安装于
opencode1.0K
codex990
gemini-cli927
github-copilot879
kimi-cli817
amp808
Render stunning, professionally-styled Mermaid diagrams with one command. Supports SVG for web/docs and ASCII for terminals.
From a file:
node scripts/render.mjs \
--input diagram.mmd \
--output diagram.svg \
--format svg \
--theme tokyo-night
From user-provided Mermaid code:
.mmd filenode scripts/batch.mjs \
--input-dir ./diagrams \
--output-dir ./output \
--format svg \
--theme dracula \
--workers 4
node scripts/render.mjs \
--input diagram.mmd \
--format ascii \
--use-ascii
Step 1: What does the user want?
Step 2: Choose output format
--format svg--format asciiStep 3: Select theme
tokyo-night (recommended)github-lightdraculanode scripts/themes.mjsWhen 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 (Scalable Vector Graphics)
--format svg --output diagram.svgASCII (Terminal Art)
--format ascii (prints to stdout)--use-ascii - Use pure ASCII (no Unicode)--padding-x 5 - Horizontal spacing--padding-y 5 - Vertical spacingCustom 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
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
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
Step 1: Identify diagram type
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
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
For dark mode documentation:
tokyo-night ⭐ - Modern, developer-friendlygithub-dark - Familiar GitHub styledracula - Vibrant, high contrastnord - Cool, minimalistFor light mode documentation:
github-light - Clean, professionalzinc-light - High contrast, printablecatppuccin-latte - Warm, friendlyDetailed theme information: See THEMES.md
node scripts/render.mjs \
--input diagram.mmd \
--output themed.svg \
--theme tokyo-night
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
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
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
--workers N - Parallel rendering (default: 4)--workers 8 for 10+ diagrams# 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
# 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
# User provides table definitions
# → Create er.mmd
# → Render for database docs
node scripts/render.mjs \
--input schema.mmd \
--output database-schema.svg \
--theme dracula
# For README or terminal display
node scripts/render.mjs \
--input workflow.mmd \
--format ascii \
--use-ascii > workflow.txt
# High-contrast for projectors
node scripts/render.mjs \
--input slides-diagram.mmd \
--output presentation.svg \
--theme zinc-light
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
Error: Parse error on line 3
Solution:
A --> BError: Input file not found: diagram.mmd
Solution: Verify file path is correct, use absolute path if needed
Executable Node.js scripts for rendering operations:
render.mjs - Main rendering scriptbatch.mjs - Batch processing scriptthemes.mjs - Theme listing utilityDocumentation to inform diagram creation:
THEMES.md - Detailed theme reference with examplesDIAGRAM_TYPES.md - Comprehensive syntax guide for all diagram typesapi_reference.md - beautiful-mermaid API documentationTemplate files for quick diagram creation:
example_diagrams/flowchart.mmd - Flowchart templateexample_diagrams/sequence.mmd - Sequence diagram templateexample_diagrams/state.mmd - State diagram templateexample_diagrams/class.mmd - Class diagram templateexample_diagrams/er.mmd - ER diagram templatetokyo-night or github-dark for technical docs--transparentassets/example_diagrams/Weekly Installs
1.3K
Repository
GitHub Stars
564
First Seen
Jan 30, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
opencode1.0K
codex990
gemini-cli927
github-copilot879
kimi-cli817
amp808
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装