Pretty Mermaid

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: 1. Save the code to a .mmd file 2. 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:

1. Save to file (if code block):

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

2. Render with theme:

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

3. 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: 1. Validate syntax against DIAGRAM_TYPES.md 2. Test on https://mermaid.live/ 3. 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

1. Start with templates from assets/example_diagrams/ 2. Iterate with user feedback 3. Apply theme last 4. 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

<div align="center">

Pretty-Mermaid Skills

将 Mermaid 图表渲染为精美的 SVG 或 ASCII 艺术

极速、全主题支持、零 DOM 依赖。为 AI 而生。

  

中文 | English

</div>

简介

为 AI 提供的 Mermaid 图表渲染 Skill，支持 SVG 和 ASCII 双格式输出，让您的文档更加生动。

✨ 功能特性

• 📊 多格式支持：支持 SVG 和 ASCII 渲染导出
• 🎨 丰富主题：内置 15 种精美主题，满足不同场景需求
• 📈 全图表支持：支持 Flowchart, Sequence, State, Class, ER 等 5 种常用图表
• ⚡ 高效渲染：支持批量并行渲染，速度飞快
• 📚 开箱即用：提供完整的模板和详细文档

支持主题列表

🤖 AI 助手集成

支持与以下 AI 编程环境无缝集成，通过自然语言即可调用绘图能力：

• Claude Code
• Cursor
• Gemini CLI
• Antigravity
• OpenCode
• Codex
• qoder

🚀 安装步骤

一键安装

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

验证安装

cd Pretty-mermaid
node scripts/themes.mjs

提示：首次运行时会自动安装依赖，只需确保您的环境中有 Node.js。

📖 快速开始

列出可用主题

node scripts/themes.mjs

渲染单个图表

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

批量渲染

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --theme dracula

📂 使用示例

查看 assets/example_diagrams/ 目录下的 5 个模板文件，快速上手：

• flowchart.mmd - 流程图
• sequence.mmd - 时序图
• state.mmd - 状态图
• class.mmd - 类图
• er.mmd - ER 图

📚 完整文档

详细使用指南请参阅 SKILL.md

⚙️ 系统要求

• Node.js 14+

📄 许可证

MIT License

Star History


🙏 致谢

基于 beautiful-mermaid 项目

<div align="center">

Pretty-Mermaid Skills

Render Mermaid diagrams as beautiful SVGs or ASCII art

Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.

  

English ｜ 中文

</div>

Introduction

A Mermaid diagram rendering skill for AI, supporting both SVG and ASCII output formats to make your documentation more vivid.

✨ Features

• 📊 Multi-format Support: SVG and ASCII rendering export
• 🎨 Rich Themes: 15 built-in themes for different scenarios
• 📈 Full Diagram Support: Flowchart, Sequence, State, Class, ER and more
• ⚡ High Performance: Batch parallel rendering
• 📚 Ready to Use: Complete templates and detailed documentation

Supported Themes

🤖 AI Assistant Integration

Seamlessly integrates with the following AI coding environments:

• Claude Code
• Cursor
• Gemini CLI
• Antigravity
• OpenCode
• Codex
• qoder

🚀 Installation

One-click Install

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

Verify Installation

cd Pretty-mermaid
node scripts/themes.mjs

Note: Dependencies will be auto-installed on first run. Just ensure Node.js is available.

📖 Quick Start

List Available Themes

node scripts/themes.mjs

Render Single Diagram

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

Batch Render

node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --theme dracula

📂 Examples

Check the 5 template files in assets/example_diagrams/:

• flowchart.mmd - Flowchart
• sequence.mmd - Sequence Diagram
• state.mmd - State Diagram
• class.mmd - Class Diagram
• er.mmd - ER Diagram

📚 Documentation

See SKILL.md for detailed usage guide.

⚙️ Requirements

• Node.js 14+

📄 License

MIT License

Star History


🙏 Acknowledgments

Based on beautiful-mermaid

Reference Documentation for Beautiful Mermaid

This is a placeholder for detailed reference documentation. Replace with actual reference content or delete if not needed.

Example real reference docs from other skills:

• product-management/references/communication.md - Comprehensive guide for status updates
• product-management/references/context_building.md - Deep-dive on gathering context
• bigquery/references/ - API references and query examples

When Reference Docs Are Useful

Reference docs are ideal for:

• Comprehensive API documentation
• Detailed workflow guides
• Complex multi-step processes
• Information too lengthy for main SKILL.md
• Content that's only needed for specific use cases

Structure Suggestions

API Reference Example

• Overview
• Authentication
• Endpoints with examples
• Error codes
• Rate limits

Workflow Guide Example

• Prerequisites
• Step-by-step instructions
• Common patterns
• Troubleshooting
• Best practices

Mermaid Diagram Types Reference

Flowchart / Graph

Basic Syntax

flowchart LR
    A[Node] --> B[Another Node]
    B --> C{Decision}
    C -->|Yes| D[Result 1]
    C -->|No| E[Result 2]

Node Shapes

• [Text] - Rectangle
• ([Text]) - Stadium (rounded)
• [[Text]] - Subroutine (double border)
• [(Text)] - Cylindrical (database)
• ((Text)) - Circle
• >Text] - Asymmetric shape
• {Text} - Rhombus (decision)
• {{Text}} - Hexagon
• [/Text/] - Parallelogram
• [\Text\] - Trapezoid (alt)

Connections

• --> - Arrow
• --- - Line
• -.-> - Dotted arrow
• ==> - Thick arrow
• --text--> - Arrow with text
• -->|text| - Arrow with text (alt syntax)

Direction

• LR - Left to Right
• RL - Right to Left
• TB / TD - Top to Bottom / Top Down
• BT - Bottom to Top

Best Practices

• Use LR direction for wide screens
• Keep decision nodes distinct with {} shape
• Use stadium shapes ([]) for start/end
• Limit nesting depth to 3 levels
• Group related nodes visually

---

Sequence Diagram

Basic Syntax

sequenceDiagram
    participant A as Alice
    participant B as Bob

    A->>B: Hello Bob
    B-->>A: Hi Alice
    Note right of B: Bob is thinking
    A->>B: Another message

Participants

sequenceDiagram
    participant A
    actor B
    participant C

Message Types

• ->> - Solid line arrow
• -->> - Dotted line arrow
• -x - Solid line with cross
• --x - Dotted line with cross
• -) - Solid line with open arrow
• --) - Dotted line with open arrow

Activations

sequenceDiagram
    A->>+B: Request
    B-->>-A: Response

Notes

sequenceDiagram
    Note left of A: Note on left
    Note right of B: Note on right
    Note over A,B: Note spanning both

Loops & Alt

sequenceDiagram
    loop Every minute
        A->>B: Ping
    end

    alt Success
        B-->>A: OK
    else Failure
        B-->>A: Error
    end

Best Practices

• Use meaningful participant names
• Add notes for complex logic
• Keep sequence linear (avoid too many branches)
• Use activations to show processing time
• Limit to 5-7 participants for clarity

---

State Diagram

Basic Syntax

stateDiagram-v2
    [*] --> State1
    State1 --> State2: Transition
    State2 --> [*]

Composite States

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Running
        Running --> Paused
        Paused --> Running
        Running --> [*]
    }

    Active --> [*]

Choice

stateDiagram-v2
    state if_state <<choice>>
    [*] --> if_state
    if_state --> State1: condition 1
    if_state --> State2: condition 2

Concurrency

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Process1
        --
        [*] --> Process2
    }

Notes

stateDiagram-v2
    State1 --> State2
    note right of State1
        Important note here
    end note

Best Practices

• Start with [*] for initial state
• Use clear transition labels
• Limit composite state depth to 2 levels
• Group related states together
• Use choice nodes for complex branching

---

Class Diagram

Basic Syntax

classDiagram
    class ClassName {
        +String publicField
        -int privateField
        #bool protectedField
        ~String packageField

        +publicMethod()
        -privateMethod()
        #protectedMethod()
        ~packageMethod()
    }

Visibility

• + Public
• - Private
• # Protected
• ~ Package/Internal

Relationships

classDiagram
    ClassA --|> ClassB : Inheritance
    ClassC --* ClassD : Composition
    ClassE --o ClassF : Aggregation
    ClassG --> ClassH : Association
    ClassI -- ClassJ : Link (solid)
    ClassK ..> ClassL : Dependency
    ClassM ..|> ClassN : Realization

Cardinality

classDiagram
    Customer "1" --> "*" Order
    Order "1" --> "1..*" OrderItem

Abstract & Interface

classDiagram
    class AbstractClass {
        <<abstract>>
        +abstractMethod()*
    }

    class Interface {
        <<interface>>
        +method()
    }

Best Practices

• Show only relevant attributes/methods
• Use inheritance sparingly
• Indicate cardinality on associations
• Group related classes visually
• Use interfaces for contracts

---

ER Diagram

Basic Syntax

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

Cardinality

• ||--|| - One to one
• }o--o{ - Zero or more to zero or more
• ||--o{ - One to zero or more
• }o--|| - Zero or more to one
• ||--|{ - One to one or more
• }|--|{ - One or more to one or more

Attributes

erDiagram
    CUSTOMER {
        string id PK
        string name
        string email UK
        date created_at
    }

    ORDER {
        string id PK
        string customer_id FK
        decimal total
        date order_date
    }

Attribute Types

• Use standard SQL types: string, int, decimal, date, bool
• Add constraints: PK (Primary Key), FK (Foreign Key), UK (Unique Key)

Best Practices

• Use UPPERCASE for entity names
• Use snake_case for attribute names
• Always mark PK and FK
• Show only essential attributes
• Keep relationship labels clear
• Limit to 6-8 entities per diagram

---

General Best Practices

Theming

• Use tokyo-night for dark mode documentation
• Use github-light for light mode documentation
• Use dracula for vibrant, colorful diagrams
• Use monokai for code-centric diagrams

Performance

• Keep diagrams under 50 nodes for fast rendering
• Split complex diagrams into multiple files
• Use batch rendering for multiple diagrams

Accessibility

• Add meaningful labels to all connections
• Use high-contrast themes
• Avoid relying solely on color to convey information
• Provide text descriptions for complex diagrams

File Organization

diagrams/
├── architecture/
│   ├── system-overview.mmd
│   └── data-flow.mmd
├── workflows/
│   ├── user-registration.mmd
│   └── checkout-process.mmd
└── database/
    ├── schema-users.mmd
    └── schema-orders.mmd

Beautiful-Mermaid 主题参考

Beautiful-Mermaid 提供 15 个精心设计的内置主题，涵盖亮色和暗色方案。每个主题都基于两种核心颜色（背景 bg 和前景 fg），并可通过可选的丰富色彩进行增强。

快速选择指南

亮色主题

暗色主题

---

主题详细说明

zinc-light (亮色)

特性： 清洁、通用的浅色主题，适合打印和高对比度场景。

配置：

{
  bg: '#FFFFFF',
  fg: '#27272A'
}

最佳用途：

• 正式文档和报告
• 打印输出
• 演示幻灯片

示例：

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

---

zinc-dark (暗色)

特性： 纯暗色主题，前景色由系统推导。极简主义风格。

配置：

{
  bg: '#18181B',
  fg: '自动推导'
}

最佳用途：

• 终端应用
• 暗色 UI 集成
• 代码编辑器

---

tokyo-night (暗色) ⭐ 推荐

特性： 现代日本风格，柔和的蓝色调，专为开发者设计。

配置：

{
  bg: '#1a1b26',
  fg: '#a9b1d6',
  accent: '#7aa2f7'
}

最佳用途：

• 现代开发文档
• AI 辅助编程
• 代码示例和教程

视觉特性：

• 深蓝色背景（#1a1b26）
• 柔和紫色文字（#a9b1d6）
• 亮蓝色强调（#7aa2f7）

---

tokyo-night-storm (暗色)

特性： Tokyo Night 的深色变体，更深的背景色。

配置：

{
  bg: '#24283b',
  fg: '#a9b1d6',
  accent: '#7aa2f7'
}

最佳用途：

• 极低光环境
• OLED 屏幕优化
• 长时间阅读

---

tokyo-night-light (亮色)

特性： Tokyo Night 的亮色版本，保持同样的配色哲学。

配置：

{
  bg: '#d5d6db',
  fg: '#34548a'
}

最佳用途：

• 日间使用
• 高对比度需求
• 打印友好

---

catppuccin-mocha (暗色)

特性： 温暖、舒适的暗色主题，带有红紫色强调。

配置：

{
  bg: '#1e1e2e',
  fg: '#cba6f7'
}

最佳用途：

• 长时间阅读（眼睛友好）
• 创意项目
• 设计文档

---

catppuccin-latte (亮色)

特性： Catppuccin 的亮色变体，温暖而柔和。

配置：

{
  bg: '#eff1f5',
  fg: '#8839ef'
}

最佳用途：

• 日间亮色环境
• 紫色爱好者
• 设计导向的文档

---

nord (暗色)

特性： 北欧启发的冰蓝色调，专业且冷静。

配置：

{
  bg: '#2e3440',
  fg: '自动推导'
}

最佳用途：

• 企业文档
• 技术规范
• 系统架构图

视觉特性：

• 深灰蓝色背景
• 高对比度文字
• 冷色调整体

---

nord-light (亮色)

特性： Nord 的亮色版本。

配置：

{
  bg: '#eceff4',
  fg: '#5e81ac'
}

最佳用途：

• 日间亮色使用
• 印刷品
• 北欧风格项目

---

dracula (暗色) ⭐ 推荐

特性： 经典的深暗色主题，高对比度。

配置：

{
  bg: '#282a36',
  fg: '#f8f8f2'
}

最佳用途：

• 代码编辑器集成
• 开发者文档
• 命令行工具

视觉特性：

• 极深的背景色
• 明亮的文字
• 紫色和粉色强调

---

github-light (亮色)

特性： GitHub 亮色主题，Web 友好。

配置：

{
  bg: '#ffffff',
  fg: '#0969da'
}

最佳用途：

• GitHub README
• Web 文档
• 在线教程

---

github-dark (暗色)

特性： GitHub 暗色主题，GitHub 用户熟悉。

配置：

{
  bg: '#0d1117',
  fg: '#4493f8'
}

最佳用途：

• GitHub 文档
• GitHub Issues 和 Discussions
• 开源项目

---

solarized-light (亮色)

特性： Ethan Schoonover 设计的经典亮色主题。

配置：

{
  bg: '#fdf6e3',
  fg: '#268bd2'
}

最佳用途：

• 研究论文
• 学术文档
• 精确色彩工作

---

solarized-dark (暗色)

特性： Solarized 的暗色版本，精心调校的对比度。

配置：

{
  bg: '#002b36',
  fg: '#268bd2'
}

最佳用途：

• 长篇文档阅读
• 科学论文
• 编程教材

---

one-dark (暗色)

特性： Atom 编辑器的经典 One Dark 主题。

配置：

{
  bg: '#282c34',
  fg: '自动推导'
}

最佳用途：

• Atom 用户
• JavaScript 项目
• Web 开发文档

---

自定义主题

基础自定义（Mono Mode）

只需要两种颜色就能创建美观的主题：

python render_mermaid.py \
  --input diagram.mmd \
  --output output.svg \
  --bg '#0f0f0f' \
  --fg '#e0e0e0'

系统会自动推导所有其他颜色。

高级自定义（Enriched Mode）

对于更丰富的颜色方案，提供可选的强调色：

python render_mermaid.py \
  --input diagram.mmd \
  --output output.svg \
  --bg '#0f0f0f' \
  --fg '#e0e0e0' \
  --accent '#ff6b6b' \
  --muted '#666666' \
  --line '#4a90e2' \
  --surface '#1a1a1a' \
  --border '#2a2a2a'

颜色选择指南

---

主题选择决策树

你想要的主题风格是什么？
├── 亮色 (Light)
│   ├── 极简/清洁？ → zinc-light
│   ├── GitHub 风格？ → github-light
│   ├── Solarized？ → solarized-light
│   ├── 冰蓝色？ → nord-light
│   ├── 紫色？ → catppuccin-latte
│   └── 柔和日式？ → tokyo-night-light
│
└── 暗色 (Dark)
    ├── 推荐通用？ → tokyo-night ⭐
    ├── 经典暗色？ → dracula ⭐
    ├── 极简/纯粹？ → zinc-dark
    ├── 北欧风格？ → nord
    ├── 温暖舒适？ → catppuccin-mocha
    ├── GitHub 风格？ → github-dark
    ├── 极深背景？ → tokyo-night-storm
    ├── 学术/精确？ → solarized-dark
    └── Atom 风格？ → one-dark

---

实用示例

示例 1：在中文文档中使用 Tokyo Night

python render_mermaid.py \
  --input 架构图.mmd \
  --output 架构图.svg \
  --theme tokyo-night

示例 2：创建打印友好的图表

python render_mermaid.py \
  --input diagram.mmd \
  --output diagram.svg \
  --theme zinc-light

示例 3：批量应用主题

python batch_render.py \
  --input-dir ./diagrams \
  --output-dir ./output \
  --format svg \
  --theme dracula

示例 4：自定义企业主题

python render_mermaid.py \
  --input diagram.mmd \
  --output output.svg \
  --bg '#1a1a1a' \
  --fg '#ffffff' \
  --accent '#0066cc' \
  --border '#333333'

---

颜色值速查表

常用十六进制颜色

---

常见问题

Q: 我应该使用哪个主题？ A: 如果不确定，推荐使用 tokyo-night（暗色）或 zinc-light（亮色）。

Q: 如何为 GitHub README 选择主题？ A: 使用 github-light 或 github-dark，与 GitHub 的主题相匹配。

Q: 我能混合多个主题的颜色吗？ A: 可以，使用 Enriched Mode 自定义任意颜色组合。

Q: 主题是否支持透明背景？ A: 支持，添加 --transparent 标志。

Q: 如何在 AI 聊天中推荐主题给用户？ A: 根据项目类型：开发项目→Tokyo Night，企业→Nord，打印→Zinc Light。