# ericblue/visual-explainer-skill architecture

> Architecture diagram of the GitHub repository ericblue/visual-explainer-skill, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ericblue/visual-explainer-skill
- Repository: https://github.com/ericblue/visual-explainer-skill
- Video tour (about a minute): https://gitdiagram.com/ericblue/visual-explainer-skill/video

## Overview

Visual Explainer is a Claude Code skill for turning supplied content into generated visual explanations. The documented workflow is content intake, structured analysis, style-specific prompt construction, and image generation. The README also describes Mermaid conversion, multi-frame output, mockup controls, and OpenAI/Gemini backends. No source excerpts were provided, so implementation-level wiring is limited to documented relationships; skill behavior is attributed to the existing skill document.

Main entry points: [`skill/visual-explainer.md`](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md) (Claude Code Skill)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Content Workflow"]
  node_skill["Claude Code Skill"]
  node_content["Source Content"]
  node_analysis["Content Analysis"]
  node_prompt["Prompt Templates"]
  node_mermaid["Mermaid Conversion"]
end

subgraph group_styles["Visual Formats"]
  node_styles["Style Families"]
  node_draw["Draw-Level Control"]
  node_frames["Multi-Frame Mode"]
  node_mockup["Mockup Controls"]
end

subgraph group_generation["Image Generation"]
  node_openai{{"OpenAI Image API"}}
  node_gemini{{"Gemini Image API"}}
  node_visual["Generated Visual"]
end

node_user(("User"))

node_user -->|"invokes"| node_skill
node_user -->|"supplies"| node_content
node_skill -->|"analyzes"| node_analysis
node_analysis -->|"informs"| node_prompt
node_prompt -->|"uses templates"| node_styles
node_skill -->|"converts Mermaid"| node_mermaid
node_styles -->|"supports control"| node_draw
node_styles -->|"supports mode"| node_frames
node_styles -->|"supports controls"| node_mockup
node_skill -->|"generates image"| node_openai
node_skill -.->|"generates image"| node_gemini
node_openai -->|"returns image"| node_visual
node_gemini -.->|"returns image"| node_visual

click node_skill "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_analysis "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_prompt "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_mermaid "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_styles "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_draw "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_frames "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"
click node_mockup "https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_content,node_analysis,node_prompt,node_mermaid,node_user toneBlue
class node_styles,node_draw,node_frames,node_mockup toneAmber
class node_openai,node_gemini,node_visual toneMint
```

## Components

### Content Workflow

- [Claude Code Skill](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- **Source Content**
- [Content Analysis](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- [Prompt Templates](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- [Mermaid Conversion](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`

### Visual Formats

- [Style Families](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- [Draw-Level Control](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- [Multi-Frame Mode](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`
- [Mockup Controls](https://github.com/ericblue/visual-explainer-skill/blob/main/skill/visual-explainer.md): `skill/visual-explainer.md`

### Image Generation

- **OpenAI Image API**
- **Gemini Image API**
- **Generated Visual**

### Other components

- **User**

## Connections

- User → Claude Code Skill: invokes
- User → Source Content: supplies
- Claude Code Skill → Content Analysis: analyzes
- Content Analysis → Prompt Templates: informs
- Prompt Templates → Style Families: uses templates
- Claude Code Skill → Mermaid Conversion: converts Mermaid
- Style Families → Draw-Level Control: supports control
- Style Families → Multi-Frame Mode: supports mode
- Style Families → Mockup Controls: supports controls
- Claude Code Skill → OpenAI Image API: generates image
- Claude Code Skill → Gemini Image API: generates image
- OpenAI Image API → Generated Visual: returns image
- Gemini Image API → Generated Visual: returns image