rafaelolsr

Archflow — Development skill for Claude Code

Development community

Claude Code skill that turns any codebase into an animated HTML architecture diagram.

How to install Archflow

This entry records only its repository, not the path inside it, so there is no exact command to give. Open rafaelolsr/archflow and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Archflow does

Claude Code skill that turns any codebase into an animated HTML architecture diagram.

Alternatives in Development

Petdex — A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and 4k ★
Diagram 2.3k ★
Evo — turns your codebase into an autoresearch loop — discovers what to measure, instruments the benchmark, then run 1.4k ★

README

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