图解的基本功：SVG 与 Mermaid
一图胜千言的工程版：Mermaid 起草、SVG 定稿，把图解固化进页面。
学习证据 学完后，怎么核对？
把学习结果留在一个可以回看、可以复做的动作里；这一区只写学生能自己检查的证据。
如何核对
- 匿名结构草稿与固化 SVG
- 在线或本地路径与上传范围记录
适用边界
在线 Mermaid 编辑器可能处理或保存输入；先核对账号年龄、学校政策与上传规则，只提交匿名结构词。含个人或未公开内容时改用纸笔或本地工具，定稿固化为本地 SVG。
最后复核
这是内容复核日期，不是学习截止日期。
讲
例子一张糊掉的截图，和满站不糊的图
阿哲的项目页需要一张「探究循环」流程图。他在画图软件里拼了一张，截图贴进页面：放大就糊、白底和深色主题打架、想改一个词还得回去重截重贴。而你在这个站里读过的每一张结构图——课程树、时间轴、三拍循环——放大四倍不糊、跟着主题换色、文字还能选中复制。区别只有一个：那些图不是图片，是写在页面里的代码。
名词两件工具：SVG＝用文本标签描述的矢量图，圆、线、字都是代码，浏览器现场画出来；Mermaid＝用几行缩进文本描述「谁指向谁」、自动排成流程图的画图语言（免费开源，在线编辑器就能用）。
定义图解两步工作流：Mermaid 起草，SVG 定稿
画一张好图的功夫分两步，各用各的介质：① 起草用 Mermaid——只写「谁指向谁」，不管坐标和像素，改一个词全图自动重排，三分钟能换五版结构；② 定稿固化成内联 SVG——结构想清了，手画或让编程智能体把定稿转成 SVG 标签，直接贴进页面：
你正在看的这张工作流图，本身就是一段内联 SVG——右键查看源代码就能读到它。
起草长这样——五行文本就是一张流程图：
flowchart TD 问题 --> 假设 假设 --> 小实验 小实验 --> 结论 结论 --> 新问题 新问题 --> 假设
定稿长这样——图就是标签，标签就能吃你页面的 CSS 变量：
<svg viewBox="0 0 220 70">
<rect x="10" y="15" width="90" height="40" rx="9"
fill="none" stroke="var(--ac)"/>
<text x="55" y="40" text-anchor="middle">问题</text>
<line x1="100" y1="35" x2="150" y2="35" stroke="var(--ac)"/>
</svg>
| 阶段 | 用什么 | 为什么 |
|---|---|---|
| ① 起草 | Mermaid：几行文本写「谁指向谁」 | 改起来贱——结构没定时，重排零成本 |
| ② 定稿 | 内联 SVG：标签写进页面 | 用起来稳——零依赖、能配色、放大不糊 |
泛化换个角度：先草后固，是一切创作的通式
作文先提纲后成文，建筑先草图后施工图，作曲先哼旋律后写总谱——起草的介质要「改起来贱」，定稿的介质要「用起来稳」，两头用错就两头受罪：拿定稿介质想结构，改不动；拿草稿介质交成品，靠不住。还有一层：图解是论证的另一种写法——一张图先想清「谁指向谁」；箭头画不出来，多半是因果还没想清。画图卡住的地方，往往正是思考卡住的地方。
例
补充三例——两个常见用法，一个易错。
小北要画「我的学习方法」结构图。第一版 Mermaid 画成一条直线，看着不对；改成环（复习指回预习），顺了；再把「刷题」从主环挪成支线——三分钟改了五版，每版只是改几行文本。结构定稿后，她才让智能体转成内联 SVG、颜色一律用页面变量。要是一上来就抠像素，改到第二版就心疼得不敢动了。
朵朵给历史小报要一条时间轴，直接交任务单：「内联 SVG 时间轴，五个节点；约束：颜色只用 var(--ac) 这类页面变量、文字要可选中、不许引任何外部图片和库；验收：放大 400% 不糊、换主题跟着变色。」智能体一稿过。图解的活，约束和验收恰恰最好写——上一课的三拍、上上课的任务单，全用上了。
大鹏图省事，直接在页面里挂了在线 Mermaid 渲染库，让浏览器每次打开现画。结果断网后外部库加载失败，图区一片空白；页面还平白多了几百 KB。错在哪：把起草间的工具当成了页面的行李——库是画图时用的，不是读者看图时该背的。修法：起草归起草、定稿归定稿，进页面的是固化后的 SVG 文本，仓库资源不依赖外网，并在本地 HTTP 预览中验收。
做
流程图定稿了，放进页面的最佳形态是哪种？
- 选你 studio 里最需要一张图的地方（项目流程、页面结构都行），用 Mermaid 起草——在线编辑器或让智能体出草稿均可，至少改两版结构再定稿。
- 把定稿交给编程智能体固化：任务单约束写「内联 SVG、颜色用 CSS 变量、文字可选中、零外部依赖」。
- 三项验收：放大 400% 不糊；改页面配色图跟着变；断网后通过项目 HTTP 预览，index.html 里的图照常显示。
- git 拍快照，说明写「首张固化图解」。
怎么算过关：页面源代码里是 <svg> 标签（不是 <img>、不是运行时库）；三项验收全过；能说出图里最关键的那根箭头为什么这么指。
卡
图解两步工作流是什么？为什么定稿不用截图、不挂库？
Mermaid 起草（文本描述谁指向谁，改字就重排）→ 固化成内联 SVG 进页面。截图放大糊、配不了主题色；挂库让页面背依赖、断网翻车——内联 SVG 零依赖、能配色、放大不糊。
- 起草介质要改起来贱（Mermaid），定稿介质要用起来稳（内联 SVG）。
- 库是起草间的工具，不是页面的行李——进页面的永远是固化后的文本。
- 箭头画不出来＝因果没想清：图解卡住处，就是思考卡住处。