Archify 把一次缓存缺失请求拆成 12 条消息时序图官方示例跑通实录【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 是一个面向 AI Agent 的 Node.js 渲染与校验系统把一份小型的类型化 JSON IR中间表示编译成架构、工作流、时序、数据流、生命周期五种可验证的交互式图表每种都输出带动画与高清导出的自包含 HTML。这篇文章选定仓库里自带的缓存缺失请求时序图示例带你从渲染、拆文件、校验到交付走完全程。几分钟内把官方示例跑起来先装技能一条命令装到全局npx skills add tt-a1i/archify -g不用等装完才能看成品——仓库里已经带着渲染好的 HTML用浏览器打开examples/sequence-cache-miss-request.html你会看到 User、Web App、API、Auth、Redis、Postgres、Trace 这 7 个参与者横向排开12 条消息从上往下流动。想亲手复现再跑一条渲染命令node archify/bin/archify.mjs render sequence \ archify/examples/cache-miss-request.sequence.json cache-miss.html渲染器内置独立校验器不需要安装任何依赖命令成功后打开cache-miss.html效果和仓库成品一致。拿不准该画哪种图时还能问内置场景指南node archify/bin/archify.mjs guide 带缓存未命中的 API 请求 --json --lang zh它会返回推荐类型和配方。跑通之后先想清楚这张图到底在回答什么问题。这张图在回答什么问题架构图回答谁和谁相连而时序图回答谁在什么时刻调用了谁。当你要排查这次请求为什么慢需要的是经过几跳、缓存缺失后回源的代价、哪些调用挡在主路径上、哪些只是异步旁路。这张图把这三件事都压进了视觉约定里激活条每根参与者竖线上的一段色块表示忙碌时段。Postgres 只在 y438–496 区间有一小段激活条回源窗口很短一眼就能读出来消息风格variant共 5 种——emphasis标主请求路径return画安静的返回security专色给鉴权调用dashed留给set cache、emit trace这类非阻塞旁路default是普通消息分段3 个segment把时间线切成 Request、Fallback、Response trace 三幕用户感知的延迟和可观测性开销因此被分开而不是混成一条线。这三套约定的源头都在 81 行的archify/examples/cache-miss-request.sequence.json里下一节逐字段拆开看。8 个字段读懂调用链这份示例文件的顶层只有 8 个字段逐个说schema_version与diagram_type固定值1和sequence渲染器靠它们分流到对应管线meta标题、viewBox画布尺寸示例是[820, 760]、animation: trace箭头按调用顺序逐段点亮以及 3 个命名章节views——Request and identity、Cache fallback、Return and traceparticipants7 个参与者各自带id、语义typefrontend/backend/security/database/messagebus、label和sublabel。Redis 一行就是{ id: redis, type: database, label: Redis, sublabel: cache }messages12 支箭头每支指定from、to、垂直坐标y和variant。整条链最关键的一行只有 4 个字段{ id: cache-miss, from: redis, to: api, label: miss, variant: return }segments3 段背景色块from/to是 y 像素区间用来切分三幕activations6 根激活条标注各参与者的忙碌时段cards3 张旁注卡片Happy Path、Policy Fallback、Async Trace把解释性内容从画布上移走。字段约束写在Schema里messages至少 1 条每支箭头的y必须 ≥ 160variant只收 5 个枚举值。下一步先打开archify/schemas/sequence.schema.json对照你手头的 8 个字段核一遍。坏图会在哪一步被拦下来渲染管线是先 Schema 校验、再布局检查发现问题时直接以非零退出码报错而不是交给你一张坏图。时序渲染器内置的布局红线规则阈值消息垂直间距共享水平空间的消息之间 ≥ 28px箭头水平跨度两个参与者之间 ≥ 60px消息 y 坐标必须落在 [160, 画布高度 − 83]生命线可读带高度 ≥ 120px参与者排布最后一个盒子的右边缘不得越过画布宽度 − 40px放不下即失败把meta.quality_profile提到showcase后门槛更高9 项产物检查全部通过0 组合错误、0 警告才算过不相关的消息交叉成 X、短于 8px 的路由段都会被拦下。用官方示例验证一遍node archify/bin/archify.mjs validate sequence \ archify/examples/cache-miss-request.sequence.json --quality showcase --json输出 JSON 里ok为true且没有失败项就是交付前终检的通过基线。成品 HTML 还能做什么渲染出来的 HTML 不是一张静态图。打开examples/sequence-cache-miss-request.html挑三个最有体感的试分章讲解顶部 3 个章节按钮逐章聚焦相关参与者按Play story可以自动播放12 条消息按调用顺序逐一点亮路由追踪选中 Web App → API → Postgres 这条路径面板会显示 3 nodes · 2 directed hops · shortest authored route还能一键复制深链导出与分享卡右上角 Export 菜单支持复制 PNG 到剪贴板、下载静态图或带运动的 WebM以及生成 1200×630 的社交分享卡。需要交付给同事时deliver会把规格文件字节级冻结成快照再渲染输出 HTML 附带 SHA-256 回执——你分享的那一个文件和它背后的 JSON 对得上账。换成你的系统4 步走完列出参与者网关、鉴权、缓存、主库各归其语义type5–7 个为宜按时间写消息主路径emphasis、返回return、鉴权security、旁路埋点dashed给每支箭头一个递增的y切分时间线用 2–3 个segment分幕给忙碌但不长的服务补激活条跑完门禁再交付validate --quality showcase要求 0 错误 0 警告deliver出图后执行node archify/bin/archify.mjs visual-check output.html --json在 1440×900 到 2048×1320 四档桌面分辨率下确认不溢出。字段枚举、间距计算和几何修复规则随时查archify/references/authoring-contract.md。资源速查要查什么路径缓存缺失示例源文件archify/examples/cache-miss-request.sequence.json时序图 Schemaarchify/schemas/sequence.schema.json渲染规则与布局常量archify/renderers/sequence/README.md字段书写契约archify/references/authoring-contract.md渲染成品 HTMLexamples/sequence-cache-miss-request.html画得正确的那部分——Schema 校验、布局红线、showcase 九项检查、多分辨率防溢出——都由 Archify 兜底画得好的那部分留给你哪条消息该强调、时间线怎么分幕、用哪个视觉预设都是你用 8 个字段做出的选择。把自己的请求链讲清楚其余交给渲染器和校验器。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考