360 Secure SkillHub
360 安全技能中心

pretty-mermaid

提供 Mermaid 图表生成流程：可经 npm 安装的 mermaid-cli（mmdc）或随附 Python 脚本，按指定图表类型与主题生成流程图、时序图、甘特图、类图、状态图、ER 图等，输出 PNG、SVG、PDF 或 HTML 文件，并支持背景色、字体、节点与连线样式等自定义选项。

caowen2211891
caowen2211891
热度 62.28
最近更新 2026-05-11 17:33:20
分类：创作依赖：代码执行 / 读写文件 / 联网浏览搜索应用场景：图像生成 / 模板 / 工作流

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add pretty-mermaid
Metadata
name
pretty-mermaid
description
Generate beautiful Mermaid.js diagrams with custom styling and themes. Create flowcharts, sequence diagrams, Gantt charts, class diagrams, etc. with enhanced visual appeal.

Follow these steps to create beautiful Mermaid diagrams with custom styling.

1) Check Dependencies

This skill uses Mermaid.js and optionally Puppeteer for image generation.

# Install Node.js packages if needed
npm install -g @mermaid-js/mermaid-cli

2) Basic Diagram Generation

Create a simple Mermaid diagram:

# Create a basic flowchart
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

# Generate PNG
mmdc -i diagram.mmd -o diagram.png

3) Using Bundled Scripts

Use the bundled Python script for enhanced diagram generation:

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

Quick examples:

# Generate a flowchart with theme
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type flowchart --output flowchart.png --theme forest

# Generate a sequence diagram
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type sequence --output sequence.png --theme dark

# Generate a Gantt chart
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type gantt --output gantt.png --theme neutral

# Generate a class diagram
python3 skills/pretty-mermaid/scripts/mermaid-gen.py --type class --output class.png --theme default

4) Custom Styling Options

The script supports:

  • Themes: default, forest, dark, neutral
  • Background colors: Custom background colors
  • Font styles: Custom font families and sizes
  • Node styling: Custom shapes, colors, borders
  • Edge styling: Custom line styles, colors, widths

Example with custom styling:

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) Diagram Types Supported

  1. Flowchart: Flow diagrams, process flows
  2. Sequence: Sequence diagrams, UML sequence
  3. Gantt: Gantt charts, project timelines
  4. Class: Class diagrams, UML class
  5. State: State diagrams, state machines
  6. Entity Relationship: ER diagrams
  7. User Journey: User journey maps
  8. Pie: Pie charts
  9. Quadrant: Quadrant charts
  10. Requirement: Requirement diagrams

6) Advanced Features

  • Interactive diagrams: Generate HTML with interactive elements
  • Multiple outputs: Generate PNG, SVG, PDF, HTML from same source
  • Template system: Use predefined templates for common diagrams
  • Auto-layout: Automatic layout optimization
  • Export options: Multiple export formats and resolutions

7) Using mermaid-cli Directly

For advanced usage, use mermaid-cli directly:

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

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

# Generate with custom CSS
mmdc -i input.mmd -o output.png -C custom.css

8) Templates and Examples

Check the examples/ directory for:

  • Common diagram templates
  • Styling examples
  • Configuration files
  • Sample outputs

9) Quick Reference

  • Default theme: default
  • Default format: PNG
  • Default size: 800x600
  • Auto-scaling: Enabled by default
  • Background: White (#ffffff)
  • Font: Arial, sans-serif