pretty-mermaid

Generate beautiful Mermaid.js diagrams with custom styling and themes. Create flowcharts, sequence diagrams, Gantt charts, class diagrams, etc. with enhanced...

Security Scan

The skill's files, instructions, and install steps are consistent with a Mermaid diagram generator and do not request unrelated credentials or suspicious access.

Purpose & Capability

Name/description (Mermaid diagram generation) matches the provided scripts and examples. The skill bundles an installation script and a Python wrapper that invoke mermaid-cli (mmdc) to produce images/HTML, which is exactly what the skill claims to do.

Instruction Scope

SKILL.md tells the agent to install and use mermaid-cli and to run the included Python script. The runtime instructions reference only local files, temporary files, and mermaid-cli; they do not attempt to read unrelated system files or environment variables. The generated HTML references an external CDN (jsdelivr) for Mermaid — expected for interactive output but worth noting.

Install Mechanism

There is no platform install spec in the registry metadata, but the repo includes scripts/install.sh which performs a global npm install -g @mermaid-js/mermaid-cli. Installing a global npm package modifies the host environment and requires npm/node present; this is expected for a mermaid-based tool but is higher-impact than a purely local/portable install.

Credentials

The skill declares no required environment variables, configuration paths, or credentials. The included code does not attempt to access credentials or other environment variables beyond typical runtime inspection (temporary files, subprocess).

Persistence & Privilege

The skill does not request always:true, nor does it attempt to modify other skills or system-wide config. Its install script installs a global npm binary (mmdc), which is normal for this functionality but not a persistent privileged agent modification.

Assessment

This skill appears coherent for creating Mermaid diagrams. Things to consider before installing: (1) install.sh runs npm install -g @mermaid-js/mermaid-cli — global npm installs modify your environment and require trust in the mermaid-cli package; consider installing in a controlled environment or using a node version manager. (2) The generated interactive HTML loads Mermaid from jsdelivr CDN — if you need fully offline or air-gapped generation, prefer PNG/SVG generation via a local mmdc/Puppeteer install. (3) Review the Python script if you plan to run it on sensitive systems (it invokes subprocesses and creates temporary files, which is normal here). If you are comfortable with these tradeoffs, the skill is internally consistent with its stated purpose.

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