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
Что это?Skill для агентов, который превращает обсуждение архитектуры в исследуемый изометрический атлас: один файл данных создаёт и интерактивную HTML-карту, и сгенерированный текстовый двойник SYSTEM.md.
Это отдельное приложение или то, что использует мой кодинг-агент?Это agent skill в стиле Claude (SKILL.md плюс скрипт сборки и HTML-шаблон), который ваш агент вызывает во время беседы, а не отдельное приложение, которое вы запускаете сами.
Как его установить и вызвать?Установите через skills CLI в Claude Code, Cursor, Copilot, Codex, Gemini, Cline или Amp либо вручную скопируйте skills/system-atlas/ в каталог skills вашего агента (например, ~/.claude/skills/system-atlas/). Вызывается простым запросом в чате, например «сделай мне атлас этого пайплайна».
Нужна ли система сборки или runtime-зависимости, чтобы смотреть атлас?Нет. Отрисованная карта — это единственный самодостаточный HTML-файл без этапа сборки и runtime-зависимостей; data.mjs обрабатывается build.mjs (запускается инструментами в стиле Node) для его создания, а раздаётся он так же просто, как npx serve или python3 -m http.server.
Что будет, если дизайн изменится после построения атласа?Атлас остаётся точным, только если вы пересобираете и заново публикуете его после каждого изменения; устаревший непересобранный атлас прямо называется хуже, чем отсутствие атласа вообще.
Кто решает, куда коммитить сгенерированный атлас и SYSTEM.md?Это зависит от собственной политики репозитория по документации (docs/ или /atlas/ для репозиториев, коммитящих дизайн-документы, git-игнорируемая черновая папка для репозиториев, хранящих только ADR и глоссарий), и skill явно спрашивает, прежде чем что-либо коммитить.
Как он не даёт диаграмме и документации разойтись?И интерактивная карта, и SYSTEM.md генерируются build.mjs из одного-единственного файла data.mjs, поэтому существует ровно одно место, где дизайн может быть ошибочным, и одно изменение обновляет оба представления.
Что такое главы с прогрессивным раскрытием?Вместо показа всей системы сразу каждая глава раскрывает не более трёх новых структур и один небольшой поток данных, затрагивая только уже виденное, а финальная глава показывает всё с выбором потока.
Как отслеживаются открытые вопросы дизайна?Каждый открытый вопрос получает стабильный Q-ID и состояние (открыт, решён с ответом и датой или передан на именованный следующий шаг), чтобы раунды обратной связи не теряли, о чём спрашивалось.
Можно изучить потоки данных, показанные на карте?Да, движущиеся точки на карте представляют реальные запросы; клик по точке открывает панель с её маршрутом и репрезентативной полезной нагрузкой JSON.
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