How danshapiro/skill-flowchart works
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: render_flowchart.py JSON Renderer · lint_flowchart_html.js Browser QA Linter · SKILL.md Workflow Instructions · composition-guide.md Composition Guidance
Components 17
Agent Skill
- Coding Agent
- Workflow Instructions
SKILL.md - Composition Guidance
references/composition-guide.md - Data Model
references/data-model.md
Rendering
- JSON Renderer
scripts/render_flowchart.py - HTML Shell
assets/flowchart-template.html
Diagram Experience
- Sparse Overview
assets/flowchart-template.html - Modal Drilldown
assets/flowchart-template.html - Prompt Inspection
assets/flowchart-template.html - Branches And Loops
assets/flowchart-template.html
Visual QA
- Browser QA Linter
scripts/lint_flowchart_html.js
Other components
- Requester
- Flowchart JSON
- Interactive HTML
- Visualization Libraries
- Playwright Browser
- QA Screenshots
Connections 17
- 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