# danshapiro/skill-flowchart architecture

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

- Interactive diagram: https://gitdiagram.com/danshapiro/skill-flowchart
- Repository: https://github.com/danshapiro/skill-flowchart

## Overview

Flowchart is an AI-agent skill that turns a codebase, workflow, or prompt pipeline into a hierarchical interactive HTML diagram. The main path is request → agent analysis and composition → JSON model → renderer and HTML shell → interactive artifact. The README documents optional browser-based visual QA and key diagram features; source excerpts are partial, so internal HTML interactions are represented only at the documented capability level.

Main entry points: [`scripts/render_flowchart.py`](https://github.com/danshapiro/skill-flowchart/blob/main/scripts/render_flowchart.py) (JSON Renderer), [`scripts/lint_flowchart_html.js`](https://github.com/danshapiro/skill-flowchart/blob/main/scripts/lint_flowchart_html.js) (Browser QA Linter), [`SKILL.md`](https://github.com/danshapiro/skill-flowchart/blob/main/SKILL.md) (Workflow Instructions), [`references/composition-guide.md`](https://github.com/danshapiro/skill-flowchart/blob/main/references/composition-guide.md) (Composition Guidance)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_skill["Agent Skill"]
  node_agent["Coding Agent"]
  node_skillguide["Workflow Instructions<br/>[SKILL.md]"]
  node_composition["Composition Guidance"]
  node_schema["Data Model<br/>[data-model.md]"]
end

subgraph group_render["Rendering"]
  node_renderer["JSON Renderer"]
  node_template["HTML Shell"]
end

subgraph group_experience["Diagram Experience"]
  node_overview["Sparse Overview"]
  node_drilldown["Modal Drilldown"]
  node_prompts["Prompt Inspection"]
  node_flowlogic["Branches And Loops"]
end

subgraph group_qa["Visual QA"]
  node_linter["Browser QA Linter"]
end

node_user(("Requester"))
node_flowdata["Flowchart JSON"]
node_html["Interactive HTML"]
node_cdn["Visualization Libraries"]
node_browser["Playwright Browser"]
node_screenshots["QA Screenshots"]

node_user -->|"requests a flowchart"| node_agent
node_agent -->|"follows workflow"| node_skillguide
node_agent -->|"uses layout guidance"| node_composition
node_agent -->|"uses data schema"| node_schema
node_agent -->|"composes hierarchy"| node_flowdata
node_flowdata -->|"provides JSON input"| node_renderer
node_renderer -->|"loads HTML shell"| node_template
node_renderer -->|"renders HTML"| node_html
node_html -->|"presents overview"| node_overview
node_html -->|"opens node details"| node_drilldown
node_html -->|"shows prompt details"| node_prompts
node_html -->|"visualizes control flow"| node_flowlogic
node_html -.->|"loads libraries"| node_cdn
node_html -.->|"can be checked by"| node_linter
node_linter -.->|"runs browser checks"| node_browser
node_linter -.->|"captures screenshots"| node_screenshots
node_screenshots -.->|"supports visual review"| node_agent

click node_skillguide "https://github.com/danshapiro/skill-flowchart/blob/main/SKILL.md"
click node_composition "https://github.com/danshapiro/skill-flowchart/blob/main/references/composition-guide.md"
click node_schema "https://github.com/danshapiro/skill-flowchart/blob/main/references/data-model.md"
click node_renderer "https://github.com/danshapiro/skill-flowchart/blob/main/scripts/render_flowchart.py"
click node_template "https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html"
click node_overview "https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html"
click node_drilldown "https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html"
click node_prompts "https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html"
click node_flowlogic "https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html"
click node_linter "https://github.com/danshapiro/skill-flowchart/blob/main/scripts/lint_flowchart_html.js"

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_agent,node_skillguide,node_composition,node_schema,node_browser,node_screenshots toneBlue
class node_renderer,node_template toneAmber
class node_overview,node_drilldown,node_prompts,node_flowlogic,node_user toneMint
class node_linter toneRose
class node_flowdata,node_html,node_cdn toneIndigo
```

## Components

### Agent Skill

- **Coding Agent**
- [Workflow Instructions](https://github.com/danshapiro/skill-flowchart/blob/main/SKILL.md): `SKILL.md`
- [Composition Guidance](https://github.com/danshapiro/skill-flowchart/blob/main/references/composition-guide.md): `references/composition-guide.md`
- [Data Model](https://github.com/danshapiro/skill-flowchart/blob/main/references/data-model.md): `references/data-model.md`

### Rendering

- [JSON Renderer](https://github.com/danshapiro/skill-flowchart/blob/main/scripts/render_flowchart.py): `scripts/render_flowchart.py`
- [HTML Shell](https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html): `assets/flowchart-template.html`

### Diagram Experience

- [Sparse Overview](https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html): `assets/flowchart-template.html`
- [Modal Drilldown](https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html): `assets/flowchart-template.html`
- [Prompt Inspection](https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html): `assets/flowchart-template.html`
- [Branches And Loops](https://github.com/danshapiro/skill-flowchart/blob/main/assets/flowchart-template.html): `assets/flowchart-template.html`

### Visual QA

- [Browser QA Linter](https://github.com/danshapiro/skill-flowchart/blob/main/scripts/lint_flowchart_html.js): `scripts/lint_flowchart_html.js`

### Other components

- **Requester**
- **Flowchart JSON**
- **Interactive HTML**
- **Visualization Libraries**
- **Playwright Browser**
- **QA Screenshots**

## Connections

- Requester → Coding Agent: requests a flowchart
- Coding Agent → Workflow Instructions: follows workflow
- Coding Agent → Composition Guidance: uses layout guidance
- Coding Agent → Data Model: uses data schema
- Coding Agent → Flowchart JSON: composes hierarchy
- Flowchart JSON → JSON Renderer: provides JSON input
- JSON Renderer → HTML Shell: loads HTML shell
- JSON Renderer → Interactive HTML: renders HTML
- Interactive HTML → Sparse Overview: presents overview
- Interactive HTML → Modal Drilldown: opens node details
- Interactive HTML → Prompt Inspection: shows prompt details
- Interactive HTML → Branches And Loops: visualizes control flow
- Interactive HTML → Visualization Libraries: loads libraries
- Interactive HTML → Browser QA Linter: can be checked by
- Browser QA Linter → Playwright Browser: runs browser checks
- Browser QA Linter → QA Screenshots: captures screenshots
- QA Screenshots → Coding Agent: supports visual review