Interactive hierarchical flow diagrams with drill-down navigation
npx claudepluginhub texmeijin/layered-flow-chartCreate, update, and refine interactive hierarchical flow diagrams with drill-down navigation
TeXmeijinA Claude Code plugin that helps humans understand large codebases fast.
Claude generates an interactive single-file HTML that displays an abstract processing flow as Layer 0. Click any module to deep dive into progressively concrete layers. Unlike traditional UML tools like Mermaid that can only represent a single level of detail, readers can freely navigate between abstraction levels. The output is plain HTML/JS, so it works directly with Git. No more drowning in AI-generated code you can't follow.
View the interactive demo — a URL Shortener architecture visualized with hierarchical layers.
h j k l navigate, o open, y yank (copy), q closey key or click the copy buttonclaude plugin marketplace add TeXmeijin/layered-flow-chart
claude plugin install layered-flow-chart
Copy the skills/layered-flow-chart/ directory to ~/.claude/skills/.
Simply ask Claude Code to create a flow diagram:
> Make a flow diagram of the authentication module
> Create a layered flow chart of the order processing pipeline
> この機能の処理フロー図を作って
The skill automatically:
> Update the flow chart to reflect the latest code changes
> フロー図を最新のコードに合わせて更新して
> Add boundary connections to the flow chart
> Improve the layout and add more detail to the API layer
> フロー図のレイアウトを改善して
The examples/ directory contains a sample Next.js URL Shortener app with:
The live demo is the flow chart generated from this example app.
MIT