ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Archify 实操:一张时序图讲清缓存缺失的 API 调用链

Archify 实操:一张时序图讲清缓存缺失的 API 调用链 Archify 实操一张时序图讲清缓存缺失的 API 调用链【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify排查这次请求为什么慢时日志给你的是碎片而一张时序图给你的是因果。Archify 是一个面向 AI Agent 的图表技能把代码库或一段系统描述编译成五种可验证的交互式图表——架构图、工作流图、时序图、数据流图、生命周期图产物是一份带动画、可多倍率导出的自包含 HTML。下面用官方缓存缺失请求示例把这条链路从写、到验、到讲给人看完整走一遍。排查一次变慢的请求从一张能讲清楚的图开始设想这个场景用户打开仪表盘页面接口比平时慢了 300ms。你要给同事讲清楚钱花在哪请求经过几跳、鉴权花了多久、缓存是命中还是缺失、回源数据库的窗口有多短。口头讲容易丢细节Mermaid 手画又常常画错、画丑最后还得截图贴文档。Archify 的思路是把画图拆成两半语义由你和 Agent 描述空间布局与美观交给渲染器兜底。你只写一份带类型的 JSON IR渲染器按 schema 严格校验、做布局检查参与者放不下或消息间距过密会直接报错而不是给你一张坏图。对时序图sequence而言它专门负责谁在什么时候调用了谁主请求路径、返回、鉴权、异步旁路各占一种视觉风格延迟与可观测性开销在图上自然分离。Archify 是什么五类图表一份自包含 HTML一句话定位Archify 是从语义到像素的确定性编译管线——自然语言或 Mermaid 输入 → Agent 推断空间关系 → JSON IR Schema 校验 → 类型化渲染器 布局规则检查 → 独立 HTML 多倍率导出。能力清单五种图表类型architecture谁和谁相连、workflow流程分支、sequence调用时序、dataflow数据流动、lifecycle状态机输出物单一 HTML 文件内嵌 SVG深浅色主题可选 trace 动画导出 PNG/静态图/WebM/社交分享卡质量门禁validate 探索期校验、deliver 交付期终检showcase 级别要求 0 错误 0 警告适配环境Node.js 渲染与校验系统适配 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它会推荐图表类型并返回配方。注意配方只是参考图要由你亲手描述业务而不是机械套模板。读一张缓存缺失时序图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 个分段切成三幕分段发生了什么关键消息Request用户打开页面Web App 发请求API 完成鉴权GET /dashboard、verify JWT、claims okFallbackAPI 读 Redis 发现 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常规交互无特殊语义时默认使用。激活条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 像素区间把时间线切成 2–3 幕再给关键参与者加activations忙碌时段。第 4 步命名章节可选。在meta.views里配最多 5 个命名章节每章声明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会把规格文件字节级冻结成快照再渲染输出 HTML 附带 SHA-256 回执——你分享给同事的那一个文件和它背后的 JSON 对得上。交付后再跑node bin/archify.mjs visual-check output.html --json在 1440×900 到 2048×1320 多档桌面分辨率下确认不溢出。核心原则始终是布局有问题就报错绝不画出一张坏图。更多字段约定见 archify/references/authoring-contract.md 与中文 authoring-cookbook。打开成品 HTML分章播放、路由追踪与换你自己的项目用浏览器打开渲染好的 HTML它不是一张静态图分章讲解Guided views顶部 3 个章节按钮逐章聚焦相关参与者Play story自动按调用顺序点亮整条链路由追踪Route probe选中 Web App 到 Postgres 的路径面板显示3 nodes · 2 directed hops · shortest authored route可复制深链或导出 1200×630 的路由分享卡片主题与导出右上角切换 Deep 深浅色Export 菜单支持复制 PNG 到剪贴板、下载静态图、WebM 运动格式和社交分享卡。现在把示例换成你自己的系统落地清单就四步列出这条请求链的参与者网关、鉴权、缓存、主库……语义type各归其位按时间顺序写消息主路径用emphasis返回用return鉴权用security旁路埋点用dashed用 2–3 个 segment 切分时间线给关键服务加激活条跑 validate → deliver → visual-check多档分辨率确认不溢出。7 个参与者、3 个分段、不到 100 行 JSON一条完整的 API 调用链就讲完了。画得好看、画得正确这两件难事由 Archify 兜底你只需要讲清楚业务本身。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表