# Diagram Generator Skill

> Diagram Generator Skill

- Skill: `jas0nnguyen/diagram-generator-skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jas0nnguyen/diagram-generator-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jas0nnguyen/diagram-generator-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jas0nnguyen (https://skillmd.com/u/jas0nnguyen)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jas0nnguyen/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:

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

```
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:
```
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)

```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