diagram-design 架构图绘制指南editorial 风格系统架构图的布局语法、正交连接器与安全边界规范【免费下载链接】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本文基于 diagram-design 技能库中的 type-architecture.md 类型规范展开讲解如何用自包含 HTML 内联 SVG 绘制系统总览architecture类示意图涵盖分层布局约定、强制性的圆角正交连接器语法、交叉箭头桥接bridge/hop原语、信任边界区域zone分组规则以及配套的验证脚本。读完本文你可以直接照章产出一张符合该设计系统、可被verify-geometry.py验证通过的架构图并理解每一项规则背后的排版与渲染原理。一、适用场景什么时候选择 Architecture 类型根据 SKILL.md 视觉类型选择表当你要表达「组件 连接」的系统视图时Architecture 类型是首选。它的典型用途包括系统总览system overviews展示一个系统由哪些组件组成、彼此如何连接数据流图data-flow diagrams请求、数据在组件之间的流转路径集成地图integration maps多个外部系统与本系统的集成拓扑基础设施拓扑infra topology分层展示前端、后端、数据层或公网/私网边界。在语义模式选择上如果内容的核心是「信任边界 允许/禁止的入站或部署路径」应优先加载 semantic-patterns.md 中的Secure paved road模式其最近视觉类型即 Architecture。该模式要求≤3 个信任区、≤8 个组件、≤10 条路径、≤2 条被禁止的路径、一个特权门privileged gate并且禁止箭头跨越进入受保护区。注意区分相近类型数据流Data flow强调角色作用域下的管道步骤DP integration 描述数据平台的「源 → 核心 → 消费」拓扑Deployment 关注软件运行位置主机、副本、端口。Architecture 聚焦于组件与连接本身。二、布局约定分层、流向与 z-order架构图不是随意摆放的方框集合type-architecture.md 给出了四条硬性布局约定按层级或信任边界分组典型分组是 frontend → backend → data或 public → private。同层组件横向对齐层与层之间体现数据流向。主流向固定主流程要么统一从左到右left→right要么统一从上到下top→down。选定一个方向后全程保持一致不要混用否则读者无法快速建立阅读路径。先画箭头、后画方框SVG 中先声明箭头path/line、再声明节点rect利用 z-order 让连接线落在组件之下、被节点遮挡其端点。这一约定在 SKILL.md §6 Mandatory connector rules 中同样被列为强制项。1–2 个 coral 焦点节点珊瑚色accent默认#eb6c36只用于最重要的集成点、主数据存储或关键决策节点。焦点节点使用accent-tint填充 accent描边参见 SKILL.md 节点类型 → 处理表。复杂度预算方面SKILL.md §7 规定单图最多9 个节点、12 条箭头、2 个 coral 元素超过预算就拆成 overview detail 两张图。三、连接器样式圆角正交连接器是强制项type-architecture.md 最核心、也最容易被违反的规则是所有非水平/垂直的连接必须使用圆角右角正交连接器。在两个坐标轴都不对齐off-axis的节点之间画对角线line属于硬性失败hard fail对应 SKILL.md §6 六条强制连接器规则 的第 1 条。标准的两弯肘形路径two-bend elbow公式如下r8是每个弯角的四分之一圆弧半径!-- rightdown: from (x1,y1) to (x2,y2), mid (x1x2)/2 -- path dM x1,y1 H mid-8 Q mid,y1 mid,y18 V y2-8 Q mid,y2 mid8,y2 H x2 fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/要点解读Q mid,y1 mid,y18是从水平段过渡到垂直段的四分之一圆弧向右上走rightup时翻转垂直方向的符号即可只有当两个端点共享同一个 x 或 y 坐标时才允许使用普通line箭头标签放在垂直段上水平方向以mid为中心垂直方向位于两个拐角之间的中点。端口选择port selection垂直路径走 top/bottom当目标节点明显位于源节点的上方或下方时应从源节点的上/下边缘出口从目标节点的上/下边缘入口使用单弯 L 形路径水平 → 拐角 → 垂直进入节点而不是从左右侧端口进出!-- entering a node from its bottom (destination above source) -- path dM x1,y_src H x2-8 Q x2,y_src x2,y_src-8 V y_dst fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/左右侧端口只留给以水平为主的连接。如果一条以垂直为主的路径从节点侧面进入视觉上就像箭头「刺穿」了节点的脸而不是从上方/下方抵达——这是排版层面的失败。虚线路径路由规则不变Optional、return、async、passive 流使用stroke-dasharray4,3和更轻的线宽stroke-width1。关键约定虚线只改变语义权重不改变路由语法——它与实线遵守完全相同的正交路由、端口选择和桥接规则。当一条虚线必须与实线交叉时桥接虚线它按定义是次要连接。区域标签留白zone label margin区域眉标eyebrow label底部与第一个被包含节点顶部之间至少保留16px。区域矩形要预留出这段头部间隙区域y node_top − 32标签掩膜y zone_y 4。四、交叉箭头bridge / hop 原语两条正交箭头必须交叉时在语义上次要的那条箭头交叉点处加一个小弧hop/bridge重要箭头保持连续不中断!-- Horizontal hop over a vertical crossing at xcx, on a line at y -- path dM x1,y H cx-8 a 8,8 0 0,1 16,0 H x2 fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/SVG 弧命令解析a 8,8 0 0,1 16,0rxry8large-arc0sweep1弧线视觉上向上拱起水平前进 16px形成跨越交叉点上方的一个 8px 半径半圆凸起垂直方向的 hop 跨越水平线时在垂直路径上使用a 8,8 0 0,0 0,16。桥接哪一条的判断标准桥接语义上更不重要的那条——passive、secondary、write-back 流或线宽更轻的那条虚线、muted。永远不要两条都桥接。这与 SKILL.md §6 规则 3禁止连接器重叠 配套交叉点只能是一个点两条箭头不能共享路径或叠绘。五、区域分组Zone信任边界与层级的容器把服务于同一层级或同一信任边界的 2 个节点用区域矩形包起来。绘制顺序在箭头和节点之前完整 z-order 为背景 → 区域 → 箭头 → 标签 → 节点这一顺序正是 verify-geometry.py 判定标签掩膜是否被后续节点裁剪的理论依据。rect x{x} y{y} width{w} height{h} rx8 fillrgba(45,49,66,0.02) strokergba(45,49,66,0.10) stroke-width0.8/ rect x{label_x} y{y4} width{label_w} height12 rx2 fill{paper}/ text x{label_cx} y{y13} fillrgba(45,49,66,0.40) font-size7 font-familyGeist Mono, monospace text-anchormiddle letter-spacing0.14emLAYER/text区域规则顶部留白 12–16px眉标eyebrow label坐在这个边距里不压住第一个节点填充强度rgba(45,49,66,0.02)即 2% 的「墨洗」ink wash。任何更强的填充都会与节点填充竞争视觉权重数量上限每图最多3 个区域。超过 3 个会读起来像泳道图swimlane此时应改用 Swimlane 类型对应 SKILL.md 视觉类型表暗色模式把rgba(45,49,66,…)换成rgba(245,245,245,…)保持相同透明度标签掩膜填充改为暗色paper。实际暗色示例可参考 example-architecture-dark.html--color-paper: #2d3142、accent 换为#f08a59。区域眉标的掩膜mask与节点是两种东西掩膜尺寸小宽 20–200px、高 8–14px节点是至少 60×40 的矩形——verify-geometry.py 的形状启发式 正是靠这一尺寸差来区分二者。六、从源码示例看完整实现type-architecture.md 末尾列出的三个示例文件在仓库中实际存在是本文所有规则的可运行实现变体文件用途Minimal lightexample-architecture.html截图就绪图 标题暖色纸张Minimal darkexample-architecture-dark.html暗色站点、幻灯片、高对比场景Full editorialexample-architecture-full.html长文 Hero 图带摘要卡与页脚以 example-architecture.html 为例可以对照验证前文每条规则z-orderSVG 中先绘制背景 rect第 73–74 行→ CONTENT 区域第 77–81 行→ 四条箭头第 84–93 行→ 箭头标签掩膜第 96–109 行→ 五个节点第 111–151 行→ 图例条第 153–179 行与文档规定的绘制顺序完全一致正交连接器从 Astro 顶部出口到 MDX Bundle 底部的路径M 496,240 H 692 Q 700,240 700,232 V 224正是文中的 L 形单弯路径虚线返回路径M 220,288 H 168使用stroke-dasharray4,3且stroke-width1箭头颜色语义#2e5aa8link-blueHTTPS 外部请求、#eb6c36accentSSR 主流程、#4f5d75muted内部连接与 SKILL.md 箭头颜色表 一致节点类型处理Astro Origin 是唯一 focalrgba(235,108,54,0.08)填充 coral 描边 序号02Reader 是 Externalmuted 填充 soft 描边MDX Bundle 是 Backend白色 ink 描边Content CMS 是 Storeink 0.05填充——五种节点类型各司其职coral 只出现一次图例水平底部条hairline 分隔线 LEGEND 字样绝不悬浮在图区内部。暗色变体的差异点--color-paper: #2d3142、--color-ink: #f5f5f5、accent 变#f08a59背景 rect 填充#2d3142所有标签掩膜和节点底层 mask 改为fill#2d3142MDX Bundle 的 Backend 节点填充改为#393e53相当于暗色下的白色抬升。Full 变体在 SVG 之外增加了 editorial 外壳paper-2背景的 diagram-container8px 圆角 1px rule 边框 1.5rempadding、宽度不等的三张摘要卡1.1fr 1fr 0.9fr、以及 Geist Mono 的 colophon 页脚——完整对应 SKILL.md §7 Page layout 与 §8 Summary Card Pattern。七、反模式一眼识别 AI 拼贴式架构图type-architecture.md 明确列出的三类反模式每个盒子都用 coralthis is important too——层级与焦点全部坍塌。coral 是编辑决策不是信号系统单图限 1–2 个双向箭头而方向其实不言自明——布局已经暗示流向时箭头是多余信息。SKILL.md 哲学部分同样强调If the relationship is obvious from layout, remove the line图例悬浮在图区内部——图例必须是底部水平条与节点碰撞即失败。此外 SKILL.md §4 通用反模式 还涵盖任何对角线斜线、标签接触自己线条、掩膜被后绘节点裁剪、路径重叠、共享附着点、非端点盒子背后穿过——每一条都是自动失败项。八、验证用仓库脚本把规则变成检查项两条连接器规则标签掩膜不接触线条、掩膜不被后绘节点裁剪无法靠肉眼稳定把关仓库为此提供了两个自动化工具几何验证标签 vs 节点裁剪python3 scripts/verify-geometry.py skills/diagram-design/assets/example-architecture.html # 或全量检查 python3 scripts/verify-geometry.py --all脚本把rect按尺寸分成节点≥60×40与掩膜宽 20–200、高 8–14对每个掩膜检查是否有声明在它之后的节点与它部分重叠——因为节点后绘制会盖住掩膜导致文字碎片悬在节点边框上。掩膜完全落在节点内部属于合法那是EXT/EDGE/ORIG这类 badge chip掩膜与区域重叠也合法区域先绘制。技能自检可访问性 SVG 契约、单文件安全、动效基础python3 skills/diagram-design/scripts/self_check.py file在生成架构图后的 SKILL.md §9 Pre-Output Checklist 中与连接器强相关的检查项包括off-axis 节点间是否全部使用r8圆角肘路径、无对角线每个箭头标签与其线条是否有可见 6–10px 间隙交叉是否使用 bridge/hop同一盒子同一边进出是否各自独立附着点间距 ≥12px以及「图元坐标是否 4px 网格对齐」x/y、宽高、字号全部是 4 的倍数见 SKILL.md §7 4px grid。九、动手步骤小结按 SKILL.md §10 创建新图流程生成一张合格架构图的完整路径是复制最接近的变体模板minimal 用assets/template.htmlfull editorial 用assets/template-full.html若行为语义是重点信任边界、允许/禁止路由先选 Secure paved road 语义模式并加载 semantic-patterns.md随后必读 type-architecture.md 布局语法替换 eyebrow、h1 与 SVG 主体按「背景 → 区域 → 箭头 → 标签 → 节点 → 图例」的顺序书写元素并遵守 ≤9 节点、≤12 箭头、≤2 coral、≤3 区域、单方向主流的预算补充title/desc并保证svg带roleimg与aria-labelledby可访问性契约细节见 SKILL.md §12运行verify-geometry.py与self_check.py验证跑完 §9 味觉门禁taste gate再交付。整个类型规范的设计前提是架构图是自包含的单 HTML 文件内联 SVG、无阴影、无外部图片这与项目「No shadows. No Mermaid slop.」的设计主张一致——排版规则服务于「读者一眼读懂组件、流向与边界」而不是堆砌视觉装饰。【免费下载链接】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），仅供参考 diagram-design 架构图绘制指南：editorial 风格系统架构图的布局语法、正交连接器与安全边界规范
diagram-design 架构图绘制指南editorial 风格系统架构图的布局语法、正交连接器与安全边界规范【免费下载链接】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本文基于 diagram-design 技能库中的 type-architecture.md 类型规范展开讲解如何用自包含 HTML 内联 SVG 绘制系统总览architecture类示意图涵盖分层布局约定、强制性的圆角正交连接器语法、交叉箭头桥接bridge/hop原语、信任边界区域zone分组规则以及配套的验证脚本。读完本文你可以直接照章产出一张符合该设计系统、可被verify-geometry.py验证通过的架构图并理解每一项规则背后的排版与渲染原理。一、适用场景什么时候选择 Architecture 类型根据 SKILL.md 视觉类型选择表当你要表达「组件 连接」的系统视图时Architecture 类型是首选。它的典型用途包括系统总览system overviews展示一个系统由哪些组件组成、彼此如何连接数据流图data-flow diagrams请求、数据在组件之间的流转路径集成地图integration maps多个外部系统与本系统的集成拓扑基础设施拓扑infra topology分层展示前端、后端、数据层或公网/私网边界。在语义模式选择上如果内容的核心是「信任边界 允许/禁止的入站或部署路径」应优先加载 semantic-patterns.md 中的Secure paved road模式其最近视觉类型即 Architecture。该模式要求≤3 个信任区、≤8 个组件、≤10 条路径、≤2 条被禁止的路径、一个特权门privileged gate并且禁止箭头跨越进入受保护区。注意区分相近类型数据流Data flow强调角色作用域下的管道步骤DP integration 描述数据平台的「源 → 核心 → 消费」拓扑Deployment 关注软件运行位置主机、副本、端口。Architecture 聚焦于组件与连接本身。二、布局约定分层、流向与 z-order架构图不是随意摆放的方框集合type-architecture.md 给出了四条硬性布局约定按层级或信任边界分组典型分组是 frontend → backend → data或 public → private。同层组件横向对齐层与层之间体现数据流向。主流向固定主流程要么统一从左到右left→right要么统一从上到下top→down。选定一个方向后全程保持一致不要混用否则读者无法快速建立阅读路径。先画箭头、后画方框SVG 中先声明箭头path/line、再声明节点rect利用 z-order 让连接线落在组件之下、被节点遮挡其端点。这一约定在 SKILL.md §6 Mandatory connector rules 中同样被列为强制项。1–2 个 coral 焦点节点珊瑚色accent默认#eb6c36只用于最重要的集成点、主数据存储或关键决策节点。焦点节点使用accent-tint填充 accent描边参见 SKILL.md 节点类型 → 处理表。复杂度预算方面SKILL.md §7 规定单图最多9 个节点、12 条箭头、2 个 coral 元素超过预算就拆成 overview detail 两张图。三、连接器样式圆角正交连接器是强制项type-architecture.md 最核心、也最容易被违反的规则是所有非水平/垂直的连接必须使用圆角右角正交连接器。在两个坐标轴都不对齐off-axis的节点之间画对角线line属于硬性失败hard fail对应 SKILL.md §6 六条强制连接器规则 的第 1 条。标准的两弯肘形路径two-bend elbow公式如下r8是每个弯角的四分之一圆弧半径!-- rightdown: from (x1,y1) to (x2,y2), mid (x1x2)/2 -- path dM x1,y1 H mid-8 Q mid,y1 mid,y18 V y2-8 Q mid,y2 mid8,y2 H x2 fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/要点解读Q mid,y1 mid,y18是从水平段过渡到垂直段的四分之一圆弧向右上走rightup时翻转垂直方向的符号即可只有当两个端点共享同一个 x 或 y 坐标时才允许使用普通line箭头标签放在垂直段上水平方向以mid为中心垂直方向位于两个拐角之间的中点。端口选择port selection垂直路径走 top/bottom当目标节点明显位于源节点的上方或下方时应从源节点的上/下边缘出口从目标节点的上/下边缘入口使用单弯 L 形路径水平 → 拐角 → 垂直进入节点而不是从左右侧端口进出!-- entering a node from its bottom (destination above source) -- path dM x1,y_src H x2-8 Q x2,y_src x2,y_src-8 V y_dst fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/左右侧端口只留给以水平为主的连接。如果一条以垂直为主的路径从节点侧面进入视觉上就像箭头「刺穿」了节点的脸而不是从上方/下方抵达——这是排版层面的失败。虚线路径路由规则不变Optional、return、async、passive 流使用stroke-dasharray4,3和更轻的线宽stroke-width1。关键约定虚线只改变语义权重不改变路由语法——它与实线遵守完全相同的正交路由、端口选择和桥接规则。当一条虚线必须与实线交叉时桥接虚线它按定义是次要连接。区域标签留白zone label margin区域眉标eyebrow label底部与第一个被包含节点顶部之间至少保留16px。区域矩形要预留出这段头部间隙区域y node_top − 32标签掩膜y zone_y 4。四、交叉箭头bridge / hop 原语两条正交箭头必须交叉时在语义上次要的那条箭头交叉点处加一个小弧hop/bridge重要箭头保持连续不中断!-- Horizontal hop over a vertical crossing at xcx, on a line at y -- path dM x1,y H cx-8 a 8,8 0 0,1 16,0 H x2 fillnone stroke… stroke-width1.2 marker-endurl(#arrow)/SVG 弧命令解析a 8,8 0 0,1 16,0rxry8large-arc0sweep1弧线视觉上向上拱起水平前进 16px形成跨越交叉点上方的一个 8px 半径半圆凸起垂直方向的 hop 跨越水平线时在垂直路径上使用a 8,8 0 0,0 0,16。桥接哪一条的判断标准桥接语义上更不重要的那条——passive、secondary、write-back 流或线宽更轻的那条虚线、muted。永远不要两条都桥接。这与 SKILL.md §6 规则 3禁止连接器重叠 配套交叉点只能是一个点两条箭头不能共享路径或叠绘。五、区域分组Zone信任边界与层级的容器把服务于同一层级或同一信任边界的 2 个节点用区域矩形包起来。绘制顺序在箭头和节点之前完整 z-order 为背景 → 区域 → 箭头 → 标签 → 节点这一顺序正是 verify-geometry.py 判定标签掩膜是否被后续节点裁剪的理论依据。rect x{x} y{y} width{w} height{h} rx8 fillrgba(45,49,66,0.02) strokergba(45,49,66,0.10) stroke-width0.8/ rect x{label_x} y{y4} width{label_w} height12 rx2 fill{paper}/ text x{label_cx} y{y13} fillrgba(45,49,66,0.40) font-size7 font-familyGeist Mono, monospace text-anchormiddle letter-spacing0.14emLAYER/text区域规则顶部留白 12–16px眉标eyebrow label坐在这个边距里不压住第一个节点填充强度rgba(45,49,66,0.02)即 2% 的「墨洗」ink wash。任何更强的填充都会与节点填充竞争视觉权重数量上限每图最多3 个区域。超过 3 个会读起来像泳道图swimlane此时应改用 Swimlane 类型对应 SKILL.md 视觉类型表暗色模式把rgba(45,49,66,…)换成rgba(245,245,245,…)保持相同透明度标签掩膜填充改为暗色paper。实际暗色示例可参考 example-architecture-dark.html--color-paper: #2d3142、accent 换为#f08a59。区域眉标的掩膜mask与节点是两种东西掩膜尺寸小宽 20–200px、高 8–14px节点是至少 60×40 的矩形——verify-geometry.py 的形状启发式 正是靠这一尺寸差来区分二者。六、从源码示例看完整实现type-architecture.md 末尾列出的三个示例文件在仓库中实际存在是本文所有规则的可运行实现变体文件用途Minimal lightexample-architecture.html截图就绪图 标题暖色纸张Minimal darkexample-architecture-dark.html暗色站点、幻灯片、高对比场景Full editorialexample-architecture-full.html长文 Hero 图带摘要卡与页脚以 example-architecture.html 为例可以对照验证前文每条规则z-orderSVG 中先绘制背景 rect第 73–74 行→ CONTENT 区域第 77–81 行→ 四条箭头第 84–93 行→ 箭头标签掩膜第 96–109 行→ 五个节点第 111–151 行→ 图例条第 153–179 行与文档规定的绘制顺序完全一致正交连接器从 Astro 顶部出口到 MDX Bundle 底部的路径M 496,240 H 692 Q 700,240 700,232 V 224正是文中的 L 形单弯路径虚线返回路径M 220,288 H 168使用stroke-dasharray4,3且stroke-width1箭头颜色语义#2e5aa8link-blueHTTPS 外部请求、#eb6c36accentSSR 主流程、#4f5d75muted内部连接与 SKILL.md 箭头颜色表 一致节点类型处理Astro Origin 是唯一 focalrgba(235,108,54,0.08)填充 coral 描边 序号02Reader 是 Externalmuted 填充 soft 描边MDX Bundle 是 Backend白色 ink 描边Content CMS 是 Storeink 0.05填充——五种节点类型各司其职coral 只出现一次图例水平底部条hairline 分隔线 LEGEND 字样绝不悬浮在图区内部。暗色变体的差异点--color-paper: #2d3142、--color-ink: #f5f5f5、accent 变#f08a59背景 rect 填充#2d3142所有标签掩膜和节点底层 mask 改为fill#2d3142MDX Bundle 的 Backend 节点填充改为#393e53相当于暗色下的白色抬升。Full 变体在 SVG 之外增加了 editorial 外壳paper-2背景的 diagram-container8px 圆角 1px rule 边框 1.5rempadding、宽度不等的三张摘要卡1.1fr 1fr 0.9fr、以及 Geist Mono 的 colophon 页脚——完整对应 SKILL.md §7 Page layout 与 §8 Summary Card Pattern。七、反模式一眼识别 AI 拼贴式架构图type-architecture.md 明确列出的三类反模式每个盒子都用 coralthis is important too——层级与焦点全部坍塌。coral 是编辑决策不是信号系统单图限 1–2 个双向箭头而方向其实不言自明——布局已经暗示流向时箭头是多余信息。SKILL.md 哲学部分同样强调If the relationship is obvious from layout, remove the line图例悬浮在图区内部——图例必须是底部水平条与节点碰撞即失败。此外 SKILL.md §4 通用反模式 还涵盖任何对角线斜线、标签接触自己线条、掩膜被后绘节点裁剪、路径重叠、共享附着点、非端点盒子背后穿过——每一条都是自动失败项。八、验证用仓库脚本把规则变成检查项两条连接器规则标签掩膜不接触线条、掩膜不被后绘节点裁剪无法靠肉眼稳定把关仓库为此提供了两个自动化工具几何验证标签 vs 节点裁剪python3 scripts/verify-geometry.py skills/diagram-design/assets/example-architecture.html # 或全量检查 python3 scripts/verify-geometry.py --all脚本把rect按尺寸分成节点≥60×40与掩膜宽 20–200、高 8–14对每个掩膜检查是否有声明在它之后的节点与它部分重叠——因为节点后绘制会盖住掩膜导致文字碎片悬在节点边框上。掩膜完全落在节点内部属于合法那是EXT/EDGE/ORIG这类 badge chip掩膜与区域重叠也合法区域先绘制。技能自检可访问性 SVG 契约、单文件安全、动效基础python3 skills/diagram-design/scripts/self_check.py file在生成架构图后的 SKILL.md §9 Pre-Output Checklist 中与连接器强相关的检查项包括off-axis 节点间是否全部使用r8圆角肘路径、无对角线每个箭头标签与其线条是否有可见 6–10px 间隙交叉是否使用 bridge/hop同一盒子同一边进出是否各自独立附着点间距 ≥12px以及「图元坐标是否 4px 网格对齐」x/y、宽高、字号全部是 4 的倍数见 SKILL.md §7 4px grid。九、动手步骤小结按 SKILL.md §10 创建新图流程生成一张合格架构图的完整路径是复制最接近的变体模板minimal 用assets/template.htmlfull editorial 用assets/template-full.html若行为语义是重点信任边界、允许/禁止路由先选 Secure paved road 语义模式并加载 semantic-patterns.md随后必读 type-architecture.md 布局语法替换 eyebrow、h1 与 SVG 主体按「背景 → 区域 → 箭头 → 标签 → 节点 → 图例」的顺序书写元素并遵守 ≤9 节点、≤12 箭头、≤2 coral、≤3 区域、单方向主流的预算补充title/desc并保证svg带roleimg与aria-labelledby可访问性契约细节见 SKILL.md §12运行verify-geometry.py与self_check.py验证跑完 §9 味觉门禁taste gate再交付。整个类型规范的设计前提是架构图是自包含的单 HTML 文件内联 SVG、无阴影、无外部图片这与项目「No shadows. No Mermaid slop.」的设计主张一致——排版规则服务于「读者一眼读懂组件、流向与边界」而不是堆砌视觉装饰。【免费下载链接】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），仅供参考