Diagram Design连接器六法则让箭头告别AI味的硬性规范【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design如果你用 AI 画过架构图多半见过那种一眼假的效果节点之间的连接器斜着乱拉、箭头标签直接压在线上、几条线挤成一团分不清谁连谁——这就是典型的AI 味图表。diagram-design 是专为 Claude Code 打造的开源图表设计项目内置 29 种编辑级图表类型统一输出自包含的 HTML SVG 文件。它把连接器的绘制规则固化成六条硬性规范从源头杜绝斜线、压线、重叠线这些通病。这篇文章用大白话拆解这六条架构图连接线规范帮你看懂什么是编辑级的连线。为什么架构图的连接线是AI 味重灾区 在 AI 生成的图表里连接线往往是最后才被处理的元素也最容易露馅随手一拉斜线、标签盖住线条、多条线互相遮挡、箭头穿过后面的盒子……diagram-design 把连接器当作与节点同等重要的一等公民在 SKILL.md 的 §6 中写死了六条不可协商的强制规则并配套了自动校验脚本。上图是项目生成的架构图示例所有箭头走正交路径标签与线条保持清晰间距每条连接都可独立追踪。下面逐条拆解六法则。法则一直角圆角连接是连接线唯一合法选项核心规则两端不在同一横纵轴上的连接一律使用带圆角的直角折线正交连接禁止任何斜线。每处转弯都是半径 8 的四分之一圆弧只有两端共享同一 x 或 y 坐标时才允许直线。这也是编辑级与随手画的分水岭——直角折线让连接关系可对齐、可追踪斜线则彻底破坏网格秩序。具体的折线路径公式见 type-architecture.md绘制时直接套用即可。法则二箭头标签与连接线保持 6–10px 间距️核心规则标签永远不能坐在箭头上遮罩矩形与线条之间至少留 6px 空隙紧凑布局建议 8–10px保证连接线始终可见、可追踪。这直击 AI 生成的典型通病标签压线会让线条断断续续读者很难判断文字属于哪条线。正确做法是让标签居中悬浮在线段上方竖向线段放在一侧并垫一块不透明遮罩防止线条透字。法则三连接线禁止重叠交叉处搭桥处理核心规则两条连接线不得共用路径、不得平行叠放、不得互相压盖。不可避免的交叉点使用桥接原语次要的那条线在交叉处拱起一个半圆弧主要的那条保持连续。当两条线想重叠时把其中一条偏移至少 12px让每条线都能从头到尾独立追踪。如果怎么排都叠说明布局本身已超预算——该拆成总览 细节两张图了。上图是流程图的决策分支YES/NO 分支都走正交折线交叉与汇聚关系清晰没有一根斜线。法则四多线汇聚同一边附着点必须分散核心规则两条以上连接线进出同一个盒子边时必须各有独立附着点相邻附着点间距 ≥12px均匀分布任何一条线都不能被另一条遮挡。附着点位置可按边长均分计算第 k 条线落在边长 L × k / (N1) 处。上图是数据平台集成拓扑多个数据源CRM、POS 导出、事件流汇聚到存储层每条线都有清晰独立的入口谁连谁都一目了然。法则五连接线不得穿越无关节点盒子核心规则连接线不允许从既非起点也非终点的盒子后面穿过遇到挡路盒子应绕行。唯一的例外是挡路盒子在几何上无法避开例如横向条带横亘在唯一直通路径上此时穿越段必须改用虚线4,3点划线表示路过而非交互且箭头只落在真正的终点上。虚线就是免责声明读者一眼便知中间那个盒子不是端点连接语义不会产生歧义。拿不准时优先绕行例外不是偷懒的捷径。法则六标签遮罩不得压住后绘制的节点核心规则标签的遮罩矩形不能与绘制顺序在其之后的节点重叠。由于绘制顺序固定为背景→分区→箭头→标签→节点遮罩若压进节点区域会被节点填充色盖住文字变成悬在边框上的残片。解决办法是把标签放在连接线经过空白画布的那一段上。这条规则肉眼很难检查项目专门用脚本自动校验坐标见下文。用校验脚本让连接器规范自动执行规则写得再细靠人眼逐条核对也会漏。diagram-design 的聪明之处是把规范工程化verify-geometry.py解析 SVG 坐标自动报告标签遮罩压住后绘制节点等几何问题self_check.py检查无障碍 SVG 契约、静态单文件安全与动画规范决策记录 ADR 0005说明标签位置改为几何校验而非人工评审的原因与过程。生成图表后跑一遍脚本六条连接器法则是否达标一目了然再也不靠感觉。上图这种角色 × 步骤的矩阵式数据管道图正因为每一条交接线都遵守六法则才做到了疏密有致、每条线都可独立追踪。结语管好每一条连接线告别 AI 味架构图✨ 连接器六法则看似苛刻本质却很简单让每一条线都清晰、独立、可追踪。diagram-design 把这套规范固化进项目规则与校验脚本坚持无阴影、不复制 Mermaid 渲染器布局的编辑级审美无论你是用 Claude Code 直接生成 29 种图表还是想把存量 Mermaid、draw.io 图重绘成编辑级成品都能直接受益。想亲手体验克隆仓库即可git clone https://gitcode.com/GitHub_Trending/di/diagram-design从第一条正交折线开始你的架构图就能彻底告别AI 味。【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考