agentsclimarketplace
Sign in

Architecture visualization

Skill devjarus/coding-agent/skills/general/architecture-visualization

Turn a system description — or a real codebase — into a polished, self-contained HTML/SVG diagram (architecture, workflow, sequence, data-flow, or lifecycle) via a typed JSON IR that is validated and rendered. Use when asked to visualize, diagram, or draw a system's architecture, request flow, or component topology. Inspired by archify.From its SKILL.md

Install
npx -y skills add devjarus/coding-agent --skill architecture-visualization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.3 KB, as published. Nobody here has run it

Architecture Visualization

Generate beautiful architecture, workflow, sequence, data-flow, and lifecycle diagrams from plain-English descriptions or from a real codebase. Inspired by archify: instead of hand-editing final SVG or fragile Mermaid markup, you author a typed JSON intermediate representation (IR), a validator checks it, and a renderer emits a zero-dependency HTML file with a light/dark theme toggle and PNG export.

When to use

  • "Visualize / diagram / draw the architecture of this system."
  • "Show me the request flow / auth sequence / data pipeline."
  • Producing the diagram that backs a docs/architecture.md or docs/dataflow.md (the committed doc set keeps its ASCII diagram; this skill adds a richer, exportable visual alongside it — see ${CLAUDE_PLUGIN_ROOT}/skills/practices/project-docs/SKILL.md).
  • Any time a picture communicates a topology or flow better than prose.

The pipeline (do not skip steps)

describe/read → author IR (JSON) → validate → render → verify → iterate on the IR

  1. Author the IR. Write a .json file matching rules/ir-schema.md. Pick the type that fits:

    typeUse for
    architectureSystem components, cloud resources, DBs, boundaries
    workflowRequest lifecycles, approval flows, CI/CD pipelines
    sequenceAPI call chains, cache fallback, auth flows (ordered messages)
    dataflowETL pipelines, PII isolation, warehouse sync
    lifecycleState machines, task progression, retry paths

  2. Validate + render with the bundled script (stdlib Python, no installs):

    python3 "${CLAUDE_PLUGIN_ROOT}/skills/general/architecture-visualization/scripts/render.py" \
  diagram.json -o diagram.html

    Validate without rendering while drafting: add --check.

  3. Verify. The renderer prints the canvas size and warns on degenerate or oversized layouts. Open the HTML (or SendUserFile it) to confirm it reads cleanly. If nodes overlap or the graph is too wide, adjust the IR — don't edit the HTML.

  4. Iterate on the IR, never the output. Re-run the renderer after each change.

Grounding the IR in a real codebase

When visualizing an existing project rather than a description:

  • Derive nodes from real modules/services — read package.json, go.mod, docker-compose.yml, route files, and the .coding-agent/ architecture doc if present. Don't invent components.
  • Derive edges from actual calls: imports, HTTP clients, DB connections, queue producers/consumers.
  • Use groups for real boundaries (VPC, service, package, tier).
  • Set tech to the real stack slug (postgres, redis, aws.lambda, react, go) so the diagram carries information, not decoration.

Authoring guidance

  • Declare nodes in flow order. Layered layout ranks nodes by longest path; ordering them source→sink yields the cleanest columns/rows.
  • One diagram, one story. If a diagram exceeds ~15 nodes or the renderer warns about size, split it (e.g. one high-level architecture + one detailed sequence).
  • dashed edges for optional/async/cache/fallback paths.
  • sequence edges are ordered — they render top-to-bottom in array order.
  • Set a real title — it names the header and the exported PNG file.

Output

A single self-contained .html file:

  • Inline SVG, no external requests (safe to open offline or attach).
  • Theme toggle (button or T); follows prefers-color-scheme, persists choice.
  • PNG export at 2× / 4× (button or E) — no upsampling blur.

Deliver it with SendUserFile (display: "render") so the user sees it inline.

Reference

  • IR schema + field tables: rules/ir-schema.md
  • Worked examples: examples/architecture.json, examples/sequence.json
  • Renderer: scripts/render.py (--check to validate only)

Keep looking

Skills are one crate of 626,474. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.