Install Node.js packages if needed

---

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:

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

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:

9) Quick Reference