Communitygithub.com

amirtaherkhani/diago

Diago 將工程工作轉化為基於 AI、證據驅動的軟體圖表,適用於 Codex 和 Claude。

diago 是什麼?

Diago 是一個 AI 輔助的軟體圖表生成工具,它能讓工程師以文字規格書為基礎,透過 AI 代理(如 Claude 或 Codex)自動建立高品質的互動式 HTML 圖表。此技能支援架構、工作流程、序列、資料流和生命週期等五種圖表類型,並遵循嚴格的創建與驗證流程。使用者透過小型 JSON 規格檔定義圖表結構,Diago 則利用其渲染器將其轉換為自包含的 HTML 檔案,內建主題切換、縮放、搜尋等功能。其核心強調「證據驅動」:AI 必須根據提供的規格與範例進行創作,並透過嚴謹的驗證步驟(validate 與 deliver)確保圖表品質,避免憑空臆測。若驗證失敗,AI 需根據診斷資訊進行修正,並在無法改進時誠實回報。此工具特別適合開發者用於文件化、簡報或視覺化複雜的系統架構與流程。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add amirtaherkhani/diago

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Archify

從一個小型型別定義的 JSON 規格書中,建立一個自包含、可互動的 HTML 圖表。靜態輸出是預設值;僅在使用者要求示範或簡報時才啟用動畫。

快速創作路徑

對於一般的圖表生成,請使用此有限路徑。除非使用者詢問這些功能,否則請勿閱讀選用的檢視器執行時期參考文件。

  1. 從問題中選擇 architecture、workflow、sequence、dataflow 或 lifecycle。

  2. 讀取 schemas/ 中的一個對應 schema、schemas/common.schema.json,以及 examples/ 中的一個對應 JSON 範例。僅讀取這些檔案。全新的創作意味著新的穩定 ID、領域詞彙和版面配置;將範例用於欄位形狀,而非事實。

  3. 先產出成品:下一個工具動作必須寫入候選檔案。在檢查渲染器內部實作之前,先寫入候選檔案。請勿以文字描述規劃精確座標。從一條清晰的主要路徑、簡短的側分支、稀疏的標籤以及最多 12 個主要節點開始。將 meta.quality_profile 設定為 "showcase",除非使用者明確要求一個密集的 standard 地圖。從自動化路線和標籤開始。在診斷要求之前,請勿加入 via、channelX、channelY 或 labelAt;每次修復最多套用一項診斷出的幾何控制項。

  4. 在每次編輯候選檔案後以及交接前立即進行驗證:

    node bin/archify.mjs validate <type> <candidate.json> --quality showcase --json
    

    一份僅包含 4 項成品檢查的收據是基本驗證,絕非 showcase 驗收。showcase 通過必須回報所有 9 項成品檢查,且無組合錯誤與警告。如果候選檔案省略或拼錯了 meta.quality_profile 欄位,請在處理幾何問題前修正它。通過最終驗證即凍結候選檔案:之後絕不再編輯它。

  5. 對於已交付的 HTML,deliver 是最終的驗收指令:

    node bin/archify.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json
    

    非零的結束狀態絕不能被描述為成功。如果驗證失敗,僅修改診斷出的 subject,驗證 evidence,從 supportedFixes 中選擇,然後重新執行。在客觀錯誤計數達到新最小值前,持續進行重點修正。如果連續兩輪都未改善此最佳計數,請停止並如實回報未解決的診斷結果。

在第一個候選檔案產生之前,請勿讀取 renderers/shared/geometry.mjs、渲染器原始碼、驗證器原始碼、測試或基準程式碼。僅在遇到不支援的內部診斷或兩次重點修復失敗後,才檢查實作程式碼。

生命週期注意事項:階段欄位 0..4 佔據主軌道;事件/結果欄位 0..2 在後續階段下方對齊。可復原狀態使用 type: "failure" 加上一條返回作用中狀態的真實轉換。

類型路由

類型用途
architecture元件、服務、雲端/安全邊界、基礎架構
workflow流程、核准關卡、工具呼叫、操作手冊、CI/CD
sequenceAPI 呼叫鏈、請求生命週期、非同步追蹤、回傳值
dataflow管線、ETL/ELT、譜系、治理、消費者
lifecycle狀態/狀態轉換、重試、等待與終止狀態

當不明確時,執行 node bin/archify.mjs guide "<scenario>" --json。情境證明範例是結構性參考,而非可複製的事實。

Mermaid 輸入

讀取 Mermaid 以了解拓撲和含義,然後創作全新的 Archify JSON;請勿機械地呈現 Mermaid 樣式。

  • flowchart / graph → workflow,或針對元件地圖改用 architecture。
  • sequenceDiagram → sequence;參與者成為語義參與者,箭頭成為訊息。
  • stateDiagram → lifecycle;狀態和轉換保留其含義,而非 Mermaid 樣式。

創作不變規則

  • 一條清晰的主要路徑;側分支從最近的主要路徑節點分出。在加入路由控制之前,先移除低價值的邊緣。
  • 對於誠實的 auto 預設值,省略 meta.legend。需要時,僅使用 mode: auto|all|hidden 以及渲染器支援的 entries.<kind>.label|visible;標籤絕不改變語義。
  • 元件類型為 frontend、backend、database、cloud、security、messagebus 和 external;變體為 default、emphasis、security 和 dashed。
  • 間距意指清晰間隙,而非中心距離。對於關係標籤,清晰間隙必須超過其測量的遮罩寬度;否則,請省略標籤或特意移動它。
  • 自動化路線擁有其端點側邊的控制權。側邊是一個方向合約:第一個和最後一個區段必須垂直進出該側邊。
  • 自動化連接埠分散是 architecture、workflow、data-flow 和 lifecycle 的預設渲染器行為。它會跳過單一關係以及明確的 via、channelX、channelY、labelAt 或非 auto 路線。近乎平行的連接埠會使用外部橋接,因此自動化路由無法建立小於 8px 的區段或小於 16px 的內部轉彎。
  • 絕不接受邊緣跨越不相關的不透明節點、模糊的共享通道,或關係標籤遮蓋另一條路線。

僅在需要欄位列舉、間距計算、幾何修復規則、儲存庫證據或特定模式佈置時,才讀取 references/authoring-contract.md。

交付

在修復期間使用 validate,並為最終驗收使用一次 deliver。交付會將精確的規格位元組凍結到私有的相同目錄快照中,渲染並檢查該快照,原子性地提交 HTML,並回報規格與成品的 SHA-256 及位元組計數。

僅在使用者想要立即在本機預覽時,才加入 --open。對於活躍的桌面創作循環,可選用指令為:

node bin/archify.mjs preview <type> <input>.json <output>.html --quality showcase

預設情況下絕不啟動預覽。在使用預覽、儲存庫證據、匯出收據、視覺審查或提交後開啟時,請讀取 references/delivery-contract.md。

選用檢視器功能

產生的 HTML 已包含主題切換、平移/縮放、搜尋、焦點、關係追蹤、語義檢視、簡報和誠實的匯出功能。這些是閱讀器功能,而非額外的創作工作。meta.animation: "trace" 是選擇加入的;meta.views 是選用的,且應包含最多五個策劃章節。

僅在使用者明確要求分享卡片、路線/觸及卡片、動畫、引導故事、深層連結、簡報、搜尋/焦點或任何其他檢視器執行時期功能時,才讀取 references/viewer-runtime.md。

設定與備援

在技能套件內無需安裝。使用以下方式驗證:

node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>

當 shell 存取不可用時,手動將架構 SVG 放入 assets/template.html,使用 CSS 語義類別而非內嵌顏色,並遵循 references/delivery-contract.md 中的視覺審查合約。

輸出

回傳檢查過的 HTML 路徑、圖表類型、驗證摘要、規格/成品收據,以及真實的視覺審查狀態。請勿將非零指令的結果描述為成功,也勿聲稱執行了您並未進行的視覺檢查。

相關技能