用 Layer Stack 画出真正的分层架构diagram-design 分层堆叠图的编辑级规范与实现【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design分层堆叠图Layer Stack是架构表达中最朴素也最容易画砸的一种无非几根横条叠在一起但没有规范的堆叠图会沦为五彩便签墙。diagram-design 项目用skills/diagram-design/references/type-layers.md这份类型规范把分层图收敛成一套可复制、可校验的编辑级语法——横向通栏、三栏行内排版、单点珊瑚焦点、左侧方向轴4–6 层封顶。读完本文你将掌握该规范的完整布局约定、反模式清单以及如何基于仓库内的三套示例与几何校验脚本生成一张既有技术密度又符合编辑审美的分层堆叠图。一、什么时候该用 Layer Stacktype-layers.md开头就给出了适用场景的明确清单OSI 模型、CSS 级联、上下文层级context hierarchy、技术栈tech stack、抽象层次abstraction layers、内存层级memory hierarchy。这类内容的共同特征是每一行代表一个抽象级别行与行之间存在严格的次序关系从底层到顶层或反向且读者关心的是堆了哪些层、层与层如何衔接而不是谁依赖谁或流程如何流转。与之容易混淆的是另外两种类型规范里用一句话做了切割层级不具备真正包含/管辖关系时不要用 Layer Stack——改用Swimlane泳道表达跨职能的交接或Architecture架构表达组件与连接。参考 type-swimlane.md 与 type-architecture.md。行为、状态、强制约束、风险才是语义核心时应优先选择语义模式semantic pattern再落回最近的视觉类型。在 semantic-patterns.md 的路由表中两个模式会明确路由到 Layer StackGovernance / control catalog治理/控制目录——当读者需要按在哪个执行面authoring、workspace、merge/CI、deploy/runtime强制执行来理解控制项清单时用 Layer Stack 而非一张复选框表格Compensating security layers补偿性安全层——当每一层防御都覆盖上一层遗留的失败残余风险逐层传导是叙事主线时用 Layer Stack 表达层级递进的防御链若包含边界才是重点则改用 Nested。也就是说Layer Stack 是有序的抽象层级的布局语法而语义模式决定这一层里装什么行为原语两者各司其职见 SKILL.md 的语义模式描述行为类型描述布局原则。二、布局约定横向通栏与三栏行内排版规范把每一条布局规则都量化到了像素级这是它区别于随手画几根横条的核心横向色带垂直堆叠每一层都是全宽矩形所有层共享同一个x与width总共 4–6 层。尺寸约束单层高度 56–72px在 1000px 宽的viewBox内层宽通常为 800–880px。以仓库示例 example-layers.html 为例viewBox0 0 1000 500每条色带x120、width840、height64完全落在规范区间内。每一行内部是固定三段式从左到右位置内容字体规格最左索引标签Index tag如L3、07、APPLICATIONGeist Mono 8–9pxeyebrow 风格字距0.14em中左偏右层名Layer nameGeist 14–16px字重 600最右子标签/注释Sublabel / note如chat, editor, canvasGeist Mono 9–10pxmuted 色右对齐示例中的坐标可以验证这套对齐索引标签x140层名x260右侧子标签x940且text-anchorend——左中右三个锚点分得清清楚楚视觉上形成稳定的扫描节奏。边框与填充二选一从一而终层间分隔1px 发丝线rgba(45,49,66,0.12)即style-guide.md中的ruletoken 默认值。在示例中体现为每条色带底部的line x1120 y1{y64} x2960 y2{y64} strokergba(45,49,66,0.12) stroke-width1/以及整个栈容器顶、底的轮廓发丝线。外层轮廓1px ink 或 muted。填充策略二选一选定后全图保持要么交替微差色paper/paper-2交替示例中为#f5f5f5与#ececec交替要么全部 paper 发丝线分隔。示例正是第一种策略L5、L3 用#f5f5f5L2、L1 用#ecececL4 焦点层用珊瑚 tint——明度层层递进又不喧哗。方向指示写在左侧页边不进栈内栈外左侧页边放一个小的上/下箭头 Geist Mono 标签如abstraction ↑、packets ↓。示例 example-layers.html 的实现是顶标ABSTRACTION、底标SILICON中间一条x80的竖线加一个指向上的polygon箭头明确告诉读者抽象层级向上递增。焦点层珊瑚色只给一个Coral珊瑚色默认#eb6c36只上在唯一一个焦点层上——瓶颈层、付房租的那一层、正在被讨论的那一层。规范原文的说法是the bottleneck, the pay-rent layer, the one under discussion。示例 L4Agent harness就是教科书式实现!-- FOCAL珊瑚 tint 填充 珊瑚描边索引标签与子标签同步换色 -- rect x120 y144 width840 height64 fillrgba(235,108,54,0.08)/ rect x120 y144 width840 height64 fillnone stroke#eb6c36 stroke-width1/ text x140 y180 fill#eb6c36 font-size8 font-familyGeist Mono, monospace letter-spacing0.14em font-weight600L4/text text x260 y182 fill#2d3142 font-size16 font-weight600 font-familyGeist, sans-serifAgent harness/text text x940 y182 fill#eb6c36 font-size10 font-familyGeist Mono, monospace text-anchorend letter-spacing0.08emtools, memory, loop/text这里遵循了 style-guide.md 的节点类型→处理规则表焦点节点 accent-tint填充 accent描边。而focal 规则全文最多 1–2 个珊瑚元素是全局铁律见 SKILL.md 第 5 节。三、反模式这些画法直接判负type-layers.md给出的反模式清单既是审美约束也是工程约束层级并不真正分层——用 swimlane 或 architecture别硬套跳号——L3 和 L5 之间缺 L4 却没有解释读者会以为漏了内容每层一个颜色——层级之间的次序关系被彩虹色淹没hierarchy 反而不可见层高不一致且无理由——不稳定的行高破坏堆叠的整齐感。前两条尤其重要跳号破坏层级即次序的语义彩虹配色违背设计系统单一 accent原则见 style-guide.md 中Two accents erases the focal signal与No rainbow palette两条约束。四、把规范落成代码从示例看完整结构以 example-layers.htmlminimal light 变体为蓝本一张合规的分层堆叠图由以下结构组成svg viewBox0 0 1000 500 xmlnshttp://www.w3.org/2000/svg roleimg aria-labelledbylayers-title layers-desc title idlayers-titleAI app stack · Where the work actually happens/title desc idlayers-descLayer stack showing model weights, SDK, prompts, agent harness, and UI surface, with the agent harness highlighted as the focal layer./desc defs !-- 可选22×22 点阵纸纹长文编辑类主图专用非默认 -- pattern iddots width22 height22 patternUnitsuserSpaceOnUse circle cx1 cy1 r0.9 fillrgba(45,49,66,0.10)/ /pattern /defs rect width100% height100% fill#f5f5f5/ rect width100% height100% fillurl(#dots) opacity0.55/ !-- 1. 左侧方向列ABSTRACTION ↑ / SILICON -- !-- 2. 栈容器顶底发丝线 -- !-- 3. 逐层rect 层间发丝线 三段式文本索引/层名/子标签 -- !-- 4. 焦点层珊瑚 tint 珊瑚描边 -- /svg其中几个细节值得照抄title必须是svg的第一个子元素在defs之前并配合roleimgaria-labelledby指向title/descID 必须带图名前缀layers-title/layers-desc严禁裸用title/desc否则同一页面内联多张图会产生重复 ID这是 SKILL.md 第 12 节Accessible SVG contract的硬性要求。点阵纸纹是可选而非默认规范明确默认是干净 paper 底、无点阵只有长文编辑型主图才加dotspattern。产品页、幻灯片、卡片里禁用避免纹理叠加成噪点。全图坐标全部可被 4 整除x120、y80/144/208/272/336、width840、height64……这正是 SKILL.md 第 7 节4px grid铁律的体现——层高 64、起始坐标间隔 64全部落在 4px 网格上。若需要摘要卡片 页脚的完整编辑排版直接使用 example-layers-full.htmlfull editorial 变体它额外提供了paper-2容器、1pxrule边框、8px 圆角、1.1fr 1fr 0.9fr不等宽三卡片网格以及 Geist Mono 的页脚 colophon。三张卡片分别承担标题论点coral dot读图指南为什么只画五层三个角色正好呼应删到不能再删的编辑哲学。五、三套变体与选择逻辑仓库为 Layer Stack 提供了三套开箱即用的示例每个 diagram 类型统一三变体见 SKILL.md 第 10 节变体文件适用场景Minimal light默认example-layers.html截图即用warm paper 底Minimal darkexample-layers-dark.html深色站、幻灯片、高对比帖文Full editorialexample-layers-full.html长文主图带摘要卡片与页脚暗色变体体现了 style-guide.md 的反转规则inversion rulepaper #f5f5f5 → ink #2d3142ink #2d3142 → #f5f5f5muted #4f5d75 → #bfc0c0rule rgba(45,49,66,0.12) → rgba(245,245,245,0.12)accent 轻微提亮为#f08a59以在深底上保持可读。注意示例中 L5 的#393e53正是 dark 模式下的paper-2token。新建一张分层图时最省力的路径是复制最接近的模板 → 替换 eyebrow、h1 与 SVG 主体 → 把[diagram-slug]换成文件名并填好title/desc→ 跑一遍 SKILL.md 第 9 节的输出前检查清单。六、复杂度预算与质量门禁Layer Stack 的复杂度预算是 6 层封顶SKILL.md 第 7 节预算表Max layers (layer stack) | 6。超过 6 层就应拆成总览 细节两张图而不是压缩字号硬塞——full 变体卡片里那句 Six-plus layers become a legend, not a diagram 说的正是这件事。产出后有两道自动化门禁可以用几何校验verify-geometry.py 检查标签遮罩是否被后绘制的节点裁切——其注释明确解释了 paint order背景→区域→箭头→标签→节点凡是被后声明节点覆盖的标签遮罩都会报错。运行方式python3 scripts/verify-geometry.py skills/diagram-design/assets/example-layers.html python3 scripts/verify-geometry.py --all # 检查全部随仓库发布的示例打包自检从已安装的 skill 目录运行python3 skills/diagram-design/scripts/self_check.py file校验可访问 SVG 契约、单文件安全性与动效基础项通过则输出OK。分层图没有箭头、没有连接器因此第 6 节的六条连接器规则不参与但字体、无障碍、4px 网格、单一焦点等全局检查一样不少。七、小结一张好分层图的完整清单把 type-layers.md 的规范压缩成可执行的清单4–6 条全宽横带同 x、同宽、同层高56–72px每行三段式左侧 Geist Mono 索引标签 → 中左 Geist 600 层名 → 右侧 Geist Mono muted 子标签层间 1pxrule发丝线填充要么 paper/paper-2 交替、要么全 paper 发丝线二选一保持到底左侧页边方向轴abstraction ↑/packets ↓不进栈内珊瑚只给一个焦点层stroke 微 tint 填充不跳号、不彩虹、层高不无理由不一致层数 ≤ 6全图坐标落在 4px 网格上title/desc前缀 ID 合规用 verify-geometry.py 与 self_check.py 兜底。遵循这套规范你的下一张 OSI 模型、技术栈或安全防御层级图就不会再是AI 味的彩色便签堆而是一张可以直接进博客、进提案、进暗色站点的编辑级架构图。【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考