architecture-treemap

Render a self-contained HTML treemap visualizing a codebase's architectural model with metrics and coupling edges.

1|Updated Nov 20, 2025
One-click install
npx skills add https://github.com/tony-zhelonkin/scio --skill architecture-treemap-tony-zhelonkin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-treemap
Source: https://github.com/tony-zhelonkin/scio/tree/main/skills/architecture-treemap
Command: npx skills add https://github.com/tony-zhelonkin/scio --skill architecture-treemap-tony-zhelonkin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires radon, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Architecture audits produce judgment-heavy findings that are hard to communicate to stakeholders who were not in the room. This Skill turns an existing components.json architectural model into a single self-contained HTML treemap that opens as a file:// page with no server, making component size, classification, metrics, and coupling edges legible at a glance. ## Core Features & Use Cases - Deterministic rendering: Converts a validated components.json manifest into a D3-based treemap with components sized by LOC and colored by core/seam/removable classification, refusing to render on schema failure. - Metric badges and provenance: Displays deterministic metrics (LOC, fan-in/out, cyclomatic complexity, 90-day churn, test ratio) alongside epistemic-source chips so readers can distinguish measured facts from judgment calls. - Coupling edge visualization: Renders statically detected edges as solid lines and audit-asserted edges as dashed lines, with import cycles detected via Tarjan SCC. - Use Case: After running a retrospective architecture audit on a Python codebase, render the synthesized components.json into a treemap.html and email it to architects and stakeholders to defend an OSS-core boundary or prioritize prune candidates. ## Quick Start Render the bundled golden fixture by running the render_treemap.py script against references/example/components.json and open the resulting HTML file in a browser.

Frequently Asked Questions about architecture-treemap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize a codebase architecture as a treemap?▼

Run the render_treemap.py script with a valid components.json manifest to produce a self-contained treemap.html file. The output opens directly as a file:// page with D3 inlined, requiring no server or network access.

What is the difference between architecture-treemap and a Mermaid diagram tool?▼

The treemap renders a whole-repository architectural model with metrics and coupling edges for retrospective audits. Mermaid diagram tools render per-feature design diagrams from design artifacts, which is a different scope and purpose.

Does the treemap renderer produce the architectural model itself?▼

No, it only renders an existing components.json manifest. The model must be produced first by running the deterministic components extraction followed by the judgment-based audit-slice and synthesize-audit stages.

Why does the renderer refuse to render my components.json file?▼

The renderer validates the manifest against components.schema.json before rendering and refuses on schema failure to avoid half-rendered output. Run validate_components.py with --strict to see the specific schema errors.

When should I not use an architecture treemap audit?▼

Do not use it to scope new features, since a full audit costs roughly 1M tokens and is a quarterly retrospective instrument. For prospective feature scoping, use a cheaper mapping command instead.