system-atlas README

The project's README from github.com/inkboard/system-atlas. As one markdown file: README.md.

System Atlas

An agent skill that turns an architecture discussion into something you can click around.

A walkthrough of a real system atlas

Above: a real atlas of a production agent system, built with this skill — chapters reveal the system a few structures at a time, hovering reads a structure, and going inside one shows its steps in execution.

skills.sh

npx skills add inkboard/system-atlas

Why

Architecture discussions produce decisions, questions, and vocabulary faster than any one document can hold, and the person you are discussing with wants to see the system, not read it. So you draw a diagram, and a week later the diagram is a lie. An atlas fixes the shape of that problem rather than the diagram: one data file in the repo is the single source, and it renders two views that always agree — an interactive isometric map you explore with a mouse, and a generated text twin (SYSTEM.md) that carries the decisions table, every structure, the flows, and every open question by stable ID. The map is what you put in front of a person; the text is what the repo and your next session read; because both are generated from the same file, updating the design is one edit and a rebuild, and there is exactly one place where the system can be wrong.

What you get

Using it

Ask for one in plain language. The skill triggers on things like:

"make me an atlas of this pipeline" "map the system so we can talk about it" "I want a diagram I can click around and poke holes in" "walk me through how this fits together" "update the atlas — we dropped the nightly job and picked a different vendor"

Then the agent works in this order:

  1. Read the inputs before drawing — the vision doc, the repo's real surfaces, the framework's docs. Boxes that don't map to something real are worse than no boxes.
  2. Discuss before drawing — propose the structure in chat, mapped to the runtime's actual primitives, and ask only the questions it cannot derive from the repo.
  3. Build the first atlas, then cut it into chapters — the first version is always "hard to parse"; progressive disclosure is the fix, and it is the default here.
  4. Generate the text twin and keep the glossary (CONTEXT.md) and ADRs beside it.
  5. Run feedback rounds by question ID — record the person's actual words, resolve with a date, and sweep every file after a rejection. A banner on a stale section is not enough.
  6. Rebuild and republish after every change. An atlas that is out of date is worse than no atlas.

How it works

<atlas home>/data.mjs          ← the only file you edit
<atlas home>/build.mjs         ← bun build.mjs
<atlas home>/template.html     ← the renderer
        ↓
   atlas.html   +   SYSTEM.md  ← both generated, never hand-edited

data.mjs holds the structures (position, footprint, role shape, prose, steps, questions), the flows as hop lists with payloads, the chapters with what each reveals, and the decisions. build.mjs writes both views from it. assets/data.example.mjs is a working starter with every field documented — copy it, fill it in, run the build, and you have an atlas.

Where the atlas lives depends on your repo's docs policy. Repos that commit design docs can keep it at docs/<system>/atlas/; repos that deliberately commit only ADRs and a glossary should keep it in a git-ignored scratch directory and attach the generated SYSTEM.md to the spec issue instead. The skill asks before committing anything.

The map is a single self-contained HTML file, so publishing it is whatever the person can open: a hosted HTML artifact if your agent can publish one, a static server (npx serve, python3 -m http.server), or your repo's pages host. The rule is one URL, republished in place.

What's in the repo

Path What it is
skills/system-atlas/SKILL.md The skill: when to use it, the process, what done looks like
skills/system-atlas/assets/template.html The atlas renderer
skills/system-atlas/assets/build.mjs data.mjs → atlas.html + SYSTEM.md
skills/system-atlas/assets/data.example.mjs Documented starter data — copy to data.mjs
skills/system-atlas/references/design-language.md Layout, palette, isometric grammar, role shapes, copy rules, the chapter recipe
skills/system-atlas/references/process-and-lessons.md How the first session went, the subagent deep-dive pattern, and the things that bit
skills/system-atlas/evals/evals.json Three eval prompts: a new atlas, an update, and a small greenfield one

Installing

The skills CLI installs into Claude Code, Cursor, Copilot, Codex, Gemini, Cline, Amp and others:

npx skills add inkboard/system-atlas

Or drop skills/system-atlas/ into your agent's skills directory by hand — for Claude Code that is ~/.claude/skills/system-atlas/ (personal) or .claude/skills/system-atlas/ (per project).

Credits

The visual grammar takes after the "codebase as interactive isometric diagram" style — khaki paper, black hatched structures, an index on the left, a reading panel on the right, and data packets you can catch. The process rules are the corrections from a real design session, kept in the order they were earned.

License

MIT — see LICENSE.

system-atlas (inkboard/system-atlas)

Searching Database…

438 ·GitHub
System-atlas
What is this?An agent skill that turns an architecture discussion into an explorable isometric atlas: one data file produces both an interactive HTML map and a generated SYSTEM.md text twin.
Is this a standalone app or something my coding agent uses?It is a Claude-style agent skill (SKILL.md plus a build script and HTML template) that your agent invokes during a conversation, not a standalone application you run yourself.
How do I install and trigger it?Install with the skills CLI into Claude Code, Cursor, Copilot, Codex, Gemini, Cline or Amp, or manually copy skills/system-atlas/ into your agent's skills directory (e.g. ~/.claude/skills/system-atlas/). You trigger it by just asking in chat, e.g. 'make me an atlas of this pipeline.'
Do I need a build system or any runtime dependencies to view the atlas?No. The rendered map is a single self-contained HTML file with no build step and no runtime dependencies; data.mjs is processed by build.mjs (run with Node-style tooling) to produce it, and serving it is as simple as npx serve or python3 -m http.server.
What happens if the design changes after the atlas is built?The atlas only stays accurate if you rebuild and republish after every change; a stale, unrebuilt atlas is explicitly called out as worse than having no atlas at all.
Who decides where the generated atlas and SYSTEM.md get committed?That depends on the repo's own docs policy (docs/ or /atlas/ for repos that commit design docs, a git-ignored scratch dir for repos that only keep ADRs and a glossary), and the skill explicitly asks before committing anything.
How does it keep the diagram and the documentation from drifting apart?Both the interactive map and SYSTEM.md are generated from the same single data.mjs file by build.mjs, so there is exactly one place the design can be wrong and one edit updates both views.
What is progressive-disclosure chapters?Instead of showing the whole system at once, each chapter reveals at most three new structures and a small data flow touching only what you've already seen, with a final chapter showing everything with a flow picker.
How are open design questions tracked?Every open question gets a stable Q-ID and a state (open, resolved with answer and date, or routed to a named next step), so feedback rounds don't lose track of what was asked.
Can I inspect the data flows shown on the map?Yes, the moving dots on the map represent real requests; clicking one opens a panel showing its route and a representative JSON payload.
What are similar projects?architecture-diagram-generator, live-panel-skill, answer-me-with-html, axton-obsidian-visual-skills, drawio-skill, dashi-ppt-skill, archify, draw-architecture
Which topics is it in?diagramming, diagram, system-design, architecture, agent-skill, visualization, skill, documentation, html, claude, markdown, ai-agent
Creator
inkboard
Size
13.1 MB
Stars
438
Updated
CommitSep 01
Age
1mo
Commits · 90 Days