🔥 tt-a1i/archify：面向 Claude、Codex CLI 等 Agent 的专业图表生成技能

在聊天中生成精美的架构图、技术工作流、序列图、数据流图和生命周期图。自由切换深色/浅色主题，一键复制到剪贴板，或导出高达 4 倍源分辨率的清晰 PNG / JPEG / WebP / SVG。

Archify 是一款面向 Claude、Codex CLI 和 opencode 的 Agent 技能。它能把对系统或流程的纯文本描述，转化为一张精致、自包含的技术图表——一个可以打开、切换主题、复制到剪贴板并以最高分辨率导出的单一 HTML 文件。

• 无需设计技能——用英文描述架构，即可获得图表
• 同样支持工作流、序列、数据流和生命周期图——可以绘制技术流程、审批、工具调用、CI/CD、操作手册、请求调用链、数据管道、PII 边界和状态机
• 内置主题切换——一键在深色与浅色之间切换，偏好设置会跨会话保持
• 复制 PNG 到剪贴板——一键操作，直接粘贴到 Slack / Notion / GitHub
• 超清晰图像导出——可按高达 4 倍源分辨率原生渲染 PNG / JPEG / WebP（无上采样模糊），或导出真正的矢量 SVG
• SVG 自动跟随系统深色/浅色模式——导出的 SVG 同时包含两组变量和 @media (prefers-color-scheme)，因此将其放入 GitHub README 后，它会自动适配读者的颜色偏好（无需再用 <picture> 包裹两张 PNG）
• 内置校验循环——基于渲染器生成的图表会经过 JSON Schema 校验、布局检查、HTML/SVG 工件检查以及针对性迭代
• 语义化技术标签——用 aws.lambda、postgres、redis、github-actions、openai 等描述组件；Archify 会自动将其映射到对应的视觉类别，无需完整的图标库
• 自包含 HTML——生成的文件零外部依赖，发送文件即可分享
• 通过聊天迭代——“添加 Redis”、“把认证模块左移”、“将 API 使用 emerald 色”

项目页面： tt-a1i.github.io/archify

中文

60 秒快速开始：

npx skills add tt-a1i/archify -g

然后对你的 agent 说：Use archify to map this repository's runtime architecture.

同一张图，两种主题，一键切换：

深色	浅色

导出菜单——一键复制 PNG 到剪贴板，外加 4 种下载格式（所有光栅导出最高支持 4 倍源分辨率）：

在线示例：examples/web-app.html——在浏览器中打开，按 T 切换主题，按 E 打开导出。在 URL 后添加 ?theme=light 或 ?openExport=1 可获得一致的截图。

Archify 目前支持五种主要输出：

类型	适用场景	如何请求
架构图	系统组件、云资源、数据库、缓存、服务、边界、安全组	描述系统结构
工作流	请求生命周期、审批流程、工具调用、CI/CD、操作手册、事件响应	描述参与者、步骤顺序和关键分支
序列图	API 调用链、请求生命周期、缓存回退、认证检查、异步追踪、服务交互	描述谁调用谁、按什么顺序、返回什么
数据流	数据管道、ETL/ELT、分析事件、PII 隔离、仓库同步、血缘跟踪、下游消费者	描述源、处理阶段、存储、敏感性边界和消费者
生命周期	状态机、订单/任务/部署/agent 运行生命周期、等待状态、重试、取消、超时、终止状态	描述状态、迁移事件、重试路径和最终结果

架构图用于说明系统结构——组件、边界及其连接方式：

Use archify to draw an architecture diagram: React frontend calls a Node.js API backed by PostgreSQL and Redis, deployed on AWS behind CloudFront.

SaaS 示例图：examples/web-app.html.

真实仓库示例（渲染器驱动的 JSON IR）：

工作流并非要替代所有通用流程图。它是一种技术沟通图：包含泳道、语义色彩、清晰的快乐路径以及次要的异步/审批/追踪路径。

Use archify to draw a workflow: User submits a request -> Agent plans -> Approval Gate if needed -> Tool Call -> Trace Log -> Final Reply

在此打开示例：examples/workflow-agent-tool-call-rendered.html.

序列图用于解释一段更窄的、随时间变化的交互：

Use archify to draw a sequence diagram: User opens a page, the frontend calls the API, the API verifies JWT, reads Redis, falls back to Postgres on cache miss, returns JSON, and emits trace.

在此打开示例：examples/sequence-cache-miss-request.html.

数据流图解释数据资产如何移动和变化：

Use archify to draw a data flow: Web and Mobile emit analytics events, Edge API collects them, Consent Gate filters PII, Kafka carries accepted events, Warehouse stores analytics tables, Feature Store derives daily features, Dashboards and an ML Model consume downstream data.

在此打开示例：examples/dataflow-product-analytics.html.

生命周期图解释对象如何改变状态：

Use archify to draw a lifecycle diagram: Agent Run starts at Queued, moves through Planning, Executing, and Reviewing. It can pause at Needs Approval, wait at Blocked, retry after Failed, end at Cancelled or Expired, or finish at Completed.

在此打开示例：examples/lifecycle-agent-run.html.

Archify 基于 Cocoon-AI/architecture-diagram-generator v1.0（仅深色，HTML 输出）。2.0 通过可主题化的 CSS 变量系统重写了模板，并添加了客户端导出流水线。2.1 增加了复制到剪贴板和键盘导航。2.2 添加了打印样式表和本地字体回退。2.3 修复了光栅上采样错误，使导出在高达 4 倍源分辨率下真正清晰。2.4 将 SVG 导出升级为双主题自包含文件。2.5 增加了渲染器驱动的工作流/序列/数据流/生命周期模式、Mermaid 输入引导、CJK 感知文本测量、黄金测试和 CI。2.6 使架构渲染器达到 schema 和布局校验的对等水平。2.7 通过阶段头部、分组、异常泳道、快乐路径检查、同泳道正交路由和渲染后 HTML/SVG 检查器，强化了工作流图。2.8 添加了可选追踪动画，并拒绝穿越无关节点的路径。2.9 添加了统一 CLI（bin/archify.mjs）和真实仓库架构示例。2.10 增加了可操作的校验提示、可选架构网格放置（row/col），以及用于检查计算布局 JSON 的 archify inspect。

功能	v1.0	2.0	2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8	2.9	2.10
深色主题	支持	支持	支持	支持	支持	支持	支持	支持	支持	同前	同前	同前
浅色主题	—	切换	切换	切换	切换 + T 快捷键	同前	同前	同前	同前	同前	同前	同前
PNG / JPEG / WebP 下载	手动截图	2 倍位图放大	1× / 2× / 4× 选择器（仍为放大）	同前	4 倍原生渲染——无模糊	同前	修复浅色导出连线颜色	同前	同前	同前	同前	同前
SVG 下载	—	矢量，样式内联（单主题）	同前	同前	同前	双主题自包含（@media prefers-color-scheme）	同前（连线颜色修复）	同前	同前	同前	同前	同前
复制 PNG 到剪贴板	—	—	支持	同前	支持（最多 4 倍）	同前	Safari 修复	同前	同前	同前	同前	同前
键盘快捷键	—	—	T / E + 菜单导航	同前	同前	同前	同前	同前	同前	同前	同前	同前
无障碍	—	—	ARIA + focus-visible	同前	同前	同前	同前（+ 菜单无障碍修复）	同前	同前	同前	同前	同前
打印样式表	—	—	—	支持	支持（+ 横向 + 两列卡片）	同前	同前	同前	同前	同前	同前	同前
导出时本地字体回退	—	—	—	支持	支持	同前	+ CJK 字体回退	同前	同前	同前	同前	同前
样式模型	内联 fill / stroke	CSS 自定义属性 + 语义类	同前	同前	同前	同前	同前	同前	同前	同前	同前	同前
类型化渲染器 + schema 校验	—	—	—	—	—	—	工作流 / 序列 / 数据流 / 生命周期	+ 架构	同前	同前	同前	同前
工作流结构辅助	—	—	—	—	—	—	泳道 + 路径边	同前	阶段、分组、异常泳道、happyPath 检查	路径穿越守卫	同前	同前
渲染后工件检查器	—	—	—	—	—	—	—	—	支持	同前	同前	同前
追踪动画	—	—	—	—	—	—	—	—	—	可选	同前	同前
统一 CLI	—	—	—	—	—	—	—	—	—	—	支持	同前
真实仓库架构示例	—	—	—	—	—	—	—	—	—	—	支持	同前
架构网格 + 布局检查	—	—	—	—	—	—	—	—	—	—	—	支持
校验可操作提示	—	—	—	—	—	—	—	—	—	—	—	支持

1. 一条命令完成安装

全局安装 Archify，然后在提示时选择你的 agent：

npx skills add tt-a1i/archify -g

想在不永久安装的情况下试用？以下命令会用临时副本启动 Codex：

npx skills use tt-a1i/archify@archify --agent codex

将 codex 替换为 claude-code 或 opencode，即可启动对应的 agent。上述命令使用开源的 skills CLI。

为真实仓库创建图：

Analyze this repository, then use archify to create an architecture diagram of its runtime components, data flow, external dependencies, and trust boundaries.

说明请求路径：

Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation -> Redis session lookup -> PostgreSQL fallback. Show the cache-miss path clearly.

可视化交付流程：

Use archify to create a CI/CD workflow diagram: pull request -> tests -> approval gate -> build image -> staging deploy -> smoke test -> production deploy, with rollback on failure.

该分布式技能包含独立的 Schema 校验器，因此可以立即渲染——无需 npm install 或其他运行时依赖。

可以请求聚焦式修改，例如“添加 Redis”、“把 auth 左移”，或者“高亮回滚路径”。Archify 会返回一个自包含 HTML 文件，可在任意浏览器中打开并导出为 PNG、JPEG、WebP 或 SVG。

其他安装方式

Archify 以 agent 技能目录（archify/SKILL.md）的形式打包，因此同一个 archify.zip 适用于 Claude、Codex CLI 和 opencode。

Claude.ai:

1. 下载 archify.zip
2. 进入 Settings -> Capabilities -> Skills
3. 点击 + Add 并选择文件

Generate beautiful architecture, technical workflow, sequence, data-flow, and lifecycle diagrams in chat. Switch dark / light. Copy to clipboard or export crisp up-to-4× PNG / JPEG / WebP / SVG.

Archify is an agent skill for Claude, Codex CLI, and opencode. It turns a plain-English description of your system or process into a polished, self-contained technical diagram — a single HTML file you can open, toggle themes on, copy to the clipboard, and export at maximum resolution.

• No design skills needed — describe your architecture in English, get a diagram
• Workflow, sequence, data-flow, and lifecycle diagrams too — technical flows, approvals, tool calls, CI/CD, runbooks, request call chains, data pipelines, PII boundaries, and state machines can be drawn
• Built-in theme toggle — one click between dark and light, persists across sessions
• Copy PNG to clipboard — one click, paste straight into Slack / Notion / GitHub
• Ultra-crisp image export — PNG / JPEG / WebP rendered natively at up to 4× source resolution (no upsampling blur), or SVG for true vector
• SVG follows system dark/light — exported SVGs ship with both variable sets + @media (prefers-color-scheme), so dropping one into a GitHub README makes it follow the reader's color preference (no more two PNGs wrapped in <picture>)
• Validation loop built in — renderer-backed diagrams go through JSON schema validation, layout checks, HTML/SVG artifact checks, and targeted iteration
• Semantic tech labels — describe components as aws.lambda, postgres, redis, github-actions, openai, etc.; Archify maps them to the right visual category without needing a full icon library
• Self-contained HTML — the generated file has zero dependencies, share by sending it
• Iterate by chat — "add Redis", "move auth to the left", "use emerald for the API"

Project page: tt-a1i.github.io/archify

中文

Start in 60 seconds:

npx skills add tt-a1i/archify -g

Then ask your agent: Use archify to map this repository's runtime architecture.

Same diagram, two themes, one click to switch:

Dark	Light

The Export menu — Copy PNG to clipboard plus 4 download formats (all raster exports at up to 4× source resolution):

Live example: examples/web-app.html — open in a browser, press T to toggle theme, E to open Export. Append ?theme=light or ?openExport=1 to the URL for deterministic screenshots.

Archify now has five primary outputs:

Type	Good for	How to ask
Architecture	System components, cloud resources, databases, caches, services, boundaries, security groups	Describe the system structure
Workflow	Request lifecycles, approval flows, tool calls, CI/CD, runbooks, incident response	Describe participants, step order, and key branches
Sequence	API call chains, request lifecycles, cache fallback, auth checks, async trace, service interactions	Describe who calls whom, in what order, and what returns
Data Flow	Data pipelines, ETL/ELT, analytics events, PII isolation, warehouse sync, lineage, downstream consumers	Describe sources, processing stages, storage, sensitivity boundaries, and consumers
Lifecycle	State machines, order/task/deployment/agent-run lifecycles, wait states, retries, cancellation, timeout, terminal states	Describe states, transition events, retry paths, and terminal outcomes

Architecture diagrams explain system structure — components, boundaries, and how they connect:

Use archify to draw an architecture diagram:
React frontend calls a Node.js API backed by PostgreSQL and Redis, deployed on AWS behind CloudFront.

Sample SaaS diagram: examples/web-app.html.

Real-repo examples (renderer-backed JSON IR):

Workflow is not trying to replace every general-purpose flowchart. It is a technical communication diagram: swimlanes, semantic colors, a clear happy path, and secondary async / approval / trace paths.

Use archify to draw a workflow:
User submits a request -> Agent plans -> Approval Gate if needed -> Tool Call -> Trace Log -> Final Reply

Open the example here: examples/workflow-agent-tool-call-rendered.html.

Sequence diagrams explain a narrower interaction over time:

Use archify to draw a sequence diagram:
User opens a page, the frontend calls the API, the API verifies JWT, reads Redis, falls back to Postgres on cache miss, returns JSON, and emits trace.

Open the example here: examples/sequence-cache-miss-request.html.

Data Flow diagrams explain how data assets move and change:

Use archify to draw a data flow:
Web and Mobile emit analytics events, Edge API collects them, Consent Gate filters PII, Kafka carries accepted events,
Warehouse stores analytics tables, Feature Store derives daily features, Dashboards and an ML Model consume downstream data.

Open the example here: examples/dataflow-product-analytics.html.

Lifecycle diagrams explain how an object changes state:

Use archify to draw a lifecycle diagram:
Agent Run starts at Queued, moves through Planning, Executing, and Reviewing. It can pause at Needs Approval,
wait at Blocked, retry after Failed, end at Cancelled or Expired, or finish at Completed.

Open the example here: examples/lifecycle-agent-run.html.

Archify is based on Cocoon-AI/architecture-diagram-generator v1.0 (dark-only, HTML output). 2.0 rewrote the template around a themeable CSS-variable system and added a client-side export pipeline. 2.1 added copy-to-clipboard + keyboard nav. 2.2 added a print stylesheet + local-font fallback. 2.3 fixed the raster upsampling bug and made exports genuinely sharp at up to 4× source resolution. 2.4 upgraded SVG export to a dual-theme self-contained file. 2.5 added renderer-backed workflow / sequence / data-flow / lifecycle modes, Mermaid input guidance, CJK-aware text measurement, golden tests, and CI. 2.6 brought the architecture renderer to schema + layout validation parity. 2.7 hardens workflow diagrams with phase headers, groups, exception lanes, happy-path linting, same-lane orthogonal routing, and a post-render HTML/SVG checker. 2.8 adds opt-in trace animation and rejects workflow routes that cross unrelated nodes. 2.9 adds a unified CLI (bin/archify.mjs) and real-repo architecture examples. 2.10 adds actionable validator hints, optional architecture grid placement (row/col), and archify inspect for computed layout JSON.

Feature	v1.0	2.0	2.1	2.2	2.3	2.4	2.5	2.6	2.7	2.8	2.9	2.10
Dark theme	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Same	Same	Same
Light theme	—	Toggle	Toggle	Toggle	Toggle + T shortcut	Same	Same	Same	Same	Same	Same	Same
PNG / JPEG / WebP download	manual screenshot	2× bitmap-upsampled	1× / 2× / 4× selector (still upsampled)	same	4× rasterized natively — no blur	Same	Light-export lane colors fixed	Same	Same	Same	Same	Same
SVG download	—	Vector, styles inlined (single theme)	Same	Same	Same	Dual-theme self-contained (@media prefers-color-scheme)	Same (lane colors fixed)	Same	Same	Same	Same	Same
Copy PNG to clipboard	—	—	Yes	Same	Yes (up to 4×)	Same	Safari fix	Same	Same	Same	Same	Same
Keyboard shortcuts	—	—	T / E + menu nav	Same	Same	Same	Same	Same	Same	Same	Same	Same
Accessibility	—	—	ARIA + focus-visible	Same	Same	Same	Same (+ menu a11y fixes)	Same	Same	Same	Same	Same
Print stylesheet	—	—	—	Yes	Yes (+ landscape + 2-col cards)	Same	Same	Same	Same	Same	Same	Same
Local-font fallback on export	—	—	—	Yes	Yes	Same	+ CJK font fallback	Same	Same	Same	Same	Same
Styling model	Inline fill / stroke	CSS custom properties + semantic classes	Same	Same	Same	Same	Same	Same	Same	Same	Same	Same
Typed renderers + schema validation	—	—	—	—	—	—	Workflow / sequence / data-flow / lifecycle	+ architecture	Same	Same	Same	Same
Workflow structure aids	—	—	—	—	—	—	Lanes + routed edges	Same	Phases, groups, exception lanes, mainPath lint	Route-crossing guard	Same	Same
Post-render artifact checker	—	—	—	—	—	—	—	—	Yes	Same	Same	Same
Trace animation	—	—	—	—	—	—	—	—	—	Opt-in	Same	Same
Unified CLI	—	—	—	—	—	—	—	—	—	—	Yes	Same
Real-repo architecture examples	—	—	—	—	—	—	—	—	—	—	Yes	Same
Architecture grid + layout inspect	—	—	—	—	—	—	—	—	—	—	—	Yes
Validator actionable hints	—	—	—	—	—	—	—	—	—	—	—	Yes

1. Install in one command

Install Archify globally, then select your agent when prompted:

npx skills add tt-a1i/archify -g

Want to try it without a permanent install? This starts Codex with a temporary copy of the skill:

npx skills use tt-a1i/archify@archify --agent codex

Replace codex with claude-code or opencode to start either of those agents instead. These commands use the open-source skills CLI.

Map a real repository:

Analyze this repository, then use archify to create an architecture diagram of its runtime components, data flow, external dependencies, and trust boundaries.

Explain a request path:

Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation -> Redis session lookup -> PostgreSQL fallback. Show the cache-miss path clearly.

Visualize delivery:

Use archify to create a CI/CD workflow diagram: pull request -> tests -> approval gate -> build image -> staging deploy -> smoke test -> production deploy, with rollback on failure.

The distributed skill includes standalone Schema validators, so it is ready to render immediately — no npm install or runtime dependencies required.

Ask for focused changes such as add Redis, move auth to the left, or highlight the rollback path. Archify returns a self-contained HTML file you can open in any browser and export as PNG, JPEG, WebP, or SVG.

Other installation methods

Archify is packaged as an agent skill directory (archify/SKILL.md), so the same archify.zip works with Claude, Codex CLI, and opencode.

Claude.ai:

1. Download archify.zip
2. Go to Settings -> Capabilities -> Skills
3. Click + Add and upload the zip file
4. Toggle the skill on

Claude Code CLI:

# Global (all projects)
unzip archify.zip -d ~/.claude/skills/

# Or project-local
unzip archify.zip -d ./.claude/skills/

Codex CLI:

# Global (all projects)
unzip archify.zip -d ~/.agents/skills/

# Or project-local
unzip archify.zip -d ./.agents/skills/

opencode:

# Global (opencode-native)
unzip archify.zip -d ~/.config/opencode/skills/

# Or project-local
unzip archify.zip -d ./.opencode/skills/

# Also works: the shared agent directory used above for Codex
unzip archify.zip -d ~/.agents/skills/

Renderer-backed diagrams follow a small quality loop before delivery:

Step	What happens
Generate JSON IR	The agent writes a typed architecture / workflow / sequence / dataflow / lifecycle description instead of hand-editing the final SVG.
Validate	Bundled standalone validators check the JSON Schema with no runtime dependency installation.
Render	The typed renderer produces the self-contained HTML/SVG output.
Check artifact	The post-render checker catches malformed SVG, non-finite coordinates, accidental diagonal arrows, and legend-crossing routes.
Iterate	Fixes are made against the JSON IR or semantic classes, so targeted edits do not require regenerating the whole diagram from scratch.

You can run the final artifact check directly:

node scripts/check-render-output.mjs output.html

The bundled CLI wraps the same renderer and checker commands:

node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs render workflow examples/agent-tool-call.workflow.json workflow.html
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --json
node bin/archify.mjs check workflow.html
node bin/archify.mjs examples

Renderer-backed diagrams can also opt into lightweight motion for demos:

{ "meta": { "title": "Release Flow", "animation": "trace" } }

Trace animation runs inside the generated HTML/SVG: arrows flow in order, nodes pulse lightly, and prefers-reduced-motion disables movement for users who request it. Omit animation for the default static diagram.

Claude.ai Projects (alternative): Upload archify.zip to your Project Knowledge.

What each install surface can do:

Install surface	Capability
Claude Code	Full — runs the typed renderers + schema validation
Codex CLI	Full — install to ~/.agents/skills/ or .agents/skills/
opencode	Full — install to .opencode/skills/, .agents/skills/, or another supported skills directory
Claude.ai (zip upload)	Usually full — depends on whether the sandbox allows Node.js execution
Project Knowledge	Architecture mode only — no code execution, purely prompt-driven

Open the generated HTML in any browser. Top-right you'll see two buttons:

• Theme button (Dark / Light) — one click flip, persisted across sessions. Shortcut: T.
• Export menu — opens a dropdown with five actions (Copy PNG + download PNG / JPEG / WebP / SVG). Shortcut: E.

Export menu

Action	What it does
Copy PNG	Puts a PNG of the current diagram straight on your clipboard. Paste into Slack, Notion, GitHub, Figma.
Download PNG / JPEG / WebP	Saves a raster image. JPEG/WebP are painted over the current theme's background (no alpha); PNG keeps transparency.
Download SVG	Vector export with all styles inlined, dual-theme self-contained. The file ships with both dark and light CSS variable sets plus a @media (prefers-color-scheme) rule — drop the same .svg into a GitHub README or blog and it follows the reader's preference automatically. Still editable in Figma / Illustrator. Scales losslessly.

Every raster export (Copy PNG, Download PNG/JPEG/WebP) is rendered natively by the browser at up to 4× the diagram's intrinsic resolution (oversized diagrams step down to 3×/2× to stay within browser canvas limits) — the serialized SVG is given a width/height of 4 × viewBox, rasterized by the browser at that resolution, and drawn to the canvas at natural size (no upsampling). This produces genuinely crisp output for retina displays, slides, and print. There is no scale dial — maximum safe sharpness is always chosen automatically.

• T anywhere — toggle theme

• E anywhere — open the Export menu

• ↑ ↓ inside the menu — navigate actions

• Home / End — jump to first / last action

• Enter / Space — activate

• Esc — close menu

• ?theme=light or ?theme=dark — force a starting theme (deterministic screenshots, share links, embeds)

• ?openExport=1 — auto-open the Export menu on load (demo / docs screenshots)

• WebP support depends on your browser's canvas encoder. If unavailable (older Safari), the menu item is dimmed and disabled. PNG and JPEG are universal.

• Clipboard support for images requires ClipboardItem + navigator.clipboard.write (Chromium, Firefox 127+, Safari 16+). If unavailable, Copy PNG is dimmed.

• Fonts in exports : raster images use the system monospace fallback (ui-monospace / Menlo / Consolas) because the sandboxed image-rendering context can't fetch Google Fonts. Install JetBrains Mono locally for pixel-perfect rendering.

Web app:

Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

AWS serverless:

Create an architecture diagram showing:
- CloudFront CDN
- API Gateway
- Lambda functions (Node.js)
- DynamoDB
- S3 for static assets
- Cognito for auth

Microservices:

Create an architecture diagram for a microservices system with:
- React web app and mobile clients
- Kong API Gateway
- User Service (Go), Order Service (Java), Product Service (Python)
- PostgreSQL, MongoDB, and Elasticsearch databases
- Kafka for event streaming
- Kubernetes orchestration

Data flow / product analytics:

Use archify to draw a data flow:
- Web App and Mobile SDK produce clickstream events
- Edge API collects events
- Consent Gate filters identity and PII
- Kafka/Event Stream carries accepted events
- Warehouse stores normalized facts
- Feature Store derives daily feature vectors
- Dashboards and ML Model consume downstream data

State machine / lifecycle:

Use archify to draw a lifecycle diagram:
- A task starts at Queued
- Planning builds the plan
- Executing calls tools
- Reviewing checks quality
- Needs Approval and Blocked are wait states
- Failed can retry, while Cancelled / Expired / Completed are terminal states

Component Type	Color	Use for
Frontend	Cyan	Client apps, UI, edge devices
Backend	Emerald	Servers, APIs, services
Database	Violet	Databases, storage, AI/ML
Cloud / AWS	Amber	Cloud services, infrastructure
Security	Rose	Auth, security groups, encryption
Message Bus	Orange	Kafka, RabbitMQ, SNS, event buses
External	Slate	Generic, external systems

Each color has coordinated dark-mode and light-mode variants that switch together via the theme toggle.

Archify is not trying to ship a complete AWS / Azure / GCP icon runtime. Instead, it treats technology names and optional labels as semantic hints that guide color, grouping, and copy:

Label examples	Visual category
react, nextjs, ios, android, browser	Frontend
node, go-service, python-worker, api-gateway	Backend
postgres, mysql, redis, s3, bigquery, snowflake	Database / storage
aws.lambda, aws.cloudfront, gcp.pubsub, azure.functions, kubernetes	Cloud / infrastructure
auth0, cognito, oauth, vault, security-group	Security
kafka, rabbitmq, sns, sqs, nats	Message bus
stripe, github-actions, openai, anthropic, slack	External

Use these labels in prompts or JSON IR when the exact technology matters. The generated diagram stays self-contained HTML/SVG; the labels improve semantic styling and layout without forcing a heavyweight icon dependency.

• Styling: CSS custom properties on :root + [data-theme="light"]; SVG elements reference semantic classes (c-frontend, t-muted, a-emphasis, etc.). Toggling data-theme on <html> re-themes the entire diagram including gradient, grid, arrows, and mask rects.
• Export pipeline: The SVG is cloned, host <style> is inlined, and current theme variables are resolved and written into a :root rule on the clone. For raster formats the clone's width/height are set to 4 × viewBox so the browser rasterizes the vectors at target resolution natively; the canvas is sized to match and the image is drawn at natural size (no bitmap upsampling). toBlob(mime) then produces the file. JPEG gets an explicit background fill since it has no alpha. If the target resolution would exceed the browser's canvas limits, the pipeline automatically falls back to 3× or 2× so the export still succeeds.
• Self-contained output: Single HTML file, Google Fonts link + inline SVG + ~19 KB of embedded JS. No build step, no JS framework, no server. The generated HTML and the distributed renderer have zero runtime dependencies.
• Output checks: bin/archify.mjs validate, renderer layout checks, and scripts/check-render-output.mjs validate generated diagrams before delivery: schema validity, finite SVG values, no accidental two-point diagonal arrows, and no arrow segments crossing the legend.
• Browser support: Any modern browser (Chrome, Safari, Firefox, Edge). Needs Image + canvas.toBlob with image/webp support for WebP export.

Archify is a fork / rewrite of Cocoon-AI/architecture-diagram-generator (MIT, v1.0) by Cocoon AI. The original's clean visual design — color palette, grid background, summary-card layout, JetBrains Mono typography — is preserved. All credit for the original aesthetic belongs to them.

Archify 2.x contributes:

• Refactor of the template to a CSS-variable theme system (dark + light)
• Theme toggle + localStorage persistence + prefers-color-scheme default
• Built-in PNG / JPEG / WebP / SVG export menu + copy to clipboard
• 4× native rasterization (fixes upsampling blur)
• Dual-theme self-contained SVG export (single file follows the host's prefers-color-scheme)
• Keyboard navigation + accessibility semantics
• Print stylesheet + local-font fallback
• Renderer-backed architecture, workflow, sequence, data-flow, and lifecycle diagrams with schema validation
• Post-render artifact checks for final HTML/SVG quality
• Unified CLI (bin/archify.mjs) for render / validate / check / examples
• Real-repo architecture examples (archify-repo, maka-architecture)
• Updated SKILL.md to guide Claude toward class-based (themeable) diagrams

Both projects are MIT-licensed.

See ROADMAP.md.

Next up is v3.0 — JSON IR stabilization : a minimal diagram.json intermediate format so Claude can make local coordinate edits without drifting unrelated components, with git diff-friendly output and theme/palette swaps that don't require re-rendering.

About Mermaid import: the automatic Mermaid parser route was cut after an experiment showed that auto-layout + archify CSS doesn't look meaningfully better than native Mermaid (experiments/v3-mermaid-validation/RESULT.md). Archify's aesthetic core is Claude's layout judgment, not the CSS. You can still paste Mermaid code and have Claude lay out an archify-style diagram from scratch — it goes through the SKILL.md prompts, not a parser.

The former v2.4 / v2.5 plans (?exportScale=N, color-blind palettes, share links) were also dropped. See the ROADMAP "Not planned" section for the rationale.

MIT — free to use, modify, and distribute.

Issues, PRs, and shared diagrams welcome.