企业官网建设流程全解析

用 Archify 数据流图画出事件管线全链路：产品分析场景零配置实操

【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify

Archify 是面向 AI Agent 的图表技能，能把系统描述编译成可校验的交互式数据流图。本文跟着官方"产品分析数据流"示例走一遍完整管线：事件采集、PII 隔离、存储到消费，从零配置安装到 0 错误 0 警告交付，只需几行命令。

埋点链路说不清时，先画一张数据流图

产品数据看板对不上了：Web 端的点击量进了事件流，但 PII 字段到底在哪个环节被拦下来、特征库的每日批处理从哪张表派生，没人说得清。口头讲"数据从左流到右"毫无说服力，画架构图又只表达"谁连着谁"，表达不了数据以什么身份、沿着哪条路径流转。这正是数据流图（data flow diagram，标注数据来源、转换与去向的图）的用武之地，而 Archify 把它做成了 Agent 可直接生成的产物。

一条 npx 命令装好 Archify 数据流技能

Archify 是 Node.js 渲染与校验系统，适配 Cursor、Claude Code、Codex CLI 和 OpenCode。在终端执行：

npx skills add tt-a1i/archify -g

装好后对 Agent 说一句话即可："Use archify to map our product event pipeline as a data flow diagram." 不想安装也可以先试一次：npx skills use tt-a1i/archify@archify --agent codex。全程不写一行配置，产出就是一个可直接双击打开的 HTML 文件：

官方产品分析示例：10 个节点、5 个阶段全拆解

仓库自带示例 product-analytics.dataflow.json 是一个教科书级管线：10 个节点按 5 个阶段（stages，管线生命周期分带）横向排开，从左到右依次是 Sources → Ingest → Process → Store → Consume。

渲染成品在 examples/dataflow-product-analytics.html：

注意两条风格约定：主数据路径（clickstream、accepted events、normalized facts）用emphasis强调色；所有触碰 PII 的边（identity map、restricted join）单独标成security色，于是敏感数据边界和常规热路径在图上一眼分离。

6 个字段撑起整张管线图

源文件本质是一份带类型的 JSON IR，骨架只有几个核心字段（完整约束见 dataflow.schema.json）：

"diagram_type": "dataflow" "stages": [{ "label": "Sources" }, { "label": "Ingest" }] "nodes": [{ "id": "web", "type": "frontend", "label": "Web App", "stage": 0, "row": 0 }] "flows": [{ "from": "web", "to": "edge", "label": "clickstream", "variant": "emphasis" }] "views": [{ "id": "consent-boundary", "label": "Consent and PII", "focus": ["edge", "consent", "pii"] }]

• diagram_type：声明图表类型，路由到对应渲染器；
• stages：阶段分带，2～5 个，决定节点横向位置；
• nodes：节点含语义type（frontend/database/security等）和stage/row坐标；
• flows：数据流箭头，variant控制视觉风格（emphasis/security/dashed/default）；
• views：最多 5 个命名章节，示例配了 Collection path、Consent and PII、Curated consumers 三章。

标签写数据资产本身（clickstream、feature vectors），而不是泛泛的 API 动词，这是渲染器文档明确的设计规则。

0 错误 0 警告：校验与交付的确定性管线

整条流程是"从语义到像素"的确定性编译：Agent 生成 JSON IR → schema 校验 → 布局规则检查（节点重叠、标签越界、连线穿过无关节点等直接报错退出，而不是画出一张坏图）→ 自包含 HTML。

# 探索期校验：showcase 级别要求 0 错误 0 警告 node archify/bin/archify.mjs validate dataflow archify/examples/product-analytics.dataflow.json --quality showcase --json

# 交付终检：字节级冻结规格再渲染，输出 SHA-256 回执 node archify/bin/archify.mjs deliver dataflow archify/examples/product-analytics.dataflow.json examples/dataflow-product-analytics.html --quality showcase

交付出的 HTML 与它背后的 JSON 是对得上的，你分享给同事的那一个文件可以被字节级复现。

打开 HTML：分章播放、路由追踪与一键导出

双击打开 HTML，这张数据流图并不只是静态图：

• 📍分章讲解：顶部 3 个章节按钮逐章聚焦相关节点，Play story让箭头按数据流向逐段点亮；
• 路由追踪：选中 Warehouse 到 ML Model 的路径，面板给出精确的节点与跳数，还能一键导出 1200×630 分享卡片；
• 主题与导出：一键切换深浅色，Export 菜单支持 PNG 复制剪贴板、静态图下载、WebM 动图。

四步换成你自己的埋点系统

1. 列出管线节点并归位：每个node指定语义type、stage（第几段）和row（段内第几行）；
2. 按流向写下每条flow：主路径emphasis，PII/合规边security，异步批处理dashed；标签写数据资产名；
3. 用meta.views配 2～3 个章节，把"热路径"和"敏感边界"各圈成一幕；
4. 跑validate→deliver，再用node archify/bin/archify.mjs visual-check output.html --json在 1440×900 到 2048×1320 多档桌面分辨率下确认不溢出。

字段枚举与间距规则见 authoring-contract.md，中文写法可查 authoring-cookbook.zh-CN.md。

关键文件导航

下次再有人问"那个 PII 字段到底在哪被拦下来的"，把这张图甩给他就行：哪条边是 security 色、PII Vault 停在哪个阶段，一目了然。你只管讲清楚业务本身——事件从哪来、在谁手里洗、给谁消费；Archify 负责把数据流图校验对、画好看，0 错误 0 警告交付。

【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify