Diagram Design 之 Database Schema 图把 DDL 画成可读的物理表结构【免费下载链接】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-designDiagram Design项目为 Claude Code、Codex、Pi 等 Agent 提供了 39 种自包含的编辑级图型详见 SKILL.md其中Database Schema是专门用于表达物理数据库结构的图型真实表、真实 SQL 类型、真实约束、真实索引以及列到列column-to-column的外键连接。本文以 type-db-schema.md 为骨架结合仓库内的模板实现与验证脚本完整讲解该图型的定位、布局规范、外键连接规则、焦点策略、复杂度预算与反模式让你能直接用它产出迁移评审、真实库结构核查等场景的专业示意图。一、图型定位什么时候用 Database Schema什么时候用 ERtype-db-schema.md开篇就划定了这条最重要的边界线Database Schema 服务的是物理层真实表、真实 SQL 类型、真实约束、真实索引以及把一个列连接到另一个列的外键。它的本质是把 DDL 变得可读——适用于迁移migrations评审、真实数据库结构核查以及任何列类型是什么或ON DELETE行为是什么才是重点的场合。ER / Data Model 服务的是概念层关系线连接的是盒子两端带基数cardinality字段只是平铺列表适合概念或领域讨论。参见 type-er.md。两者的分界可以一句话概括如果你在讨论 Order是什么用 ER如果你在讨论删除一行时会发生什么用 Database Schema。Database Schema 图独有的能力正是 ER 不具备的外键连接器锚定在两端的具体列行上column to column而不是盒子到盒子box to box。这也是该图型存在的根本理由。二、布局规范2.1 表盒Table box结构头部色带Header bandschema.table命名如public.orders使用 Geist sans 12px、weight 600右上角是矩形类型标签rx2不是胶囊 pill文字为TABLE。头部与表体之间用 hairline 分隔。列行Column rows固定24px 行高使连接器可以可预测地锚定。每行包含列名Geist sans 12px左对齐SQL 类型Geist Mono 9pxmuted右对齐如uuid、text、numeric(12,2)、timestamptz约束芯片constraint chips位于两者之间的小型rx2标签Geist Mono 8pxPK主键、FK外键、UQ唯一、NN非空。偶数行使用ink 0.02交替底色便于扫读。溢出行Overflow row当表列数超出预算时最后一行是 Geist Mono 9pxmuted的 N more columns。绝不静默截断一张表而不做说明。索引舱段Index compartment可选的最后一段用 hairline 与列区隔开顶部是 Geist Mono 8px 大写INDEXES眉题下方列出索引名Geist Mono 9px如idx_orders_customer_id、uq_products_sku。只列对故事有意义的索引不列表上的全部索引。仓库内的 example-db-schema.html 提供了完整实现public.products表展示了溢出行 3 more columns第 226 行附近public.orders表展示了INDEXES舱段列出idx_orders_customer_id与idx_orders_status两条索引。所有这些字号、行高、坐标都遵循 style-guide.md 中的4px 网格硬规则所有尺寸、坐标、间距可被 4 整除。2.2 外键连接器 —— 本图型的定义性规则这是 Database Schema 图区别于 ER 的核心type-db-schema.md用整节强调锚定每条 FK 边从源列行的垂直中心出发终止于被引用列行的垂直中心。路由使用正交圆角肘orthogonal rounded elbows肘部公式见 SKILL.md §6 与 type-architecture.md两折肘路径r8交叉时使用 bridge/hop 原语次要箭头在交叉点画 8px 半圆弧绝不两条都桥接。标签每条边用 Geist Mono 8px 标注参照行为——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL并使用标准的 6–10px 掩膜间隙标签底边与连线之间必须有 6–10px 可见空隙掩膜矩形不接触线。多 FK 接同一行的扇出fan-out规则固定 24px 行高保证了同一表边缘不同行上接两条 FK 时至少 12px 间距——行间距本身就是扇出空间。但当两条或多条 FK 接到同一行的同一边缘时例如两个子表都引用同一个父表主键若全部锚定在行的精确中心会在单点碰撞违反 SKILL.md §6 规则 4同一盒子边缘上的多条连接器必须各有独立连接点间距 ≥12px。此时应围绕行垂直中心对称偏移各连接点两条边时各偏移±8px所有连接点保持在 24px 行带内且与相邻点≥12px。这样每条连接器仍可读作接在这行上同时保持独立可追踪。这一约束在真实实现中有据可查example-db-schema.html中orders表的customer_id行y104 中心与order_items表经圆角肘路由确保任何边都不共享单一连接点。2.3 Schema 分组Schema grouping非默认 schema 中的表放在包含矩形containment rect内rx8、ink 0.02填充、ink 0.20描边虚线4,4左上角是 Geist Mono 8px 大写追踪tracked的 schema 标签。先画分组矩形再让表绘制在它之上保证表盖住分组框的描边。example-db-schema.html中BILLING分组x744,y284 起正是这样实现的其中billing.invoices表被虚线矩形包裹左上角标注BILLING。2.4 焦点规则Focal rule本图型的 2 个 accent 元素是那条破坏性 FKON DELETE CASCADE——边和它的标签合起来算一个元素因为带标签的边是一件事该 FK 级联进入的表——只在其头部色带上使用accent-tint绝不给整个盒子上色。除此之外图上没有任何元素是accent对应 style-guide.md 中accent 每图最多 1–2 个的全局约束。若 schema 没有破坏性 FK就没有焦点元素——保持不 accent而不是随便提升一张任意表。这是编辑式设计哲学见 SKILL.md §1Coral 是编辑信号不是旗帜在图型级的具体落地。在example-db-schema-full.html中可以看到完整示范order_items.order_id → orders.id是唯一的ON DELETE CASCADE边使用stroke#eb6c36accent与stroke-width1.2强调描边其标签ON DELETE CASCADE同样用 accent 色级联的目标表public.order_items头部色带填充rgba(235,108,54,0.08)即accent-tint其余四张表头部均为rgba(45,49,66,0.04)的普通底色。三、复杂度预算type-db-schema.md给出了该图型的明确预算同时它也是 SKILL.md §7 全局预算表中Max tables / columns / FKsdb schema 5 / 8 shown / 6的对应条目维度上限表数量5每表展示的列行8外键边6accent 元素2超出预算 → 展示子系统subsystem而不是整个数据库并在图注caption里说明。这与 SKILL.md §7 的通用规则一致如果超出预算拆成两张图概览 明细。四、反模式清单Anti-patterns原文档明确列出的反模式是生成与评审时的红线❌画出每张表的每一列——schema 图是关于某个子系统的一个论证不是\d的转储。❌FK 线连接盒子到盒子box to box——那是 ER请改用 type-er.md。❌缺失 SQL 类型——类型占了内容的一半。❌未标注的 FK 边——ON DELETE行为正是评审者要找的东西。❌每一行都堆约束芯片直到芯片本身成为噪音。❌索引舱段列出所有索引而不是对故事重要的那些。❌在一张图中混用概念实体名与物理表名。这些反模式与 SKILL.md §4 的通用反模式表互补如珊瑚色用在每个重要节点上、标签无掩膜、连接器对角线等构成了完整的事后质检维度。五、可运行的验证与产出流程5.1 生成的三种变体按 SKILL.md §10每个图型都提供三种变体Database Schema 也不例外见原文档 Examples 节变体文件适用场景极简浅色默认example-db-schema.html截图就绪图 标题暖纸底色极简深色example-db-schema-dark.html深色站点、幻灯片、高对比文章全编辑式example-db-schema-full.html长文图作为主角含头部、图注、卡片、页脚example-db-schema-full.html的卡片区还示范了编辑式叙事用一张 coral 卡片点出唯一的破坏性边Deleting an order cascades用 ink 卡片强调Column to column, not box to box用 muted 卡片说明Scoped to the subsystem。5.2 几何验证脚本SKILL.md §6 规则 6 与 §9 质检清单要求标签掩膜不得与后绘制的节点重叠因为节点绘制在标签之后节点填充会盖住掩膜内的文字。仓库提供了专门的验证脚本python3 scripts/verify-geometry.py skills/diagram-design/assets/example-db-schema.html python3 scripts/verify-geometry.py --allverify-geometry.py 的启发式规则与模板一致节点是至少 60×40 的rect标签掩膜是宽 20–200、高 8–14 的rect宽度上限覆盖了长 mono 掩膜板与 CJK 标签完全包含在节点内的掩膜是徽章芯片合法而与后绘制节点部分重叠的掩膜则是缺陷——这正是 DB schema 图中 FK 标签布局必须遵守的几何约束。此外生成后还应运行技能自带的 self_check.py无障碍 SVG 契约、单文件安全、动效基础检查。5.3 无障碍契约每个生成的图都必须满足 SKILL.md §12 的可访问 SVG 契约svg带roleimg与aria-labelledbytitle是svg的第一个子元素ID 按图与变体加前缀如db-schema-title/db-schema-desc禁止裸title/desc。example-db-schema.html的desc是一个范本Physical database schema diagram showing five commerce tables with column-level foreign keys, SQL types, and constraint chips, including a cascading delete from orders into order_items and a billing schema group.——描述内容而非几何形状。六、实战要点小结先判型讨论实体与基数 → ERtype-er.md讨论物理表、列类型、ON DELETE行为 → Database Schema本图型。列行固定 24px这是 FK 可预测锚定的地基也是扇出偏移±8px / ≥12px的前提。FK 边必须列到列、必须带ON DELETE标签、必须正交圆角肘路由标签与线保持 6–10px 掩膜间隙。accent 只给破坏性 FK 与其级联目标表的头部色带没有破坏性 FK 就不加焦点。守住 5 表 / 8 列 / 6 FK / 2 accent 的预算超了画子系统并在图注中说明。用三种模板变体 verify-geometry.py self_check.py完成产出与质检闭环。相关资源图型规范type-db-schema.md图型选择总览SKILL.md设计令牌与排版style-guide.md肘部/端口/桥接路由type-architecture.md概念层对照type-er.md示例浅色 / 深色 / 全编辑式example-db-schema.html、example-db-schema-dark.html、example-db-schema-full.html验证脚本verify-geometry.py、self_check.py【免费下载链接】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 之 Database Schema 图：把 DDL 画成可读的物理表结构
Diagram Design 之 Database Schema 图把 DDL 画成可读的物理表结构【免费下载链接】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-designDiagram Design项目为 Claude Code、Codex、Pi 等 Agent 提供了 39 种自包含的编辑级图型详见 SKILL.md其中Database Schema是专门用于表达物理数据库结构的图型真实表、真实 SQL 类型、真实约束、真实索引以及列到列column-to-column的外键连接。本文以 type-db-schema.md 为骨架结合仓库内的模板实现与验证脚本完整讲解该图型的定位、布局规范、外键连接规则、焦点策略、复杂度预算与反模式让你能直接用它产出迁移评审、真实库结构核查等场景的专业示意图。一、图型定位什么时候用 Database Schema什么时候用 ERtype-db-schema.md开篇就划定了这条最重要的边界线Database Schema 服务的是物理层真实表、真实 SQL 类型、真实约束、真实索引以及把一个列连接到另一个列的外键。它的本质是把 DDL 变得可读——适用于迁移migrations评审、真实数据库结构核查以及任何列类型是什么或ON DELETE行为是什么才是重点的场合。ER / Data Model 服务的是概念层关系线连接的是盒子两端带基数cardinality字段只是平铺列表适合概念或领域讨论。参见 type-er.md。两者的分界可以一句话概括如果你在讨论 Order是什么用 ER如果你在讨论删除一行时会发生什么用 Database Schema。Database Schema 图独有的能力正是 ER 不具备的外键连接器锚定在两端的具体列行上column to column而不是盒子到盒子box to box。这也是该图型存在的根本理由。二、布局规范2.1 表盒Table box结构头部色带Header bandschema.table命名如public.orders使用 Geist sans 12px、weight 600右上角是矩形类型标签rx2不是胶囊 pill文字为TABLE。头部与表体之间用 hairline 分隔。列行Column rows固定24px 行高使连接器可以可预测地锚定。每行包含列名Geist sans 12px左对齐SQL 类型Geist Mono 9pxmuted右对齐如uuid、text、numeric(12,2)、timestamptz约束芯片constraint chips位于两者之间的小型rx2标签Geist Mono 8pxPK主键、FK外键、UQ唯一、NN非空。偶数行使用ink 0.02交替底色便于扫读。溢出行Overflow row当表列数超出预算时最后一行是 Geist Mono 9pxmuted的 N more columns。绝不静默截断一张表而不做说明。索引舱段Index compartment可选的最后一段用 hairline 与列区隔开顶部是 Geist Mono 8px 大写INDEXES眉题下方列出索引名Geist Mono 9px如idx_orders_customer_id、uq_products_sku。只列对故事有意义的索引不列表上的全部索引。仓库内的 example-db-schema.html 提供了完整实现public.products表展示了溢出行 3 more columns第 226 行附近public.orders表展示了INDEXES舱段列出idx_orders_customer_id与idx_orders_status两条索引。所有这些字号、行高、坐标都遵循 style-guide.md 中的4px 网格硬规则所有尺寸、坐标、间距可被 4 整除。2.2 外键连接器 —— 本图型的定义性规则这是 Database Schema 图区别于 ER 的核心type-db-schema.md用整节强调锚定每条 FK 边从源列行的垂直中心出发终止于被引用列行的垂直中心。路由使用正交圆角肘orthogonal rounded elbows肘部公式见 SKILL.md §6 与 type-architecture.md两折肘路径r8交叉时使用 bridge/hop 原语次要箭头在交叉点画 8px 半圆弧绝不两条都桥接。标签每条边用 Geist Mono 8px 标注参照行为——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL并使用标准的 6–10px 掩膜间隙标签底边与连线之间必须有 6–10px 可见空隙掩膜矩形不接触线。多 FK 接同一行的扇出fan-out规则固定 24px 行高保证了同一表边缘不同行上接两条 FK 时至少 12px 间距——行间距本身就是扇出空间。但当两条或多条 FK 接到同一行的同一边缘时例如两个子表都引用同一个父表主键若全部锚定在行的精确中心会在单点碰撞违反 SKILL.md §6 规则 4同一盒子边缘上的多条连接器必须各有独立连接点间距 ≥12px。此时应围绕行垂直中心对称偏移各连接点两条边时各偏移±8px所有连接点保持在 24px 行带内且与相邻点≥12px。这样每条连接器仍可读作接在这行上同时保持独立可追踪。这一约束在真实实现中有据可查example-db-schema.html中orders表的customer_id行y104 中心与order_items表经圆角肘路由确保任何边都不共享单一连接点。2.3 Schema 分组Schema grouping非默认 schema 中的表放在包含矩形containment rect内rx8、ink 0.02填充、ink 0.20描边虚线4,4左上角是 Geist Mono 8px 大写追踪tracked的 schema 标签。先画分组矩形再让表绘制在它之上保证表盖住分组框的描边。example-db-schema.html中BILLING分组x744,y284 起正是这样实现的其中billing.invoices表被虚线矩形包裹左上角标注BILLING。2.4 焦点规则Focal rule本图型的 2 个 accent 元素是那条破坏性 FKON DELETE CASCADE——边和它的标签合起来算一个元素因为带标签的边是一件事该 FK 级联进入的表——只在其头部色带上使用accent-tint绝不给整个盒子上色。除此之外图上没有任何元素是accent对应 style-guide.md 中accent 每图最多 1–2 个的全局约束。若 schema 没有破坏性 FK就没有焦点元素——保持不 accent而不是随便提升一张任意表。这是编辑式设计哲学见 SKILL.md §1Coral 是编辑信号不是旗帜在图型级的具体落地。在example-db-schema-full.html中可以看到完整示范order_items.order_id → orders.id是唯一的ON DELETE CASCADE边使用stroke#eb6c36accent与stroke-width1.2强调描边其标签ON DELETE CASCADE同样用 accent 色级联的目标表public.order_items头部色带填充rgba(235,108,54,0.08)即accent-tint其余四张表头部均为rgba(45,49,66,0.04)的普通底色。三、复杂度预算type-db-schema.md给出了该图型的明确预算同时它也是 SKILL.md §7 全局预算表中Max tables / columns / FKsdb schema 5 / 8 shown / 6的对应条目维度上限表数量5每表展示的列行8外键边6accent 元素2超出预算 → 展示子系统subsystem而不是整个数据库并在图注caption里说明。这与 SKILL.md §7 的通用规则一致如果超出预算拆成两张图概览 明细。四、反模式清单Anti-patterns原文档明确列出的反模式是生成与评审时的红线❌画出每张表的每一列——schema 图是关于某个子系统的一个论证不是\d的转储。❌FK 线连接盒子到盒子box to box——那是 ER请改用 type-er.md。❌缺失 SQL 类型——类型占了内容的一半。❌未标注的 FK 边——ON DELETE行为正是评审者要找的东西。❌每一行都堆约束芯片直到芯片本身成为噪音。❌索引舱段列出所有索引而不是对故事重要的那些。❌在一张图中混用概念实体名与物理表名。这些反模式与 SKILL.md §4 的通用反模式表互补如珊瑚色用在每个重要节点上、标签无掩膜、连接器对角线等构成了完整的事后质检维度。五、可运行的验证与产出流程5.1 生成的三种变体按 SKILL.md §10每个图型都提供三种变体Database Schema 也不例外见原文档 Examples 节变体文件适用场景极简浅色默认example-db-schema.html截图就绪图 标题暖纸底色极简深色example-db-schema-dark.html深色站点、幻灯片、高对比文章全编辑式example-db-schema-full.html长文图作为主角含头部、图注、卡片、页脚example-db-schema-full.html的卡片区还示范了编辑式叙事用一张 coral 卡片点出唯一的破坏性边Deleting an order cascades用 ink 卡片强调Column to column, not box to box用 muted 卡片说明Scoped to the subsystem。5.2 几何验证脚本SKILL.md §6 规则 6 与 §9 质检清单要求标签掩膜不得与后绘制的节点重叠因为节点绘制在标签之后节点填充会盖住掩膜内的文字。仓库提供了专门的验证脚本python3 scripts/verify-geometry.py skills/diagram-design/assets/example-db-schema.html python3 scripts/verify-geometry.py --allverify-geometry.py 的启发式规则与模板一致节点是至少 60×40 的rect标签掩膜是宽 20–200、高 8–14 的rect宽度上限覆盖了长 mono 掩膜板与 CJK 标签完全包含在节点内的掩膜是徽章芯片合法而与后绘制节点部分重叠的掩膜则是缺陷——这正是 DB schema 图中 FK 标签布局必须遵守的几何约束。此外生成后还应运行技能自带的 self_check.py无障碍 SVG 契约、单文件安全、动效基础检查。5.3 无障碍契约每个生成的图都必须满足 SKILL.md §12 的可访问 SVG 契约svg带roleimg与aria-labelledbytitle是svg的第一个子元素ID 按图与变体加前缀如db-schema-title/db-schema-desc禁止裸title/desc。example-db-schema.html的desc是一个范本Physical database schema diagram showing five commerce tables with column-level foreign keys, SQL types, and constraint chips, including a cascading delete from orders into order_items and a billing schema group.——描述内容而非几何形状。六、实战要点小结先判型讨论实体与基数 → ERtype-er.md讨论物理表、列类型、ON DELETE行为 → Database Schema本图型。列行固定 24px这是 FK 可预测锚定的地基也是扇出偏移±8px / ≥12px的前提。FK 边必须列到列、必须带ON DELETE标签、必须正交圆角肘路由标签与线保持 6–10px 掩膜间隙。accent 只给破坏性 FK 与其级联目标表的头部色带没有破坏性 FK 就不加焦点。守住 5 表 / 8 列 / 6 FK / 2 accent 的预算超了画子系统并在图注中说明。用三种模板变体 verify-geometry.py self_check.py完成产出与质检闭环。相关资源图型规范type-db-schema.md图型选择总览SKILL.md设计令牌与排版style-guide.md肘部/端口/桥接路由type-architecture.md概念层对照type-er.md示例浅色 / 深色 / 全编辑式example-db-schema.html、example-db-schema-dark.html、example-db-schema-full.html验证脚本verify-geometry.py、self_check.py【免费下载链接】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），仅供参考