如何用 Diagram Design 画数据库 Schema 图物理表、索引与列级外键【免费下载链接】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当你要向评审或团队解释一段 DDL——真实表名、真实 SQL 类型、某列删掉时外键会发生什么——Diagram Design 的Database schema类型就是为这个场景设计的。它画的是物理 schema表框、列行、约束 chipPK/FK/UQ/NN、索引舱位以及锚定在具体列行上的列级外键连接线。产出一个自包含的 HTML SVG 文件双击即可在浏览器打开无构建步骤、无外部图片依赖。适用前提是项目里已能调用这个 skillClaude Code、Codex、Factory Droid 或 Pi 任一环境。先确认你需要的确实是 Schema 类型而不是 ERtype-db-schema.md 给出了明确的边界画 Schema讨论的是删掉一行时会发生什么——列类型、ON DELETE行为是重点外键必须连到两端的具体列行上。画 ER / 数据模型讨论的是Order 是什么——实体级对话关系线连的是框而不是列行字段只是普通列表见 type-er.md。两者不能混用把外键线画成框到框的连线在该类型的反模式清单里被明确点名那应该改用 ER在同一张图里混用概念实体名和物理表名也是反模式。准备工作让 skill 可用按你的宿主环境装一次来自 README.md 的 Install 一节# Claude Code /plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design# Pi pi install https://github.com/cathrynlavery/diagram-designCodex 用codex plugin marketplace add cathrynlavery/diagram-design加codex plugin add diagram-designdiagram-designFactory Droid 用对应的droid plugin命令详见 README。首次在新项目里生成图时skill 有一个风格指南门禁如果 style-guide.md 还是默认 tokenpaper#f5f5f5、ink#2d3142、accent#eb6c36它会停下来询问你是否先做品牌 onboarding从网站 URL 提取、手动粘贴 token或直接沿用默认。不处理这一步它会拒绝把默认肤色的图直接交付进一个有品牌的项目。执行步骤从请求到 HTML 文件1. 让 agent 按类型参考画图直接描述你要的物理 schemaagent 会先声明计划选定的视觉类型、尺寸预设、复杂度预算会裁掉什么再渲染。例如要求它画出订单子系统customers、orders、order_items、products、billing.invoices五张表含 SQL 类型、约束和外键行为。如果不想走 agent也可以直接复制模板自己改来自 README.md 的 Quickstart 与 SKILL.md §10cp skills/diagram-design/assets/template.html my-schema.html然后把模板里的 eyebrow、h1 和 SVG 主体替换为你的 schema 内容并按 type-db-schema.md 的版式约定绘制。仓库里现成的完整示例是 example-db-schema.html浅色、example-db-schema-dark.html深色、example-db-schema-full.html完整 editorial 版三者可以直接打开对照。2. 遵循 Database schema 类型的版式约定type-db-schema.md 的核心规则逐条对应图中元素表框头部schema.table如public.orders配一个矩形TABLE类型标签下方 hairline 分隔出列区。列行固定 24px 行高保证外键连接器能可预测地锚定。每行左侧是列名Geist sans 12px右侧是 SQL 类型Geist Mono 9px如uuid、numeric(12,2)、timestamptz中间放约束 chipPK、FK、UQ、NN。缺 SQL 类型是反模式——类型是内容的一半。溢出行列超出预算时最后一行写成 N more columns。不要静默截断表。索引舱位可选的最终舱位用INDEXES眉标签引出只列与故事相关的索引示例里public.orders只列了idx_orders_customer_id、idx_orders_statusproducts只列了uq_products_sku。把表上所有索引都堆进去同样被列入反模式。外键连接器定义性规则每条外键线从源列行的垂直中心出发到被引用列行的垂直中心结束用正交圆角折线路由并在边上标注引用动作——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL。未标注的外键边是反模式因为ON DELETE行为正是评审者要看的东西。同列多外键防冲突当多条外键接到同一表的同一列行例如两个子表都引用父表主键不能全部锚定在列行中心点要围绕行中心对称偏移 ±8px让每条线各自可追踪。跨 schema 分组非默认 schema 的表放进一个虚线容器rx8、ink 0.02填充、ink 0.20虚线4,4描边左上角放 schema 名标签。先画分组矩形再让表覆盖其上。焦点规则全图只有 2 个 accent 元素——那条破坏性外键ON DELETE CASCADE边和标签合算一个加上级联落点表的头部色带只染 header不染整个框。如果 schema 里没有破坏性外键就保持无 accent不要随手提亮某张表。通用连接器规则来自 SKILL.md §6正交圆角折线强制r8弯角斜线直连直接判不合格、边标签与连线保持 6–10px 间距并带不透明遮罩、同一条边上的多个连接器各自独立锚点间距 ≥12px、连线不压过非端点盒子、箭头先于盒子绘制。3. 控制复杂度预算type-db-schema.md 给出的硬性预算限制上限表数5每表显示列行8外键边数6accent 元素2超预算时的处理方式是画子系统而不是整个数据库并在图注里说明这一点。示例example-db-schema.html正好踩线5 张表、4 条外键边其中一条ON DELETE CASCADE用 accent 色、一张跨 schema 的billing.invoices表放在BILLING分组里。结果验证用浏览器打开生成的 HTML——输出必须是单个自包含文件内嵌 CSS、内联 SVG除 Google Fonts 外无外部请求双击离线可看。在浏览器里逐条对照示例检查外键线是否锚到列行中心而不是连在框角每条外键边是否有ON DELETE …标签SQL 类型是否齐全索引舱位是否只列了与故事相关的索引accent 是否只出现在 CASCADE 边和落点表的 header 上。从 skill 安装目录跑自带校验脚本self_check.py 随 skill 打包检查可访问 SVG 契约、单文件安全规则python3 skill-dir/scripts/self_check.py my-schema.html通过时输出OK 文件路径失败时输出FAIL和具体原因。若在仓库检出中工作还可用几何校验器检查标签遮罩是否压到后绘制的节点python3 scripts/verify-geometry.py my-schema.htmlSKILL.md §9 清单第 6 条。常见反模式与修正type-db-schema.md 的反模式清单就是核对清单直接对号入座每张表画所有列 → 改成列预算 N more columns溢出行外键线框对框 → 改用列级锚定或换 ER 类型漏 SQL 类型 → 补齐类型是内容的一半外键边无标签 → 补ON DELETE …每行都挂约束 chip 直到 chip 本身成了噪音 → 只标有信息量的约束。可选分支导出为 PNG / SVGHTML 不是终点时用斜杠命令导出来自 README.md 与 export.md# Claude Code /diagram-design:export-diagram my-schema.html --png-only --scale3 # Pi /export-diagram my-schema.html --svg-only两种格式都只导出svg图本身-full变体里的卡片和页眉会被有意丢弃。PNG 导出依赖 Playwright 一次性安装会安装系统级 chromium 浏览器组件执行前确认环境允许pip install playwright playwright install chromiumexport.md 明确不自动安装、不自动导出——导出永远是手动触发。像素尺寸 viewBox× 缩放系数示例viewBox1080×560 在 scale 2 下得 2160×1120目标小于 1 倍或超过 4 倍时按文档建议改画对应尺寸预设而不是硬缩。边界与限制预算内的图才是这个类型超过 5 张表或 6 条外键按文档做法拆成子系统图并在图注声明而不是继续往图里塞。品牌 token 未定制前skill 会停在门禁处询问想直接用默认风格就明确选择proceed with the default。需要动效的有序讲解如逐步揭示级联删除路径是另一条路线——按 animation.md 的reveal/step/loop模式且静态帧必须完整可读本文的静态 schema 图默认none不引入脚本。到这里任务完成的判定是一个浏览器可打开的 HTML 文件列级外键与ON DELETE标签齐全self_check.py输出OK且每张表只承载当前评审故事需要的列和索引。【免费下载链接】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 画数据库 Schema 图：物理表、索引与列级外键
如何用 Diagram Design 画数据库 Schema 图物理表、索引与列级外键【免费下载链接】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当你要向评审或团队解释一段 DDL——真实表名、真实 SQL 类型、某列删掉时外键会发生什么——Diagram Design 的Database schema类型就是为这个场景设计的。它画的是物理 schema表框、列行、约束 chipPK/FK/UQ/NN、索引舱位以及锚定在具体列行上的列级外键连接线。产出一个自包含的 HTML SVG 文件双击即可在浏览器打开无构建步骤、无外部图片依赖。适用前提是项目里已能调用这个 skillClaude Code、Codex、Factory Droid 或 Pi 任一环境。先确认你需要的确实是 Schema 类型而不是 ERtype-db-schema.md 给出了明确的边界画 Schema讨论的是删掉一行时会发生什么——列类型、ON DELETE行为是重点外键必须连到两端的具体列行上。画 ER / 数据模型讨论的是Order 是什么——实体级对话关系线连的是框而不是列行字段只是普通列表见 type-er.md。两者不能混用把外键线画成框到框的连线在该类型的反模式清单里被明确点名那应该改用 ER在同一张图里混用概念实体名和物理表名也是反模式。准备工作让 skill 可用按你的宿主环境装一次来自 README.md 的 Install 一节# Claude Code /plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-design# Pi pi install https://github.com/cathrynlavery/diagram-designCodex 用codex plugin marketplace add cathrynlavery/diagram-design加codex plugin add diagram-designdiagram-designFactory Droid 用对应的droid plugin命令详见 README。首次在新项目里生成图时skill 有一个风格指南门禁如果 style-guide.md 还是默认 tokenpaper#f5f5f5、ink#2d3142、accent#eb6c36它会停下来询问你是否先做品牌 onboarding从网站 URL 提取、手动粘贴 token或直接沿用默认。不处理这一步它会拒绝把默认肤色的图直接交付进一个有品牌的项目。执行步骤从请求到 HTML 文件1. 让 agent 按类型参考画图直接描述你要的物理 schemaagent 会先声明计划选定的视觉类型、尺寸预设、复杂度预算会裁掉什么再渲染。例如要求它画出订单子系统customers、orders、order_items、products、billing.invoices五张表含 SQL 类型、约束和外键行为。如果不想走 agent也可以直接复制模板自己改来自 README.md 的 Quickstart 与 SKILL.md §10cp skills/diagram-design/assets/template.html my-schema.html然后把模板里的 eyebrow、h1 和 SVG 主体替换为你的 schema 内容并按 type-db-schema.md 的版式约定绘制。仓库里现成的完整示例是 example-db-schema.html浅色、example-db-schema-dark.html深色、example-db-schema-full.html完整 editorial 版三者可以直接打开对照。2. 遵循 Database schema 类型的版式约定type-db-schema.md 的核心规则逐条对应图中元素表框头部schema.table如public.orders配一个矩形TABLE类型标签下方 hairline 分隔出列区。列行固定 24px 行高保证外键连接器能可预测地锚定。每行左侧是列名Geist sans 12px右侧是 SQL 类型Geist Mono 9px如uuid、numeric(12,2)、timestamptz中间放约束 chipPK、FK、UQ、NN。缺 SQL 类型是反模式——类型是内容的一半。溢出行列超出预算时最后一行写成 N more columns。不要静默截断表。索引舱位可选的最终舱位用INDEXES眉标签引出只列与故事相关的索引示例里public.orders只列了idx_orders_customer_id、idx_orders_statusproducts只列了uq_products_sku。把表上所有索引都堆进去同样被列入反模式。外键连接器定义性规则每条外键线从源列行的垂直中心出发到被引用列行的垂直中心结束用正交圆角折线路由并在边上标注引用动作——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL。未标注的外键边是反模式因为ON DELETE行为正是评审者要看的东西。同列多外键防冲突当多条外键接到同一表的同一列行例如两个子表都引用父表主键不能全部锚定在列行中心点要围绕行中心对称偏移 ±8px让每条线各自可追踪。跨 schema 分组非默认 schema 的表放进一个虚线容器rx8、ink 0.02填充、ink 0.20虚线4,4描边左上角放 schema 名标签。先画分组矩形再让表覆盖其上。焦点规则全图只有 2 个 accent 元素——那条破坏性外键ON DELETE CASCADE边和标签合算一个加上级联落点表的头部色带只染 header不染整个框。如果 schema 里没有破坏性外键就保持无 accent不要随手提亮某张表。通用连接器规则来自 SKILL.md §6正交圆角折线强制r8弯角斜线直连直接判不合格、边标签与连线保持 6–10px 间距并带不透明遮罩、同一条边上的多个连接器各自独立锚点间距 ≥12px、连线不压过非端点盒子、箭头先于盒子绘制。3. 控制复杂度预算type-db-schema.md 给出的硬性预算限制上限表数5每表显示列行8外键边数6accent 元素2超预算时的处理方式是画子系统而不是整个数据库并在图注里说明这一点。示例example-db-schema.html正好踩线5 张表、4 条外键边其中一条ON DELETE CASCADE用 accent 色、一张跨 schema 的billing.invoices表放在BILLING分组里。结果验证用浏览器打开生成的 HTML——输出必须是单个自包含文件内嵌 CSS、内联 SVG除 Google Fonts 外无外部请求双击离线可看。在浏览器里逐条对照示例检查外键线是否锚到列行中心而不是连在框角每条外键边是否有ON DELETE …标签SQL 类型是否齐全索引舱位是否只列了与故事相关的索引accent 是否只出现在 CASCADE 边和落点表的 header 上。从 skill 安装目录跑自带校验脚本self_check.py 随 skill 打包检查可访问 SVG 契约、单文件安全规则python3 skill-dir/scripts/self_check.py my-schema.html通过时输出OK 文件路径失败时输出FAIL和具体原因。若在仓库检出中工作还可用几何校验器检查标签遮罩是否压到后绘制的节点python3 scripts/verify-geometry.py my-schema.htmlSKILL.md §9 清单第 6 条。常见反模式与修正type-db-schema.md 的反模式清单就是核对清单直接对号入座每张表画所有列 → 改成列预算 N more columns溢出行外键线框对框 → 改用列级锚定或换 ER 类型漏 SQL 类型 → 补齐类型是内容的一半外键边无标签 → 补ON DELETE …每行都挂约束 chip 直到 chip 本身成了噪音 → 只标有信息量的约束。可选分支导出为 PNG / SVGHTML 不是终点时用斜杠命令导出来自 README.md 与 export.md# Claude Code /diagram-design:export-diagram my-schema.html --png-only --scale3 # Pi /export-diagram my-schema.html --svg-only两种格式都只导出svg图本身-full变体里的卡片和页眉会被有意丢弃。PNG 导出依赖 Playwright 一次性安装会安装系统级 chromium 浏览器组件执行前确认环境允许pip install playwright playwright install chromiumexport.md 明确不自动安装、不自动导出——导出永远是手动触发。像素尺寸 viewBox× 缩放系数示例viewBox1080×560 在 scale 2 下得 2160×1120目标小于 1 倍或超过 4 倍时按文档建议改画对应尺寸预设而不是硬缩。边界与限制预算内的图才是这个类型超过 5 张表或 6 条外键按文档做法拆成子系统图并在图注声明而不是继续往图里塞。品牌 token 未定制前skill 会停在门禁处询问想直接用默认风格就明确选择proceed with the default。需要动效的有序讲解如逐步揭示级联删除路径是另一条路线——按 animation.md 的reveal/step/loop模式且静态帧必须完整可读本文的静态 schema 图默认none不引入脚本。到这里任务完成的判定是一个浏览器可打开的 HTML 文件列级外键与ON DELETE标签齐全self_check.py输出OK且每张表只承载当前评审故事需要的列和索引。【免费下载链接】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），仅供参考
