How a figure gets read

“Show the inside” is three different drawings.「把里面画出来」是三种不同的图。

Cut it open and you get adjacency and thickness, at the cost of seeing only the plane you cut. Make the shell see-through and you get how many parts there are and how they sit, at the cost of everywhere they overlap. Pull it apart and you get order and reversibility, at the cost of the real adjacency the first one showed. Picking without noticing you were picking is how a figure ends up careful and unhelpful at the same time.切开，得到的是相邻和厚度，代价是只看得见你切的那个平面。把外壳变透明，得到的是里面有几个、怎么摆，代价是所有重叠的地方。拆开，得到的是顺序和可逆性，代价是第一种画法展示的那些真实相邻关系。在没意识到自己在选的情况下选了一种——图就是这样变成既仔细又帮不上忙的。

three ways, three costs三种画法，三种代价 See-through is the one to reach for least, and the reason is on the figure: it is the only one of the three whose failure is quiet. A section that is wrong looks wrong. An exploded view that is wrong looks wrong. Two overlapping parts merging into a shape that was never there looks like a shape.三种里最该少用的是透视，理由就在图上：它是唯一一种失败得很安静的。剖面画错了看得出来，爆炸图画错了也看得出来；而两个重叠的件合成一个本来不存在的形状，看起来就只是一个形状。

the question comes first先有问题，才有画法

You do not pick a drawing, you pick a question你挑的不是画法，是问题

What is next to what and how thick → cut it. How many and where → make it see-through. What order and can it come apart → pull it apart. A figure that tries to answer all three grows ghost outlines and stray axes, and the reader stops trusting the parts that were right.谁挨着谁、多厚 → 切开。有几个、在哪 → 透视。什么顺序、拆不拆得开 → 拆开。想一张图答完三个问题，它就会长出幽灵轮廓和多余的装配轴，而读者会连原本对的那部分也一起不再相信。

Keep the picture still. Move the highlight.让图不动，让高亮动。

The instinct with a dense figure is to redraw it for each step, showing only what matters this time. It backfires: the reader has to locate the structure again in every panel, and by the third one they have stopped reading carefully and started skimming. Lock every coordinate instead, paint everything neutral, and let one row come forward. Now nothing has to be re-parsed and the difference is the only thing moving.面对一张很密的图，本能是每一步重画一次，只画这次要紧的部分。结果适得其反：读者在每一格里都要重新定位这个结构，到第三格就已经从「读」切换成「扫」了。改成把每一个坐标都锁死、其余全部画成中性，只让一行站出来。这时没有东西需要重新解析，唯一还在动的就是那个差别。

one array, three steps一片阵列，三步 The dashed box in the first panel is doing the other half of the job. “Page” is a word the reader will nod at and not locate; pinning it onto the physical structure the first time it appears is what turns it into something they can point at later.第一格那个虚线框干的是另一半活。「页」是一个读者会点头、但不会去定位的词；在它第一次出现时就把它钉在物理结构上，才让它变成之后能被指出来的东西。

every panel is redrawn from scratch每一格都重画一遍

Then the reader spends their attention on re-finding the structure instead of on the change, which is the one thing you brought them here for. Identical coordinates cost nothing and buy all of that attention back.那读者的注意力就花在重新找结构上，而不是花在那个变化上——而变化才是你把他带到这里的唯一理由。坐标一致不花任何代价，却把这份注意力全买回来了。

everything is coloured什么都上了色

Then nothing is. Neutral is a deliberate choice: it is the ground the highlighted thing stands out from. A figure where every element carries a colour has spent its whole budget before the first step.那就等于什么都没上色。中性是刻意的选择：它是被高亮的东西赖以站出来的那个背景。每个元素都带颜色的图，在第一步之前就已经把预算花光了。

a third highlight colour appears出现了第三种高亮色

Two layers — a row and a column — is the working limit. A third means the material wants a second figure, and adding the colour instead is how a figure quietly stops working while still looking busy.两层——一行加一列——是实际的上限。出现第三层，说明内容想要第二张图；这时选择加颜色而不是拆图，图就在看起来很充实的同时悄悄失效了。

Hand over the control — but leave a complete figure behind if nobody takes it.把控制权交出去 —— 但没人接手时，留下的也得是一张完整的图。

An interactive figure is the strongest form here and the only one that can fail invisibly. The screenshot gate captures exactly one state: whatever the figure looks like before anybody clicks. If that state is empty, every mechanical check still passes and the page ships a blank box. The failure direction is “let through”, which is the expensive direction, so this one is not left to good intentions — it is a machine check.交互图是这里最强的一种形式，也是唯一一种能悄无声息失败的。截图检查只会拍到一个状态：这张图在任何人点击之前长什么样。如果那个状态是空的，所有机器检查照样全绿，页面就带着一个空盒子发出去了。坏的方向是「放过」，而这是最贵的方向——所以这一条不交给自觉，它是一道机器检查。

the driver fills a descriptor · still just memory writes — the engine has not been told anything yet

one base picture, four steps Four panels on identical coordinates; the reader drives which one is showing. Only the part the step is about is coloured, everything else stays neutral, so nothing has to be re-found between clicks. Step 1 is the default and is a complete figure on its own — with scripting off, that is what the page shows, and it is also what any screenshot captures.

the check behind this figure这张图背后的那道检查

interactive-figure-blank-defaultinteractive-figure-blank-default

It fires as an error when a figure has controls and every panel is hidden before interaction, and as a warning when all of them are showing at once, which is what you get when the script has not run. It was written before this figure was drawn, and it was mutation-tested: a fixture with every panel hidden goes red, a compliant one stays green, and removing the fix turns the compliant one red again. A check nobody has watched fail is not yet a check.一张图带控件、而交互之前所有面板都隐藏时，它报 error；所有面板同时显示时报 warn——后者正是脚本没跑起来时的样子。这道检查是在画这张图之前先写的，而且做过变异测试：全隐藏的夹具会变红、合规的保持绿、把补丁撤掉合规的那个立刻变红。一道没人看着它红过的检查，还算不上检查。

Sometimes the notation wins, and the honest thing is to say which times.有时候文字记号赢，诚实的做法是说清哪些时候。

A railroad diagram beats grammar notation on exactly three questions — may I leave this out, may I repeat it, which of these do I pick — because each answer becomes a different shape rather than a different bracket. It loses badly on recursion: notation states that a term contains an expression in one line, while the picture can only point back at an earlier track and hope. A page that only ever argues for pictures is selling something.铁路图在恰好三个问题上赢过文法记号——能不能省、能不能重复、要在几个里挑哪个——因为每个答案变成了一种不同的形状，而不是一种不同的括号。它在递归上输得很惨：记号一行就能说清 term 里含 expr，图只能指回上面那条轨，然后指望读者跟得上。一个页面如果永远只替图说话，那它在推销东西。

grammar as a path把文法走成一条路 One rule carries the whole notation: any path you can walk from the start ring to the end ring is legal. That is also why it must never be given diamonds or condition labels — there are no decisions in it, and adding the furniture of a flowchart turns it into a flowchart that happens to be wrong.一条规则撑起整套记号：从起点环走到终点环，走得通的路径就是合法的。这也是为什么绝不能给它加菱形或者条件标签——它里面根本没有决策，把流程图那套家具搬进来，它就变成一张碰巧画错的流程图。

Your figure will be screenshotted and sent to somebody who has not read the page.你的图会被截屏，发给一个没读过这个页面的人。

That is the normal fate of a good figure, and almost none of ours survive it. The page had been quietly supplying four things: a title saying what the figure is, one line saying what it answers, a source with a date, and the limits. Strip the page away and all four go with it, leaving a picture that looks authoritative and cannot be acted on. A figure meant to travel has to carry its own four.这是一张好图的正常命运，而我们的图几乎没有一张扛得住。页面一直在悄悄替它提供四样东西：一个说清它是什么的标题、一句说清它答什么的话、带日期的出处、以及边界。把页面拿走，这四样一起没了，剩下一张看起来很权威、但没法据以行动的图。要出门的图，这四样得自己带。

a card that travels alone一张能自己出门的卡 The test is worth running on any figure you are about to ship: screenshot it, send it to somebody who was not in the conversation, and see whether they can act on it. This card is built to pass — including the line about what it does not do, which is the part that gets left off most often and the part that stops a reader treating it as a complete answer.这道检验值得对任何一张准备发出去的图跑一遍：截图，发给一个没参与过讨论的人，看他能不能据此做事。这张卡是照着通过它做的——包括那行「它不管什么」，那是最常被省掉的一部分，也是让读者不会把它当成完整答案的那一部分。

why this is the last section为什么把这一节放在最后

Everything above only matters if the figure is still readable when it leaves上面那些，只有在图离开页面之后仍然读得懂时才算数

The other four sections improve a figure in place, on a page you control, next to prose you wrote. This one is about the version of it that ends up in a chat window at 2am with none of that. If a figure only works in its original setting, most of the work put into it never reaches anybody.前面四节改善的是图在原地的样子——在你能控制的页面上，紧挨着你自己写的正文。这一节讲的是它最后出现在凌晨两点某个聊天窗口里、上述一样都不在的那个版本。一张只在原生环境里成立的图，投进去的功夫大部分没有到达任何人。