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:

ASCII Pattern	Mermaid Type
`→` arrows in sequence	`flowchart LR` (left to right)
`↓` arrows vertically	`flowchart TD` (top down)
Boxes with connections	`flowchart`
Timeline/phases	`flowchart LR` with subgraphs
Decision points	`flowchart` with diamond nodes

2. Convert to Mermaid Syntax

Transform ASCII elements to Mermaid:

code

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:

bash

# 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:

code

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

Example Conversion

Input (ASCII)

code

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)

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

bash

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

Mermaid CLI Options

Option	Description	Recommended
`-b`	Background color	`white` or `transparent`
`-t`	Theme	`neutral` for docs
`-w`	Width in pixels	`1200` for wide diagrams
`-H`	Height in pixels	Auto if omitted
`-s`	Scale factor	`2` for high-res

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:

bash

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

Puppeteer issues on Mac:

bash

npx puppeteer browsers install chrome

Diagram too wide:

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