Archflow — Development skill for Claude Code

**A Claude Code plugin that turns any codebase into an animated HTML architecture diagram.**

Ask Claude to explain a system architecture. Instead of a wall of text or ASCII art, it reads your codebase, identifies the real components and flows, and generates a self-contained animated HTML file you open in any browser.

/archflow:archflow

---

What it produces

A single `architecture-diagram.html` file — no server, no dependencies, just open in a browser.

The diagram animates through the key phases of a typical request flowing through your system, lighting up components and arrows at each step. Real names from your code — actual class names, module paths, method names, and external service names — not generic placeholder boxes.

Layouts

System type	Layout
API / RAG / request-response	Horizontal pipeline
Multi-agent / ReAct loops	Multi-agent hub with parallel workers
ETL / Databricks / Delta Live Tables	Medallion pipeline

---

Why

Every coding agent defaults to text when you ask for an architecture explanation. Bullet points, nested lists, prose paragraphs. It works for trivial cases but anything beyond a 3-component system becomes hard to follow.

Diagrams are better. But asking an agent to "draw a diagram" usually gets you Mermaid syntax that doesn't render, ASCII art that breaks on resize, or a generic boxes-and-arrows template with no real names from your code.

archflow fixes that. It reads the actual code first, builds a mental model of the system, then generates a polished animated HTML diagram using real component names, real s