構(gòu))
Diagram Design 之 Database Schema 圖把 DDL 畫成可讀的物理表結(jié)構(gòu)【免費(fèi)下載鏈接】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是專門用于表達(dá)物理數(shù)據(jù)庫結(jié)構(gòu)的圖型真實表、真實 SQL 類型、真實約束、真實索引以及列到列column-to-column的外鍵連接。本文以 type-db-schema.md 為骨架結(jié)合倉庫內(nèi)的模板實現(xiàn)與驗證腳本完整講解該圖型的定位、布局規(guī)范、外鍵連接規(guī)則、焦點(diǎn)策略、復(fù)雜度預(yù)算與反模式讓你能直接用它產(chǎn)出遷移評審、真實庫結(jié)構(gòu)核查等場景的專業(yè)示意圖。一、圖型定位什么時候用 Database Schema什么時候用 ERtype-db-schema.md開篇就劃定了這條最重要的邊界線Database Schema 服務(wù)的是物理層真實表、真實 SQL 類型、真實約束、真實索引以及把一個列連接到另一個列的外鍵。它的本質(zhì)是把 DDL 變得可讀——適用于遷移migrations評審、真實數(shù)據(jù)庫結(jié)構(gòu)核查以及任何列類型是什么或ON DELETE行為是什么才是重點(diǎn)的場合。ER / Data Model 服務(wù)的是概念層關(guān)系線連接的是盒子兩端帶基數(shù)cardinality字段只是平鋪列表適合概念或領(lǐng)域討論。參見 type-er.md。兩者的分界可以一句話概括如果你在討論 Order是什么用 ER如果你在討論刪除一行時會發(fā)生什么用 Database Schema。Database Schema 圖獨(dú)有的能力正是 ER 不具備的外鍵連接器錨定在兩端的具體列行上column to column而不是盒子到盒子box to box。這也是該圖型存在的根本理由。二、布局規(guī)范2.1 表盒Table box結(jié)構(gòu)頭部色帶Header bandschema.table命名如public.orders使用 Geist sans 12px、weight 600右上角是矩形類型標(biāo)簽rx2不是膠囊 pill文字為TABLE。頭部與表體之間用 hairline 分隔。列行Column rows固定24px 行高使連接器可以可預(yù)測地錨定。每行包含列名Geist sans 12px左對齊SQL 類型Geist Mono 9pxmuted右對齊如uuid、text、numeric(12,2)、timestamptz約束芯片constraint chips位于兩者之間的小型rx2標(biāo)簽Geist Mono 8pxPK主鍵、FK外鍵、UQ唯一、NN非空。偶數(shù)行使用ink 0.02交替底色便于掃讀。溢出行Overflow row當(dāng)表列數(shù)超出預(yù)算時最后一行是 Geist Mono 9pxmuted的 N more columns。絕不靜默截斷一張表而不做說明。索引艙段Index compartment可選的最后一段用 hairline 與列區(qū)隔開頂部是 Geist Mono 8px 大寫INDEXES眉題下方列出索引名Geist Mono 9px如idx_orders_customer_id、uq_products_sku。只列對故事有意義的索引不列表上的全部索引。倉庫內(nèi)的 example-db-schema.html 提供了完整實現(xiàn)public.products表展示了溢出行 3 more columns第 226 行附近public.orders表展示了INDEXES艙段列出idx_orders_customer_id與idx_orders_status兩條索引。所有這些字號、行高、坐標(biāo)都遵循 style-guide.md 中的4px 網(wǎng)格硬規(guī)則所有尺寸、坐標(biāo)、間距可被 4 整除。2.2 外鍵連接器 —— 本圖型的定義性規(guī)則這是 Database Schema 圖區(qū)別于 ER 的核心type-db-schema.md用整節(jié)強(qiáng)調(diào)錨定每條 FK 邊從源列行的垂直中心出發(fā)終止于被引用列行的垂直中心。路由使用正交圓角肘orthogonal rounded elbows肘部公式見 SKILL.md §6 與 type-architecture.md兩折肘路徑r8交叉時使用 bridge/hop 原語次要箭頭在交叉點(diǎn)畫 8px 半圓弧絕不兩條都橋接。標(biāo)簽每條邊用 Geist Mono 8px 標(biāo)注參照行為——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL并使用標(biāo)準(zhǔn)的 6–10px 掩膜間隙標(biāo)簽底邊與連線之間必須有 6–10px 可見空隙掩膜矩形不接觸線。多 FK 接同一行的扇出fan-out規(guī)則固定 24px 行高保證了同一表邊緣不同行上接兩條 FK 時至少 12px 間距——行間距本身就是扇出空間。但當(dāng)兩條或多條 FK 接到同一行的同一邊緣時例如兩個子表都引用同一個父表主鍵若全部錨定在行的精確中心會在單點(diǎn)碰撞違反 SKILL.md §6 規(guī)則 4同一盒子邊緣上的多條連接器必須各有獨(dú)立連接點(diǎn)間距 ≥12px。此時應(yīng)圍繞行垂直中心對稱偏移各連接點(diǎn)兩條邊時各偏移±8px所有連接點(diǎn)保持在 24px 行帶內(nèi)且與相鄰點(diǎn)≥12px。這樣每條連接器仍可讀作接在這行上同時保持獨(dú)立可追蹤。這一約束在真實實現(xiàn)中有據(jù)可查example-db-schema.html中orders表的customer_id行y104 中心與order_items表經(jīng)圓角肘路由確保任何邊都不共享單一連接點(diǎn)。2.3 Schema 分組Schema grouping非默認(rèn) schema 中的表放在包含矩形containment rect內(nèi)rx8、ink 0.02填充、ink 0.20描邊虛線4,4左上角是 Geist Mono 8px 大寫追蹤tracked的 schema 標(biāo)簽。先畫分組矩形再讓表繪制在它之上保證表蓋住分組框的描邊。example-db-schema.html中BILLING分組x744,y284 起正是這樣實現(xiàn)的其中billing.invoices表被虛線矩形包裹左上角標(biāo)注BILLING。2.4 焦點(diǎn)規(guī)則Focal rule本圖型的 2 個 accent 元素是那條破壞性 FKON DELETE CASCADE——邊和它的標(biāo)簽合起來算一個元素因為帶標(biāo)簽的邊是一件事該 FK 級聯(lián)進(jìn)入的表——只在其頭部色帶上使用accent-tint絕不給整個盒子上色。除此之外圖上沒有任何元素是accent對應(yīng) style-guide.md 中accent 每圖最多 1–2 個的全局約束。若 schema 沒有破壞性 FK就沒有焦點(diǎn)元素——保持不 accent而不是隨便提升一張任意表。這是編輯式設(shè)計哲學(xué)見 SKILL.md §1Coral 是編輯信號不是旗幟在圖型級的具體落地。在example-db-schema-full.html中可以看到完整示范order_items.order_id → orders.id是唯一的ON DELETE CASCADE邊使用stroke#eb6c36accent與stroke-width1.2強(qiáng)調(diào)描邊其標(biāo)簽ON DELETE CASCADE同樣用 accent 色級聯(lián)的目標(biāo)表public.order_items頭部色帶填充rgba(235,108,54,0.08)即accent-tint其余四張表頭部均為rgba(45,49,66,0.04)的普通底色。三、復(fù)雜度預(yù)算type-db-schema.md給出了該圖型的明確預(yù)算同時它也是 SKILL.md §7 全局預(yù)算表中Max tables / columns / FKsdb schema 5 / 8 shown / 6的對應(yīng)條目維度上限表數(shù)量5每表展示的列行8外鍵邊6accent 元素2超出預(yù)算 → 展示子系統(tǒng)subsystem而不是整個數(shù)據(jù)庫并在圖注caption里說明。這與 SKILL.md §7 的通用規(guī)則一致如果超出預(yù)算拆成兩張圖概覽 明細(xì)。四、反模式清單Anti-patterns原文檔明確列出的反模式是生成與評審時的紅線?畫出每張表的每一列——schema 圖是關(guān)于某個子系統(tǒng)的一個論證不是\d的轉(zhuǎn)儲。?FK 線連接盒子到盒子box to box——那是 ER請改用 type-er.md。?缺失 SQL 類型——類型占了內(nèi)容的一半。?未標(biāo)注的 FK 邊——ON DELETE行為正是評審者要找的東西。?每一行都堆約束芯片直到芯片本身成為噪音。?索引艙段列出所有索引而不是對故事重要的那些。?在一張圖中混用概念實體名與物理表名。這些反模式與 SKILL.md §4 的通用反模式表互補(bǔ)如珊瑚色用在每個重要節(jié)點(diǎn)上、標(biāo)簽無掩膜、連接器對角線等構(gòu)成了完整的事后質(zhì)檢維度。五、可運(yùn)行的驗證與產(chǎn)出流程5.1 生成的三種變體按 SKILL.md §10每個圖型都提供三種變體Database Schema 也不例外見原文檔 Examples 節(jié)變體文件適用場景極簡淺色默認(rèn)example-db-schema.html截圖就緒圖 標(biāo)題暖紙底色極簡深色example-db-schema-dark.html深色站點(diǎn)、幻燈片、高對比文章全編輯式example-db-schema-full.html長文圖作為主角含頭部、圖注、卡片、頁腳example-db-schema-full.html的卡片區(qū)還示范了編輯式敘事用一張 coral 卡片點(diǎn)出唯一的破壞性邊Deleting an order cascades用 ink 卡片強(qiáng)調(diào)Column to column, not box to box用 muted 卡片說明Scoped to the subsystem。5.2 幾何驗證腳本SKILL.md §6 規(guī)則 6 與 §9 質(zhì)檢清單要求標(biāo)簽掩膜不得與后繪制的節(jié)點(diǎn)重疊因為節(jié)點(diǎn)繪制在標(biāo)簽之后節(jié)點(diǎn)填充會蓋住掩膜內(nèi)的文字。倉庫提供了專門的驗證腳本python3 scripts/verify-geometry.py skills/diagram-design/assets/example-db-schema.html python3 scripts/verify-geometry.py --allverify-geometry.py 的啟發(fā)式規(guī)則與模板一致節(jié)點(diǎn)是至少 60×40 的rect標(biāo)簽掩膜是寬 20–200、高 8–14 的rect寬度上限覆蓋了長 mono 掩膜板與 CJK 標(biāo)簽完全包含在節(jié)點(diǎn)內(nèi)的掩膜是徽章芯片合法而與后繪制節(jié)點(diǎn)部分重疊的掩膜則是缺陷——這正是 DB schema 圖中 FK 標(biāo)簽布局必須遵守的幾何約束。此外生成后還應(yīng)運(yùn)行技能自帶的 self_check.py無障礙 SVG 契約、單文件安全、動效基礎(chǔ)檢查。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.——描述內(nèi)容而非幾何形狀。六、實戰(zhàn)要點(diǎn)小結(jié)先判型討論實體與基數(shù) → ERtype-er.md討論物理表、列類型、ON DELETE行為 → Database Schema本圖型。列行固定 24px這是 FK 可預(yù)測錨定的地基也是扇出偏移±8px / ≥12px的前提。FK 邊必須列到列、必須帶ON DELETE標(biāo)簽、必須正交圓角肘路由標(biāo)簽與線保持 6–10px 掩膜間隙。accent 只給破壞性 FK 與其級聯(lián)目標(biāo)表的頭部色帶沒有破壞性 FK 就不加焦點(diǎn)。守住 5 表 / 8 列 / 6 FK / 2 accent 的預(yù)算超了畫子系統(tǒng)并在圖注中說明。用三種模板變體 verify-geometry.py self_check.py完成產(chǎn)出與質(zhì)檢閉環(huán)。相關(guān)資源圖型規(guī)范type-db-schema.md圖型選擇總覽SKILL.md設(shè)計令牌與排版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【免費(fèi)下載鏈接】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創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Diagram Design 之 Database Schema 圖：把 DDL 畫成可讀的物理表結(jié)構(gòu)
Diagram Design 之 Database Schema 圖把 DDL 畫成可讀的物理表結(jié)構(gòu)【免費(fèi)下載鏈接】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是專門用于表達(dá)物理數(shù)據(jù)庫結(jié)構(gòu)的圖型真實表、真實 SQL 類型、真實約束、真實索引以及列到列column-to-column的外鍵連接。本文以 type-db-schema.md 為骨架結(jié)合倉庫內(nèi)的模板實現(xiàn)與驗證腳本完整講解該圖型的定位、布局規(guī)范、外鍵連接規(guī)則、焦點(diǎn)策略、復(fù)雜度預(yù)算與反模式讓你能直接用它產(chǎn)出遷移評審、真實庫結(jié)構(gòu)核查等場景的專業(yè)示意圖。一、圖型定位什么時候用 Database Schema什么時候用 ERtype-db-schema.md開篇就劃定了這條最重要的邊界線Database Schema 服務(wù)的是物理層真實表、真實 SQL 類型、真實約束、真實索引以及把一個列連接到另一個列的外鍵。它的本質(zhì)是把 DDL 變得可讀——適用于遷移migrations評審、真實數(shù)據(jù)庫結(jié)構(gòu)核查以及任何列類型是什么或ON DELETE行為是什么才是重點(diǎn)的場合。ER / Data Model 服務(wù)的是概念層關(guān)系線連接的是盒子兩端帶基數(shù)cardinality字段只是平鋪列表適合概念或領(lǐng)域討論。參見 type-er.md。兩者的分界可以一句話概括如果你在討論 Order是什么用 ER如果你在討論刪除一行時會發(fā)生什么用 Database Schema。Database Schema 圖獨(dú)有的能力正是 ER 不具備的外鍵連接器錨定在兩端的具體列行上column to column而不是盒子到盒子box to box。這也是該圖型存在的根本理由。二、布局規(guī)范2.1 表盒Table box結(jié)構(gòu)頭部色帶Header bandschema.table命名如public.orders使用 Geist sans 12px、weight 600右上角是矩形類型標(biāo)簽rx2不是膠囊 pill文字為TABLE。頭部與表體之間用 hairline 分隔。列行Column rows固定24px 行高使連接器可以可預(yù)測地錨定。每行包含列名Geist sans 12px左對齊SQL 類型Geist Mono 9pxmuted右對齊如uuid、text、numeric(12,2)、timestamptz約束芯片constraint chips位于兩者之間的小型rx2標(biāo)簽Geist Mono 8pxPK主鍵、FK外鍵、UQ唯一、NN非空。偶數(shù)行使用ink 0.02交替底色便于掃讀。溢出行Overflow row當(dāng)表列數(shù)超出預(yù)算時最后一行是 Geist Mono 9pxmuted的 N more columns。絕不靜默截斷一張表而不做說明。索引艙段Index compartment可選的最后一段用 hairline 與列區(qū)隔開頂部是 Geist Mono 8px 大寫INDEXES眉題下方列出索引名Geist Mono 9px如idx_orders_customer_id、uq_products_sku。只列對故事有意義的索引不列表上的全部索引。倉庫內(nèi)的 example-db-schema.html 提供了完整實現(xiàn)public.products表展示了溢出行 3 more columns第 226 行附近public.orders表展示了INDEXES艙段列出idx_orders_customer_id與idx_orders_status兩條索引。所有這些字號、行高、坐標(biāo)都遵循 style-guide.md 中的4px 網(wǎng)格硬規(guī)則所有尺寸、坐標(biāo)、間距可被 4 整除。2.2 外鍵連接器 —— 本圖型的定義性規(guī)則這是 Database Schema 圖區(qū)別于 ER 的核心type-db-schema.md用整節(jié)強(qiáng)調(diào)錨定每條 FK 邊從源列行的垂直中心出發(fā)終止于被引用列行的垂直中心。路由使用正交圓角肘orthogonal rounded elbows肘部公式見 SKILL.md §6 與 type-architecture.md兩折肘路徑r8交叉時使用 bridge/hop 原語次要箭頭在交叉點(diǎn)畫 8px 半圓弧絕不兩條都橋接。標(biāo)簽每條邊用 Geist Mono 8px 標(biāo)注參照行為——ON DELETE CASCADE、ON DELETE RESTRICT、ON DELETE SET NULL并使用標(biāo)準(zhǔn)的 6–10px 掩膜間隙標(biāo)簽底邊與連線之間必須有 6–10px 可見空隙掩膜矩形不接觸線。多 FK 接同一行的扇出fan-out規(guī)則固定 24px 行高保證了同一表邊緣不同行上接兩條 FK 時至少 12px 間距——行間距本身就是扇出空間。但當(dāng)兩條或多條 FK 接到同一行的同一邊緣時例如兩個子表都引用同一個父表主鍵若全部錨定在行的精確中心會在單點(diǎn)碰撞違反 SKILL.md §6 規(guī)則 4同一盒子邊緣上的多條連接器必須各有獨(dú)立連接點(diǎn)間距 ≥12px。此時應(yīng)圍繞行垂直中心對稱偏移各連接點(diǎn)兩條邊時各偏移±8px所有連接點(diǎn)保持在 24px 行帶內(nèi)且與相鄰點(diǎn)≥12px。這樣每條連接器仍可讀作接在這行上同時保持獨(dú)立可追蹤。這一約束在真實實現(xiàn)中有據(jù)可查example-db-schema.html中orders表的customer_id行y104 中心與order_items表經(jīng)圓角肘路由確保任何邊都不共享單一連接點(diǎn)。2.3 Schema 分組Schema grouping非默認(rèn) schema 中的表放在包含矩形containment rect內(nèi)rx8、ink 0.02填充、ink 0.20描邊虛線4,4左上角是 Geist Mono 8px 大寫追蹤tracked的 schema 標(biāo)簽。先畫分組矩形再讓表繪制在它之上保證表蓋住分組框的描邊。example-db-schema.html中BILLING分組x744,y284 起正是這樣實現(xiàn)的其中billing.invoices表被虛線矩形包裹左上角標(biāo)注BILLING。2.4 焦點(diǎn)規(guī)則Focal rule本圖型的 2 個 accent 元素是那條破壞性 FKON DELETE CASCADE——邊和它的標(biāo)簽合起來算一個元素因為帶標(biāo)簽的邊是一件事該 FK 級聯(lián)進(jìn)入的表——只在其頭部色帶上使用accent-tint絕不給整個盒子上色。除此之外圖上沒有任何元素是accent對應(yīng) style-guide.md 中accent 每圖最多 1–2 個的全局約束。若 schema 沒有破壞性 FK就沒有焦點(diǎn)元素——保持不 accent而不是隨便提升一張任意表。這是編輯式設(shè)計哲學(xué)見 SKILL.md §1Coral 是編輯信號不是旗幟在圖型級的具體落地。在example-db-schema-full.html中可以看到完整示范order_items.order_id → orders.id是唯一的ON DELETE CASCADE邊使用stroke#eb6c36accent與stroke-width1.2強(qiáng)調(diào)描邊其標(biāo)簽ON DELETE CASCADE同樣用 accent 色級聯(lián)的目標(biāo)表public.order_items頭部色帶填充rgba(235,108,54,0.08)即accent-tint其余四張表頭部均為rgba(45,49,66,0.04)的普通底色。三、復(fù)雜度預(yù)算type-db-schema.md給出了該圖型的明確預(yù)算同時它也是 SKILL.md §7 全局預(yù)算表中Max tables / columns / FKsdb schema 5 / 8 shown / 6的對應(yīng)條目維度上限表數(shù)量5每表展示的列行8外鍵邊6accent 元素2超出預(yù)算 → 展示子系統(tǒng)subsystem而不是整個數(shù)據(jù)庫并在圖注caption里說明。這與 SKILL.md §7 的通用規(guī)則一致如果超出預(yù)算拆成兩張圖概覽 明細(xì)。四、反模式清單Anti-patterns原文檔明確列出的反模式是生成與評審時的紅線?畫出每張表的每一列——schema 圖是關(guān)于某個子系統(tǒng)的一個論證不是\d的轉(zhuǎn)儲。?FK 線連接盒子到盒子box to box——那是 ER請改用 type-er.md。?缺失 SQL 類型——類型占了內(nèi)容的一半。?未標(biāo)注的 FK 邊——ON DELETE行為正是評審者要找的東西。?每一行都堆約束芯片直到芯片本身成為噪音。?索引艙段列出所有索引而不是對故事重要的那些。?在一張圖中混用概念實體名與物理表名。這些反模式與 SKILL.md §4 的通用反模式表互補(bǔ)如珊瑚色用在每個重要節(jié)點(diǎn)上、標(biāo)簽無掩膜、連接器對角線等構(gòu)成了完整的事后質(zhì)檢維度。五、可運(yùn)行的驗證與產(chǎn)出流程5.1 生成的三種變體按 SKILL.md §10每個圖型都提供三種變體Database Schema 也不例外見原文檔 Examples 節(jié)變體文件適用場景極簡淺色默認(rèn)example-db-schema.html截圖就緒圖 標(biāo)題暖紙底色極簡深色example-db-schema-dark.html深色站點(diǎn)、幻燈片、高對比文章全編輯式example-db-schema-full.html長文圖作為主角含頭部、圖注、卡片、頁腳example-db-schema-full.html的卡片區(qū)還示范了編輯式敘事用一張 coral 卡片點(diǎn)出唯一的破壞性邊Deleting an order cascades用 ink 卡片強(qiáng)調(diào)Column to column, not box to box用 muted 卡片說明Scoped to the subsystem。5.2 幾何驗證腳本SKILL.md §6 規(guī)則 6 與 §9 質(zhì)檢清單要求標(biāo)簽掩膜不得與后繪制的節(jié)點(diǎn)重疊因為節(jié)點(diǎn)繪制在標(biāo)簽之后節(jié)點(diǎn)填充會蓋住掩膜內(nèi)的文字。倉庫提供了專門的驗證腳本python3 scripts/verify-geometry.py skills/diagram-design/assets/example-db-schema.html python3 scripts/verify-geometry.py --allverify-geometry.py 的啟發(fā)式規(guī)則與模板一致節(jié)點(diǎn)是至少 60×40 的rect標(biāo)簽掩膜是寬 20–200、高 8–14 的rect寬度上限覆蓋了長 mono 掩膜板與 CJK 標(biāo)簽完全包含在節(jié)點(diǎn)內(nèi)的掩膜是徽章芯片合法而與后繪制節(jié)點(diǎn)部分重疊的掩膜則是缺陷——這正是 DB schema 圖中 FK 標(biāo)簽布局必須遵守的幾何約束。此外生成后還應(yīng)運(yùn)行技能自帶的 self_check.py無障礙 SVG 契約、單文件安全、動效基礎(chǔ)檢查。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.——描述內(nèi)容而非幾何形狀。六、實戰(zhàn)要點(diǎn)小結(jié)先判型討論實體與基數(shù) → ERtype-er.md討論物理表、列類型、ON DELETE行為 → Database Schema本圖型。列行固定 24px這是 FK 可預(yù)測錨定的地基也是扇出偏移±8px / ≥12px的前提。FK 邊必須列到列、必須帶ON DELETE標(biāo)簽、必須正交圓角肘路由標(biāo)簽與線保持 6–10px 掩膜間隙。accent 只給破壞性 FK 與其級聯(lián)目標(biāo)表的頭部色帶沒有破壞性 FK 就不加焦點(diǎn)。守住 5 表 / 8 列 / 6 FK / 2 accent 的預(yù)算超了畫子系統(tǒng)并在圖注中說明。用三種模板變體 verify-geometry.py self_check.py完成產(chǎn)出與質(zhì)檢閉環(huán)。相關(guān)資源圖型規(guī)范type-db-schema.md圖型選擇總覽SKILL.md設(shè)計令牌與排版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【免費(fèi)下載鏈接】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創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考