
Archify 實操一張時序圖講清緩存缺失的 API 調用鏈【免費下載鏈接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>項目地址: https://gitcode.com/GitHub_Trending/arch/archify排查這次請求為什么慢時日志給你的是碎片而一張時序圖給你的是因果。Archify 是一個面向 AI Agent 的圖表技能把代碼庫或一段系統(tǒng)描述編譯成五種可驗證的交互式圖表——架構圖、工作流圖、時序圖、數(shù)據(jù)流圖、生命周期圖產物是一份帶動畫、可多倍率導出的自包含 HTML。下面用官方緩存缺失請求示例把這條鏈路從寫、到驗、到講給人看完整走一遍。排查一次變慢的請求從一張能講清楚的圖開始設想這個場景用戶打開儀表盤頁面接口比平時慢了 300ms。你要給同事講清楚錢花在哪請求經過幾跳、鑒權花了多久、緩存是命中還是缺失、回源數(shù)據(jù)庫的窗口有多短??陬^講容易丟細節(jié)Mermaid 手畫又常常畫錯、畫丑最后還得截圖貼文檔。Archify 的思路是把畫圖拆成兩半語義由你和 Agent 描述空間布局與美觀交給渲染器兜底。你只寫一份帶類型的 JSON IR渲染器按 schema 嚴格校驗、做布局檢查參與者放不下或消息間距過密會直接報錯而不是給你一張壞圖。對時序圖sequence而言它專門負責誰在什么時候調用了誰主請求路徑、返回、鑒權、異步旁路各占一種視覺風格延遲與可觀測性開銷在圖上自然分離。Archify 是什么五類圖表一份自包含 HTML一句話定位Archify 是從語義到像素的確定性編譯管線——自然語言或 Mermaid 輸入 → Agent 推斷空間關系 → JSON IR Schema 校驗 → 類型化渲染器 布局規(guī)則檢查 → 獨立 HTML 多倍率導出。能力清單五種圖表類型architecture誰和誰相連、workflow流程分支、sequence調用時序、dataflow數(shù)據(jù)流動、lifecycle狀態(tài)機輸出物單一 HTML 文件內嵌 SVG深淺色主題可選 trace 動畫導出 PNG/靜態(tài)圖/WebM/社交分享卡質量門禁validate 探索期校驗、deliver 交付期終檢showcase 級別要求 0 錯誤 0 警告適配環(huán)境Node.js 渲染與校驗系統(tǒng)適配 Cursor、Claude Code、Codex CLI、OpenCode安裝 Archify 技能裝完先說這一句話安裝是一行命令npx skills add tt-a1i/archify -g裝完的第一句話可以直接這樣說Use archify to trace this API request with a cache miss. Agent 會按技能路由表選擇sequence類型并產出 JSON 源文件。不想裝、只想試一次也可以用npx skills use tt-a1i/archifyarchify --agent codex跑一回合。拿不準該用哪種圖時問內置場景指南node bin/archify.mjs guide 展示帶 Redis 緩存未命中的 API 請求 --json --lang zh它會推薦圖表類型并返回配方。注意配方只是參考圖要由你親手描述業(yè)務而不是機械套模板。讀一張緩存缺失時序圖7 個參與者、3 個分段、12 條消息倉庫里有個教科書級示例源文件在 archify/examples/cache-miss-request.sequence.json渲染成品是 examples/sequence-cache-miss-request.html。時間從上往下流7 個參與者橫向排開User → Web App → API → Auth → Redis → Postgres → Trace。整條鏈被 3 個分段切成三幕分段發(fā)生了什么關鍵消息Request用戶打開頁面Web App 發(fā)請求API 完成鑒權GET /dashboard、verify JWT、claims okFallbackAPI 讀 Redis 發(fā)現(xiàn) miss回源 Postgres 查詢read cache、miss、query profile metrics、rowsResponse trace寫回緩存、異步上報 trace、響應回到前端set cache、emit trace、200 JSON、render圖例把消息風格分成五類每類在圖上有明確的戲份emphasis主請求路徑用強調色是視線第一落點return返回消息安靜克制不搶正向調用的風頭security鑒權類調用單獨著色一眼定位安全交互dashed異步/非阻塞示例里set cache和emit trace兩條紫色虛線絕不壓過主鏈default常規(guī)交互無特殊語義時默認使用。激活條activations表示參與者的忙碌時段Postgres 只有一小段激活條直觀說明回源窗口很短Auth 的激活條只覆蓋鑒權窗口。這套約定寫在 archify/renderers/sequence/README.md 里。四步描述法把一條 API 調用鏈寫成 JSON時序圖源文件是一份帶類型的 JSON IR字段約束以 sequence.schema.json 為準。按四步寫每步都有最小示例可參照緩存缺失示例的對應塊。第 1 步參與者。列出鏈路上每個角色給id、語義typefrontend/backend/database/security 等和標簽{ id: redis, type: database, label: Redis, sublabel: cache }第 2 步消息。按時間順序寫每條箭頭指定from、to、垂直坐標y和風格variant{ id: cache-miss, from: redis, to: api, label: miss, variant: return }第 3 步分段與激活條。用segments的from/toy 像素區(qū)間把時間線切成 2–3 幕再給關鍵參與者加activations忙碌時段。第 4 步命名章節(jié)可選。在meta.views里配最多 5 個命名章節(jié)每章聲明focus參與者列表用于成品里的分章講解再開animation: trace讓箭頭按調用順序逐段點亮。緩存缺失示例配了 3 章Request and identity、Cache fallback、Return and trace。寫完就走管線。渲染器內置校驗器無需裝依賴node archify/renderers/sequence/render-sequence.mjs cache-miss-request.sequence.json output.html交付階段兩條命令收口node bin/archify.mjs validate sequence cache-miss-request.sequence.json --quality showcase --json node bin/archify.mjs deliver sequence cache-miss-request.sequence.json examples/sequence-cache-miss-request.htmldeliver會把規(guī)格文件字節(jié)級凍結成快照再渲染輸出 HTML 附帶 SHA-256 回執(zhí)——你分享給同事的那一個文件和它背后的 JSON 對得上。交付后再跑node bin/archify.mjs visual-check output.html --json在 1440×900 到 2048×1320 多檔桌面分辨率下確認不溢出。核心原則始終是布局有問題就報錯絕不畫出一張壞圖。更多字段約定見 archify/references/authoring-contract.md 與中文 authoring-cookbook。打開成品 HTML分章播放、路由追蹤與換你自己的項目用瀏覽器打開渲染好的 HTML它不是一張靜態(tài)圖分章講解Guided views頂部 3 個章節(jié)按鈕逐章聚焦相關參與者Play story自動按調用順序點亮整條鏈路由追蹤Route probe選中 Web App 到 Postgres 的路徑面板顯示3 nodes · 2 directed hops · shortest authored route可復制深鏈或導出 1200×630 的路由分享卡片主題與導出右上角切換 Deep 深淺色Export 菜單支持復制 PNG 到剪貼板、下載靜態(tài)圖、WebM 運動格式和社交分享卡。現(xiàn)在把示例換成你自己的系統(tǒng)落地清單就四步列出這條請求鏈的參與者網(wǎng)關、鑒權、緩存、主庫……語義type各歸其位按時間順序寫消息主路徑用emphasis返回用return鑒權用security旁路埋點用dashed用 2–3 個 segment 切分時間線給關鍵服務加激活條跑 validate → deliver → visual-check多檔分辨率確認不溢出。7 個參與者、3 個分段、不到 100 行 JSON一條完整的 API 調用鏈就講完了。畫得好看、畫得正確這兩件難事由 Archify 兜底你只需要講清楚業(yè)務本身?!久赓M下載鏈接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>項目地址: https://gitcode.com/GitHub_Trending/arch/archify創(chuàng)作聲明:本文部分內容由AI輔助生成(AIGC),僅供參考