请按以下步骤创建具有自定义样式的精美 Mermaid 图表。

1) 检查依赖项

该技能使用 Mermaid.js，并可选 Puppeteer 生成图像。

# 如需，安装 Node.js 包
npm install -g @mermaid-js/mermaid-cli

2) 基础图表生成

创建一个简单的 Mermaid 图表：

# 创建基础流程图
cat > diagram.mmd << 'EOF'
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
EOF

# 生成 PNG
mmdc -i diagram.mmd -o diagram.png

3) 使用内置脚本

使用内置的 Python 脚本实现增强型图表生成：

python3 skills/pretty-mermaid/scripts/mermaid-gen.py --help

快速示例：

# 生成带主题的流程图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type flowchart --output flowchart.png --theme forest

# 生成时序图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type sequence --output sequence.png --theme dark

# 生成甘特图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type gantt --output gantt.png --theme neutral

# 生成类图
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type class --output class.png --theme default

4) 自定义样式选项

该脚本支持以下功能：

• 主题：default、forest、dark、neutral
• 背景色：支持自定义背景颜色
• 字体样式：支持自定义字体族与字号
• 节点样式：支持自定义形状、颜色与边框
• 边样式：支持自定义线条样式、颜色与宽度

含自定义样式的示例：

python3 skills/pretty-mermaid/scripts/mermaid-gen.py 
  --type flowchart 
  --output custom.png 
  --theme custom 
  --background "#f8f9fa" 
  --font-family "Arial, sans-serif" 
  --node-color "#1a73e8" 
  --edge-color "#5f6368"

5) 支持的图表类型

1. Flowchart：流程图、业务流程图
2. Sequence：时序图（UML Sequence Diagram）
3. Gantt：甘特图、项目时间线
4. Class：类图（UML Class Diagram）
5. State：状态图、状态机图
6. Entity Relationship：实体关系图（ER Diagram）
7. User Journey：用户旅程图（User Journey Map）
8. Pie：饼图
9. Quadrant：象限图
10. Requirement：需求图

6) 高级功能

• 交互式图表：生成包含交互元素的 HTML
• 多格式输出：基于同一源文件生成 PNG、SVG、PDF 和 HTML
• 模板系统：为常用图表提供预定义模板
• 自动布局：自动优化图表布局
• 导出选项：支持多种导出格式与分辨率设置

7) 直接使用 mermaid-cli

如需高级用法，可直接调用 mermaid-cli：

# 生成 SVG
mmdc -i input.mmd -o output.svg -t forest -b transparent

# 生成 PDF
mmdc -i input.mmd -o output.pdf -t dark

# 使用自定义 CSS 生成
mmdc -i input.mmd -o output.png -C custom.css

8) 模板与示例

请查看 examples/ 目录，其中包含：

• 常用图表模板
• 样式示例
• 配置文件
• 示例输出

9) 快速参考

• 默认主题：default
• 默认格式：PNG
• 默认尺寸：800×600
• 自动缩放：默认启用
• 背景色：白色（#ffffff）
• 字体：Arial, sans-serif