---
type: concept
title: Diagram-as-Compiled-IR（图表即编译产物）
created: 2026-09-18
updated: 2026-09-18
tags: [diagram, ir, json-ir, determinism, agent-skill, archify, compiled-output]
---

## 定义
一种 Agent 产图范式：Agent 不直接画图，而是产出**类型化的 JSON IR（Intermediate Representation）**；渲染由独立的 Node.js 渲染器按确定性规则编译为 HTML/SVG。视觉稳定性、可重放性、跨 Agent 兼容性与审查性均源自这种"分阶段编译"。

## 核心要点
- **解耦**：Agent 负责结构与语义，渲染器负责视觉
- **确定性**：同一 IR → 同一输出（无随机布局）
- **可验证**：IR 可 diff、可校验、可在合并前比对快照
- **跨工具**：同一 IR 在不同 Agent 平台（Cursor / Claude Code / Codex / OpenCode）下输出一致

## 不同来源的说法
| 来源 | 观点 |
|------|------|
| [[library/tt-a1iarchify Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export\|archify]] | "Agent 生成类型化 JSON IR；Archify 确定性地将其编译为 HTML/SVG"——强调合并前可审查 |
| [[library/VoltAgentawesome-agent-skills A curated collection of 1000+ agent skills...\|awesome-agent-skills]] | Agent Skills 普遍采用"输入规则化 → 输出确定"模式，与本范式一致 |

## 相关实体
- [[entities/archify]]
- [[entities/voltagent]]

## 参考来源
- [[library/tt-a1iarchify Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export]]