Diagram Generator Skill

Diagram Generator Skill

Purpose

Convert ASCII diagrams in markdown files to clean, professional PNG images using Mermaid.

Activation

• "Visualize this diagram"
• "Make this ASCII diagram a PNG"
• "Generate a diagram from this"
• When user shares ASCII art representing a workflow or process

Workflow

1. Parse ASCII Diagram

Identify the diagram type from the ASCII structure:

2. Convert to Mermaid Syntax

Transform ASCII elements to Mermaid:

ASCII: A → B → C
Mermaid: A --> B --> C

ASCII: A → B
        ↓
        C
Mermaid: A --> B
         B --> C

ASCII: [Box Label]
Mermaid: A[Box Label]

ASCII: (Rounded)
Mermaid: A(Rounded)

ASCII: {Decision}
Mermaid: A{Decision}

3. Generate PNG

Use Mermaid CLI to render:

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

# Generate PNG
mmdc -i diagram.mmd -o diagram.png -b transparent -t neutral

4. Output Location

Save to same directory as source file, or if from a brief:

docs/strategic/diagrams/[brief-name]-[diagram-name].png

Example Conversion

Input (ASCII)

Filing Docs → Skill → Generated Config → CLI Apply → Export Applied Config → Automated Eval → Human Eval → Sign Off
                                                            ↓                       ↓              ↓
                                                   product-viewer export      Metrics Report  Discrepancy Log
                                                                                    ↓              ↓
                                                                          If FAIL: Skill Refinement ←←←←←←

Output (Mermaid)

flowchart LR
    subgraph Input
        A[Filing Docs]
    end

    subgraph Generation
        B[Skill]
        C[Generated Config]
    end

    subgraph Application
        D[CLI Apply]
        E[Export Applied Config]
        F[product-viewer export]
    end

    subgraph Evaluation
        G[Automated Eval]
        H[Metrics Report]
        I[Human Eval]
        J[Discrepancy Log]
    end

    subgraph Output
        K[Sign Off]
    end

    A --> B --> C --> D --> E
    E --> F
    E --> G --> H
    G --> I --> J
    I --> K

    H -.->|If FAIL| B
    J -.->|If FAIL| B

Render Command

mmdc -i eval-workflow.mmd -o eval-workflow.png -b white -t neutral -w 1200

Mermaid CLI Options

Style Guidelines

• Use subgraphs to group related steps
• Solid arrows (-->) for main flow
• Dashed arrows (-.->) for feedback loops or conditional paths
• Keep node labels concise (2-4 words)
• Use consistent node shapes within a diagram

Troubleshooting

Mermaid CLI not found:

npm install -g @mermaid-js/mermaid-cli

Puppeteer issues on Mac:

npx puppeteer browsers install chrome

Diagram too wide:

• Use flowchart TD instead of LR
• Break into multiple subgraphs
• Reduce node label length