system-atlas

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

System Atlas

系统架构图谱

An atlas is one data file that renders two views: an interactive isometric map (a single self-contained HTML file), and a generated text twin (

SYSTEM.md

) with the decisions table, every structure, the flows, and the open questions by ID. The data file is the only thing anyone edits; both views rebuild from it. It sits beside a hand-written glossary (

CONTEXT.md

) and ADRs.

The reason for this shape: an architecture discussion produces 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. The map is for them; the text twin is for the repo and for you next session; the single source is what keeps the two honest.

This skill was distilled from building a real agent-architecture atlas across one long design session and several rounds of feedback. The user's corrections from that session are the rules below;

references/process-and-lessons.md

has the story.

图谱是一个数据文件，可渲染两种视图：交互式等距地图（单个独立HTML文件），以及生成的文本孪生文件（

SYSTEM.md

），其中包含决策表、所有结构、数据流和按ID分类的未解决问题。数据文件是唯一需要编辑的内容；两种视图均基于它重新生成。它与手写术语表（

CONTEXT.md

）和ADR（架构决策记录）放在一起。

采用这种形式的原因：架构讨论产生决策、问题和术语的速度远超单一文档的承载能力，而讨论对象更希望可视化系统，而非阅读文字。地图面向讨论对象；文本孪生文件用于仓库存档和后续会话；单一数据源确保两者内容一致。

此技能源自一次漫长的设计会话及多轮反馈中构建真实Agent架构图谱的经验。用户在该会话中的修正形成了以下规则；

references/process-and-lessons.md

记录了相关过程。

When to reach for it — and when not

适用场景与不适用场景

Use it when the system is new enough that vocabulary, decisions, and questions are still moving, and there will be more than one feedback round. Don't use it for a finished system that only needs a README, or for one diagram in a PR.

当系统尚处于初期，术语、决策和问题仍在变化，且需要多轮反馈时，使用此工具。不要将其用于仅需README的已完成系统，或PR中的单一图表。

Process

流程

Follow the order — each step was earned by a correction the first time round.

Read the inputs before drawing. The vision doc, the repo's existing surfaces, and whatever prior art the user allows (ask — they may forbid a branch or a source). If you will build on a framework, read its docs first; hand long docs to a subagent with your specific design questions and have it return a primer with gotchas and a "what it does not give us" list. Drawing before this produces boxes that don't map to anything real.
Discuss before drawing. Propose the structure in chat, mapped to the runtime's real primitives, and ask only the questions you cannot derive from the repo. Take defaults for the rest and say which. Ask as plain chat text.
First atlas — the whole system. Copy
```
assets/
```
into the atlas home (
```
template.html
```
,
```
build.mjs
```
, and
```
data.example.mjs
```
renamed to
```
data.mjs
```
), fill the data, build, publish. Where the atlas home is depends on the repo's docs policy. Some repos commit design docs freely — then
```
docs/<system>/atlas/
```
in-tree is right. Other repos deliberately commit only ADRs and
```
CONTEXT.md
```
, with specs and evidence going to the issue tracker instead; in that case put the atlas,
```
SYSTEM.md
```
and
```
research/
```
in a git-ignored scratch directory and attach
```
SYSTEM.md
```
plus the research to the spec issue as comments when the spec is published, keeping only
```
docs/<system>/adr/
```
and
```
docs/<system>/CONTEXT.md
```
in-tree. Ask which policy applies before committing anything. Learned the hard way: committing the whole set produced a 3,900-line docs PR and four review rounds reconciling three restatements of one design — with ADRs plus a glossary only, there is one place to be consistent. If your agent has a design-guidance skill for HTML artifacts, load it before touching the template; read
```
references/design-language.md
```
for the visual rules either way.
Progressive disclosure. A whole system at once reads as noise ("hard to parse" was the first correction). Ten-ish chapters; each adds at most three structures and runs one small flow that only touches revealed structures; the last chapter shows everything with a flow picker. Unrevealed structures stay in the index, dimmed, with their chapter number. Panels are summary-first: one sentence, then Read more and Steps folded.
Shapes and labels. Letters on boxes are not enough ("better box shapes/labelling" was the second correction). Give each role a shape and put a readable name label on the canvas under every structure — see design-language.
Text twin.
```
CONTEXT.md
```
is a glossary and nothing else (domain-model format: the nouns, one line each); ADRs only for decisions that are hard to reverse, surprising without context, and the result of a real trade-off — these two are the in-tree pieces.
```
SYSTEM.md
```
is generated and
```
research/
```
holds evidence; both live with the atlas (scratch dir or
```
docs/
```
, per step 3). Don't open issues unless asked.
Feedback by question ID. Every question is
```
Q-<code><n>
```
with a state: open (a string), resolved
```
{q, r}
```
(answer + date), or routed
```
{q, to}
```
(handed to a named next step such as a deep dive). Record the user's words. If they call something "not a question", drop it; if they say "I don't get this", explain with a concrete example before resolving. After each round: rebuild, republish, update memory.
Deep dives feed back. Research with subagents against one shared brief (the interface we own, the requirements that separate candidates, a usage model for cost, a fixed deliverable shape). Write a synthesis with a normalized cost/fit grid. Fold resolutions into the data as
```
{q, r: '… (from the deep dive, date)'}
```
. If the user rejects a proposal, sweep every file and rewrite — a banner on top of a stale section is not enough; they will find it.
Keep it current. "The atlas is great for me — but not if it's not up to date." One source, rebuild and republish after every change, never hand-edit generated files, and leave a
```
README.md
```
in the docs folder explaining the set (table in process-and-lessons).

请按顺序执行——每一步都源自首次尝试时得到的修正。

绘图前先阅读输入内容。阅读愿景文档、仓库现有内容，以及用户允许的任何已有成果（需询问——用户可能禁止使用某分支或来源）。如果将基于某个框架构建，先阅读其文档；将长篇文档交给子Agent（subagent）并提出具体设计问题，让它返回包含注意事项和“框架无法提供的功能”列表的入门内容。未完成此步骤就绘图会导致生成的模块与实际内容不匹配。
绘图前先讨论。在聊天中提出与运行时实际原语对应的结构方案，仅询问无法从仓库中推导的问题。其余内容采用默认值并说明哪些是默认值。用普通聊天文本提问。
首个图谱——完整系统。将
```
assets/
```
目录复制到图谱主目录（
```
template.html
```
、
```
build.mjs
```
，以及重命名为
```
data.mjs
```
的
```
data.example.mjs
```
），填充数据，构建并发布。图谱主目录的位置取决于仓库的文档政策。有些仓库允许自由提交设计文档——此时应放在仓库内的
```
docs/<system>/atlas/
```
目录。其他仓库仅允许提交ADR和
```
CONTEXT.md
```
，规格说明和证据需提交至问题追踪器；这种情况下，将图谱、
```
SYSTEM.md
```
和
```
research/
```
目录放在Git忽略的临时目录中，当规格发布时，将
```
SYSTEM.md
```
和研究内容作为评论附加到规格问题中，仅将
```
docs/<system>/adr/
```
和
```
docs/<system>/CONTEXT.md
```
保留在仓库内。提交任何内容前先询问适用哪种政策。这是惨痛教训：提交整套内容会产生一个3900行的文档PR，以及四轮审查来协调同一设计的三种表述——而仅保留ADR和术语表时，只需在一处保持一致性。如果你的Agent具备HTML制品的设计指导技能，在修改模板前加载该技能；无论如何，请阅读
```
references/design-language.md
```
了解视觉规则。
渐进式披露一次性展示完整系统会显得杂乱无章（首次修正意见是“难以解析”）。分为约10个章节；每个章节最多添加3个结构，并运行一个仅涉及已披露结构的小型数据流；最后一个章节展示所有内容并提供数据流选择器。未披露的结构仍会留在索引中，呈灰色显示，并标注其所在章节编号。面板采用摘要优先的形式：先显示一句话，然后折叠“了解更多”和“步骤”内容。
形状与标签仅在模块上标注字母是不够的（第二次修正意见是“优化模块形状/标签”）。为每个角色分配一种形状，并在画布上每个结构下方添加可读名称标签——详见设计语言文档。
文本孪生文件
```
CONTEXT.md
```
仅作为术语表（领域模型格式：每个名词占一行）；ADR仅用于难以撤销、缺乏上下文时会令人惊讶、且是实际权衡结果的决策——这两个是仓库内的文件。
```
SYSTEM.md
```
是生成的文件，
```
research/
```
目录存放证据；两者均与图谱放在一起（临时目录或
```
docs/
```
目录，见步骤3）。除非被要求，否则不要创建问题。
按问题ID追踪反馈每个问题采用
```
Q-<code><n>
```
格式，并标记状态：未解决（字符串）、已解决
```
{q, r}
```
（答案+日期）或已转办
```
{q, to}
```
（移交至指定下一步，例如深入研究）。记录用户的原话。如果用户认为某内容“不是问题”，则删除；如果用户说“我不理解这个”，先通过具体示例解释，再标记为已解决。每轮反馈后：重新构建、重新发布、更新记忆。
深入研究的反馈整合与子Agent基于同一共享任务进行研究（我们负责的接口、区分候选方案的需求、成本使用模型、固定交付物形式）。撰写包含标准化成本/适配网格的综合报告。将解决方案整合到数据中，格式为
```
{q, r: '… (来自深入研究，日期)'}
```
。如果用户拒绝某个提案，彻底重写所有文件——在过时章节顶部添加横幅是不够的；用户会发现它。
保持内容更新“这个图谱对我很有用——但前提是内容要及时更新。”使用单一数据源，每次变更后重新构建并发布，绝不手动编辑生成的文件，并在文档目录中留下
```
README.md
```
说明整套内容（详见process-and-lessons中的表格）。

Publishing the map

发布地图

atlas.html

is one self-contained file — no build step, no external assets beyond a Google Fonts stylesheet. Publish it whichever way the person can actually open:

If your agent can publish a hosted HTML artifact, publish it there and keep the URL stable across rebuilds; put it in
```
META.artifactUrl
```
so the generated
```
SYSTEM.md
```
links to it.
Otherwise serve the folder with any static server (
```
npx serve
```
,
```
python3 -m http.server
```
) and hand over the local URL, or commit the file and let the repo's pages host serve it.

Either way the rule is the same: one URL, republished after every data change, never a second copy.

atlas.html

是单个独立文件——无需构建步骤，除Google Fonts样式表外无外部资源。采用对方能实际打开的方式发布：

如果你的Agent可以托管HTML制品，将其发布在那里并保持URL稳定，跨多次构建不变；将URL填入
```
META.artifactUrl
```
，以便生成的
```
SYSTEM.md
```
能链接到它。
否则，使用任何静态服务器（
```
npx serve
```
、
```
python3 -m http.server
```
）托管该目录，并提供本地URL，或者提交该文件，由仓库的Pages服务托管。

无论哪种方式，规则相同：一个URL，每次数据变更后重新发布，绝不创建副本。

What done looks like

完成标准

<atlas home>/data.mjs

exists and is the only edited source;

node <atlas home>/build.mjs

writes

SYSTEM.md

and

atlas.html

without error.

The atlas is published at a stable URL and republished there after every data change.
Every structure has
```
one
```
,
```
what
```
,
```
how
```
, a
```
short
```
label, a role
```
kind
```
, and its questions; ghosts are marked; chapters exist with per-chapter flows; the last chapter is the whole system.
```
SYSTEM.md
```
carries the decisions table, the question index with IDs and states, and the "how this file is maintained" footer.
Project memory records the atlas URL, docs paths, locked decisions with dates, what the user rejected and why, and the next step.

```
<atlas home>/data.mjs
```
存在且是唯一需要编辑的源文件；运行
```
node <atlas home>/build.mjs
```
可无错误生成
```
SYSTEM.md
```
和
```
atlas.html
```
。
图谱发布在稳定URL上，每次数据变更后重新发布。
每个结构都包含
```
one
```
、
```
what
```
、
```
how
```
、
```
short
```
标签、角色
```
kind
```
及其相关问题；标记幽灵结构；存在带每章数据流的章节；最后一章展示完整系统。
```
SYSTEM.md
```
包含决策表、带ID和状态的问题索引，以及“此文件维护方式”页脚。
项目记忆记录图谱URL、文档路径、带日期的锁定决策、用户拒绝的内容及原因，以及下一步计划。

Verify before publishing

发布前验证

Syntax-check the built script (

new Function(js)

), then look at it: serve the folder with a static server and open it in a real browser —

file://

renders as a static snapshot in some in-app browsers and the fonts may not load. Resize to ~1280×800 and screenshot a first chapter, a middle chapter, the last chapter, an inside view, and the light theme. Keep

<meta charset="utf-8">

at the top of the template or arrows render as mojibake. After every decision, grep the outputs for the stale words (

pending

, the old model name, the rejected design) — the person reads everything.

对构建后的脚本进行语法检查（

new Function(js)

），然后查看效果：用静态服务器托管目录并在真实浏览器中打开——部分内置浏览器中

file://

协议会渲染为静态快照，且字体可能无法加载。调整窗口大小至约1280×800，截取第一章、中间某章、最后一章、内部视图和浅色主题的截图。确保模板顶部保留

<meta charset="utf-8">

，否则箭头会显示为乱码。每次决策后，在输出内容中搜索过时词汇（

pending

、旧模型名称、被拒绝的设计）——用户会阅读所有内容。

Files in this skill

此技能包含的文件

```
assets/template.html
```
— the atlas renderer (title and top-strip stats injected at build)

assets/build.mjs

—

data.mjs

→

atlas.html

SYSTEM.md

```
assets/data.example.mjs
```
— a minimal starter with every field documented; copy to
```
data.mjs
```
```
references/design-language.md
```
— layout, palette, isometric grammar, shapes by role, labels, copy rules, the chapter recipe
```
references/process-and-lessons.md
```
— the first session step by step, the README table, the subagent deep-dive pattern, cost-model habits, things that bit

```
assets/template.html
```
—— 图谱渲染器（标题和顶部栏统计信息在构建时注入）

assets/build.mjs

—— 将

data.mjs

转换为

atlas.html

SYSTEM.md

的构建脚本

```
assets/data.example.mjs
```
—— 包含所有字段说明的最小启动模板；复制为
```
data.mjs
```
使用
```
references/design-language.md
```
—— 布局、调色板、等距语法、按角色划分的形状、标签、文案规则、章节制作指南
```
references/process-and-lessons.md
```
—— 首次会话的分步记录、README表格、子Agent深入研究模式、成本模型习惯、遇到的问题",