Evidence on the card.
A node can cite the file and line it came from. Select it and the inspector shows where.
Every layer of your stack, on one map.
Interactive system diagrams your coding agent writes, as one offline HTML file.
npx skills add omsimos/stackmapWorks with Claude Code, Cursor, Codex and other coding agents.
stackmap › Architecture
Commerce API
Architecture11 nodes · 11 connectionsData tier
Storefront
Next.js
Mobile app
iOS · Android
Edge gateway
Public routing
Auth
Sessions · JWT
shop-api
REST API
Stripe
Payments
Redis cache
Hot reads
Orders DB
PostgreSQL
Order events
Async queue
Orders worker
Background jobs
Receipts
Object storage
This is the real viewer, cut down to one diagram. Every control works.
How it works
Ask your agent. One file comes back.
The agent writes a small typed diagram.json. stackmap checks it, lays it out and delivers a viewer you can open anywhere.
~/commerce-api
Make an architecture diagram of this repository, backed by evidence from the code.Write.stackmap/commerce-api/diagram.json11 nodes · 11 connections · 2 viewsRunstackmap validate diagram.jsonerror refs/unknown-node /edges/6/to Unknown node "orders-db" fix: use "orders" fix: add node "orders-db" or remove the edge✗ 1 errorEditdiagram.json /edges/6/to → "orders"Runstackmap validate diagram.json✓ valid: no diagnosticsRunstackmap deliver diagram.jsondelivered .stackmap/commerce-api/diagram.html · sha256 0a6f2ce5f590… · 500770 bytes
Five kinds
One checkout, five ways to draw it.
Pick the kind that answers the question. Each has its own layout, and every one plays its flow.
Storefront
Next.js
Edge gateway
Public routing
shop-api
REST API
Stripe
Payments
Orders DB
PostgreSQL
Order events
Async queue
Components and what they call.
Laid out by ELK, left to right or top down.
Sixteen diagrams, from release pipelines to maps a coding agent wrote from one request.
See the examplesBuilt to be checked
Made to be checked, and easy to share.
Every card can cite its source, the same JSON always builds the same file, and that file opens anywhere.
No coordinates.
The agent names nodes, connections, groups and views. ELK lays out architecture and dataflow; stackmap lays out lanes and lifelines.
The same bytes, every time.
deliver is deterministic: the same diagram.json always gives the same diagram.html.
One file, and the link keeps the view.
No server, no account, nothing to install to open it. The URL keeps the view, selection, route and playback.
Every layer of your stack, on one map.
Interactive system diagrams your coding agent writes, as one offline HTML file.
Install the skill into your agent
npx skills add omsimos/stackmapThen ask
Make an architecture diagram of this repository, backed by evidence from the code.
Or run the CLI on its own, with Node 22.12 or later: it turns any diagram.json into diagram.html beside it.
npx @omsimos/stackmap@0.4.0 deliver diagram.json