美图Mermaid

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