Diagram Design 快速上手指南5 分鐘裝好一句話出 44 種圖【免費(fèi)下載鏈接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/di/diagram-design你找 AI 編碼助手畫(huà)圖拿回來(lái)的通常是圓角框加熒光箭頭能看但發(fā)不出去。Diagram Design 是裝進(jìn) Claude Code、Codex 這類 AI Agent 的圖表設(shè)計(jì)技能一句話描述需求它直接產(chǎn)出 44 種圖型之一的自包含 HTMLSVG 文件雙擊即開(kāi)不依賴任何渲染庫(kù)。這篇指南覆蓋四件事裝好它、出第一張圖、把圖換成你的品牌色、重繪手頭已有的舊圖。裝到能用大約 5 分鐘。? 5 分鐘從 clone 到打開(kāi)第一張圖先選裝法裝法你得到什么代價(jià)插件市場(chǎng)Claude Code 走/pluginCodex 走codex plugin自動(dòng)更新外加/export-diagram、/import-mermaid等斜杠命令你改過(guò)的style-guide.md可能被更新覆蓋clone 軟鏈接一份可自由改的本地副本樣式改動(dòng)不會(huì)被沖掉更新要自己手動(dòng)拉只想最快體驗(yàn)就選插件市場(chǎng)打算動(dòng)style-guide就選 clone。clone 裝法兩條命令git clone https://gitcode.com/GitHub_Trending/di/diagram-design ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design10 秒驗(yàn)證雙擊打開(kāi) skills/diagram-design/assets/index.html。預(yù)期結(jié)果瀏覽器彈出一個(gè)畫(huà)廊44 種圖型按淺色 / 深色 / 完整編輯版 3 個(gè) tab 排列隨便雙擊一個(gè) example 文件離線就能開(kāi)沒(méi)有構(gòu)建步驟。畫(huà)廊翻得動(dòng)就說(shuō)明裝好了。裝到驗(yàn)證的完整步驟在 docs/cookbook.md。出第一張圖在會(huì)話里直接說(shuō)Make me an architecture diagram of my app: frontend, backend, database, Redis cache.它動(dòng)筆前先報(bào)方案選了什么圖型、什么尺寸、超預(yù)算的部分砍什么。你不攔它就直接出圖產(chǎn)出就是一個(gè).html。想換方向也簡(jiǎn)單把 architecture 換成 quadrant拿到的就是 2×2 定位圖。架構(gòu)圖示例強(qiáng)調(diào)色只落在 1-2 個(gè)關(guān)鍵節(jié)點(diǎn)其余全部是墨色和 1px 細(xì)線。 出圖前先過(guò)預(yù)算9 個(gè)節(jié)點(diǎn)、12 條箭頭的硬上限它不是一問(wèn)一答的畫(huà)圖機(jī)動(dòng)筆前有一道減法閘門。復(fù)雜度預(yù)算每張圖一份指標(biāo)上限超了怎么辦節(jié)點(diǎn)數(shù)9拆成總覽 細(xì)節(jié)兩張箭頭 / 狀態(tài)遷移12先刪從布局就能讀出來(lái)的那些強(qiáng)調(diào)色元素2還想加第 3 個(gè)說(shuō)明你還沒(méi)想好焦點(diǎn)旁白標(biāo)注2合并成一句目標(biāo)密度4/10圖完成的標(biāo)準(zhǔn)是不能再刪任何東西網(wǎng)格不是建議是硬約束。所有坐標(biāo)、尺寸、間距必須是 4 的倍數(shù)字號(hào)走 8 / 12 / 16 / 20 / 24 / 28 的刻度。這條規(guī)則由 CI 的幾何校驗(yàn)逐條檢查目的只有一個(gè)不讓圖看起來(lái)像 AI 生成的。全部允許值見(jiàn) layout-budget.md。減法哲學(xué)是寫死的。每個(gè)節(jié)點(diǎn)必須掙得自己的位置兩個(gè)總是一起出現(xiàn)的節(jié)點(diǎn)合成一個(gè)布局已經(jīng)說(shuō)明關(guān)系的箭頭直接刪掉。流程圖示例分支決策邏輯連接線全部走圓角直角走線沒(méi)有一條對(duì)角線。換一句話就是另一種圖型預(yù)算照算Give me a sequence diagram of the OAuth handshake.時(shí)序圖示例OAuth 令牌刷新過(guò)程中各角色隨時(shí)間的消息傳遞。 60 秒把 44 種圖換成你的品牌色默認(rèn)皮膚白煙紙底 焦橙強(qiáng)調(diào)色直接截圖不丟人但讓它長(zhǎng)在你的品牌上更好。把官網(wǎng) URL 丟給它onboard diagram-design to https://yoursite.com它抓首頁(yè)、提取主色板和字體棧、映射到 5 個(gè)語(yǔ)義角色然后給你看一份 diff 提案——你說(shuō) apply它才落盤。之后每張圖都繼承這套皮膚不用逐類型調(diào)。5 個(gè)語(yǔ)義角色所有圖型只認(rèn)角色名不認(rèn)色值角色落在圖上的哪里默認(rèn)淺色值paper頁(yè)面背景、默認(rèn)節(jié)點(diǎn)填充#f5f5f5ink主文本、主線#2d3142muted次要文本、默認(rèn)箭頭#4f5d75accent焦點(diǎn)元素每圖最多 1-2 處#bf4520linkHTTP / 外部調(diào)用箭頭#2e5aa8寫色值前自動(dòng)過(guò)對(duì)比度。ink對(duì)paper必須 ≥ 4.5:1WCAG AA。不過(guò)關(guān)時(shí)它給出調(diào)整后的值并解釋原因你確認(rèn)才落盤不會(huì)硬寫。字體只認(rèn)兩種結(jié)果精確匹配或明說(shuō) fallback。自定義托管字體會(huì)被標(biāo)成 fallback保留默認(rèn)字體方案絕不靜默換成系統(tǒng)字體。完事附一份保真回執(zhí)采樣了哪些頁(yè)面、每個(gè)色值落在哪個(gè)角色、字體是精確還是回退。不想走自動(dòng)流程手動(dòng)改 style-guide.md 一張表就夠全部 44 種圖型都從它讀色。多客戶并行onboard 一次存成命名 profile客戶項(xiàng)目里放一個(gè).diagram-design標(biāo)記多個(gè)品牌互不覆蓋存儲(chǔ)與恢復(fù)契約在 profiles.md。層次結(jié)構(gòu)圖示例換膚后整套圖型自動(dòng)繼承新色板節(jié)點(diǎn)、箭頭、標(biāo)注一次到位。?? 手頭的 draw.io 和 Mermaid 圖一句話重繪舊圖不用推倒指給技能重畫(huà)。它的做法是重繪不是轉(zhuǎn)換源坐標(biāo)、源配色、源字體全部丟掉保留的是組件、關(guān)系、分組和方向。一個(gè) 12 節(jié)點(diǎn)的 draw.io 文件可以壓成 7 個(gè)節(jié)點(diǎn)的版本去發(fā)博客。4 個(gè)旋鈕動(dòng)筆前定旋鈕可選值影響什么formathtml·svg·png·htmlpng交付物SVG 進(jìn) FigmaPNG 進(jìn)幻燈片HTML 上網(wǎng)頁(yè)sizedoc-inline、slide-16x9、print-a4-landscape等 10 檔viewBox 和字號(hào)刻度投影圖給 16px 節(jié)點(diǎn)名不給 12pxdetailfaithful≤24·balanced≤12·simplified≤7源文件還剩多少按固定降級(jí)階梯砍audienceengineer·mixed·executive改措辭不改數(shù)量JWT · RS256 · :8443最后會(huì)變成Sign-in每次導(dǎo)入結(jié)束有一份保真臺(tái)賬合并了什么、壓縮了什么、丟了什么逐條列出來(lái)。你本來(lái)就知道源長(zhǎng)什么樣不如直接說(shuō)清楚。Mermaid 走這條命令.mmd文件和 Markdown 里的 mermaid 代碼塊都認(rèn)規(guī)范見(jiàn) import-mermaid.md/diagram-design:import-mermaid README.md --diagramall導(dǎo)入重繪示例源文件的多種粉彩填充被收斂成一個(gè)強(qiáng)調(diào)色手拖坐標(biāo)落回 4px 網(wǎng)格。 3 種皮膚1 條命令導(dǎo)出 PNG每種圖型都自帶 3 個(gè)靜態(tài)變體按投放場(chǎng)景挑變體模板給誰(shuí)用簡(jiǎn)約淺色默認(rèn)template.html截圖即用暖色紙底簡(jiǎn)約深色template-dark.html深色站點(diǎn)、投影場(chǎng)景完整編輯版template-full.html長(zhǎng)文配圖、圖是主角時(shí)導(dǎo)出就一句話Export this diagram as SVG and PNG.SVG 只保留 SVG 本體注入字體后在 Figma、Illustrator 里獨(dú)立渲染-full變體的摘要卡和頁(yè)頭會(huì)被剝掉。PNG 默認(rèn) 2×走 Playwright一次性裝好即可pip install playwright playwright install chromium出圖后可以自己驗(yàn)貨。對(duì)生成文件跑python3 skills/diagram-design/scripts/self_check.py file輸出OK表示可訪問(wèn)契約、單文件安全這些檢查全過(guò)。完整導(dǎo)出流程見(jiàn) export.md。? 新手最常問(wèn)的 4 個(gè)問(wèn)題產(chǎn)出的 .html 能進(jìn) Git diff 嗎不能當(dāng)源碼用。它是成品文件不是文本格式?jīng)]有可 diff 的行。文檔活在 Git 里、每周都在變的場(chǎng)景Mermaid 更合適Diagram Design 給的是你要發(fā)出去的那張圖。同一句話跑兩次布局為什么略有不同這是明說(shuō)的取舍布局由模型決定受 4px 網(wǎng)格和幾何校驗(yàn)約束但不鎖像素。要逐像素穩(wěn)定導(dǎo)出 SVG 存版之后改圖走再問(wèn)一次而不是手改文件。想要手繪感或終端感呢手繪版套一個(gè) SVG 擾動(dòng)濾鏡只晃線條不晃文字適合博客隨筆技術(shù)文檔別用規(guī)范在 primitive-sketchy.md。終端版換成 CLI 窗口外框走 primitive-terminal.md。想給圖補(bǔ)一句旁白用斜體襯線 虛線引導(dǎo)線的標(biāo)注氣泡每圖最多 2 個(gè)見(jiàn) primitive-annotation.md。多個(gè)客戶品牌怎么并行onboard 的結(jié)果存成命名 profile每個(gè)客戶項(xiàng)目放一個(gè).diagram-design標(biāo)記指向各自的 slug并行工作區(qū)各讀各的品牌不覆蓋共享的style-guide.md。圖庫(kù)就放在 assets/index.html44 種圖型、每種 3 個(gè)皮膚。別再對(duì)著三頁(yè)文字解釋你的系統(tǒng)了——挑一個(gè)最接近本周要畫(huà)的圖型用一句話讓它畫(huà)出來(lái)?！久赓M(fèi)下載鏈接】diagram-designEditorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 44 diagram types. Self-contained HTML SVG. No shadows. No Mermaid slop.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/di/diagram-design創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考