资源 · DIAGRAM-DESIGN

架構圖唔使等設計師：Diagram Design 一句話出編輯級 SVG

【你公司張架構圖，係咪一路都係咁？】 投資者問你「你哋平台點運作？」，你想畫張圖。員工手冊要解釋部門點接力，你想畫張流程圖。第一反應：請設計師——排期、初稿、改稿，兩三個禮拜後收到張靚圖，但系統已經改咗，又要再畫過。 第二反應：自己上。PowerPoint 拉方框，連線對唔齊，字型唔統一。你望多兩眼，自己都覺得「呢張嘢點拎出去？」 再問 AI 幫手？又係另一鑊——返嚟嗰啲「AI 畫圖」：紫底藍光、圓角盒仔一式一樣、陰影疊到成撻。行內人一睇就知係 AI 求其整嘅。張圖放喺公司文件、官網、提案入面，第一印象即刻打折。 問題根子唔係「冇人識畫」，而係「畫圖冇一套標準」。呢個問題，而家有第三條路。 【一句話，出編輯級架構圖——仲要跟埋你公司個 Look】 Diagram Design 係一套「畫圖 Skill」——教 AI 幫手點樣畫靚圖嘅一套完整規則。佢唔係模板填空；佢係一套設計系統 + 審美閘門： 39 款圖型：架構、IT 現狀、流程圖、時序圖、狀態機、ER、時間線、泳道、象限、雷達、flywheel、巢狀、樹狀、組織圖、層疊、Venn、金字塔／漏斗、柱狀、線圖、甘特、散點…… 三個變體：簡約白底、簡約黑底、全編輯版，每個都係單一 HTML 檔，雙擊即開。 零外部依賴：冇 build、冇外掛圖片——一個 .html 自包含晒。 跟品牌：畀佢你公司網站網址，60 秒抽出顏色同字體，之後所有圖同一套 Look。 審美閘門：方框唔可以一式一樣、重點色限兩處、超過九個節點就拆兩張、連線直角唔斜插。點先算靚，寫死做可執行規則。 【憑咩信佢？兩萬八個星】 GitHub 28,541★／1,802 forks（2026-08-30 官方 API 實數）。2026 年 4 月中開源，四個月衝到呢個數，高峰期一日加 2,951★ 上 GitHub 全球 trending。作者 Cathryn Lavery——BestSelf.co 創辦人，本身唔係工程師，因為問 AI 返嚟全部圓角盒先整呢套。第三方 ExplainX、EveryAI、王若風技術博客全 curl 200。授權 MIT：開源免費，商用都得。 【邊個同事可以用？】 呢個 skill 唔係取代設計師——佢係接住「等設計師」之前嗰段：日常架構／流程／組織圖一句話出；對外文件同品牌一致；設計師時間留畀真正要手藝嘅嘢。用得著：老闆、營運、市場、任何要畫圖又唔想裝設計軟件嘅人。 【點樣落地？三步】 第一步，裝：pi install https://github.com/cathrynlavery/diagram-design。或者同你個 AI 幫手講：「幫我安裝 diagram-design 呢個 skill」。 第二步，講你想要咩圖：「幫我畫張架構圖：用戶 → API 閘道 → 三個服務，DB 喺下面。」畀網站網址做品牌對接。 第三步，收 HTML，雙擊，發出去。 【幾多錢？開源 MIT，自己唔使畀錢】 MIT License——個人用免費，商用、改嚟用都得（跟足 MIT 條款）。 【想即刻睇真啲？】 三個連結見下面卡片：GitHub 主頁、官方 gallery、現場 demo。