当前位置：

文章详情

别再手画架构图和流程图！这2款AI工具一键生成，10分钟干完1天活

画架构图有多费劲？拖框、对齐、连线、调样式，忙活半天，图丑得自己都不想放进文档。更别说流程图、系统图、业务图，改一版几乎等于重画一遍。

国庆闲着没事，我试了几个 AI 画图项目：tt‑a1i/archify、next-ai-draw-io。结果有点意外：架构图、流程图生成非常快，样式也还挺 OK，分享也方便——复制到剪贴板、导出矢量图、PNG 都支持。LLM 还能用免费的，配合 OpenCode、CodeX 一起用，行政、编程、架构师、商业分析都能快速出图。

如果你也受够了手动拖拽画图，这几款 AI 工具建议先收藏

1、tt‑a1i/archify

专注于分析代码仓库，一句话即可生成高层的交互式运行时架构图、流程图等

2、next-ai-draw-io

功能全面，与draw.io深度集成，支持多轮对话修改和图像转图表，社区活跃度高

1、tt‑a1i/archify

一款开源的AI Agent技能工具，核心逻辑是让AI Agent接收自然语言系统描述或代码仓库作为输入，先生成带类型约束的结构化JSON中间表示，再经过布局、路由、语法校验流程，最终编译输出可直接使用的自包含交互式HTML/SVG图表

支持架构、时序、数据流、工作流、生命周期五类技术图纸

2026年4月开源后迅速登顶GitHub Trending，单周新增星数最高达1.9万，截至2026年9月总星数突破5.9万

项目地址：https://github.com/tt-a1i/archify

截止2026-10-08，Start突破70+K，

开源协议：MIT

主打一句话生成架构图

image-20261008194030613

功能亮点：

5大类图表类型：架构图、工作流图、时序图、数据流图、生命周期图，覆盖微服务、云资源、CI/CD、事件链路、状态机等场景
输出为单文件自包含HTML：无外部依赖，任意浏览器离线打开，支持分享、二次迭代修改
类型化JSON中间表示（IR）：架构即代码，图表结构可复现，不是直接生成静态SVG，便于机器校验与版本管理
原子化校验交付流水线：生成前自动校验结构、连线、布局；校验失败输出结构化修复提示（repair receipt），而非笼统报错
交互式图表能力：节点聚焦、上下游链路追踪、路由探查、角色对比、分步故事演示
一键切换深色/浅色主题，SVG自动跟随系统主题
4倍高清PNG/JPEG/WebP、自适应主题SVG、WebM动画演示、社交分享卡片；支持一键复制PNG到剪贴板，可直接粘贴到Notion/Slack/GitHub
支持快照对比（Delta）：支持Before/Delta/After三张快照对比，直观展示系统架构变更差异
支持源码溯源模式：节点可绑定Git提交与代码行范围，图表节点关联真实代码证据，用于可信架构评审
不限于软件系统：也可绘制计划、预算、流程、人事等非技术类结构图，通用关系/流程可视化

安装部署

安装方式：1行命令搞定，适配主流Agent，适配 Claude Code、Codex、Cursor、OpenCode、GitHub Copilot

选择 Cursor、Codex、Claude Code、OpenCode 或 GitHub Copilot，切换器为每个 Agent 提供同一份经过检查的 Skill 与零依赖渲染器，不维护厂商专属分叉

npx skills add tt-a1i/archify -g

以OpenCode为例：

可选择全局安装或安装到当前项目

1）全局安装

npx -y skills add tt-a1i/archify --skill archify --agent opencode --global --copy --yes

2）仅安装到当前仓库

npx -y skills add tt-a1i/archify --skill archify --agent opencode --copy --yes

3）切换免费模型

/model

Mimo-V2.6-Flash

image-20261008195107691

以下案例使用OpenCode桌面版

案例演示

1、架构图

用图形符号、连线与分层模块来描述系统结构的可视化图纸

把抽象的软件 / 硬件、业务体系拆成组件，展示组件之间的职责划分、依赖关系、数据流向、部署位置与交互方式。它不关注代码细节，重在表达整体设计：说明有哪些模块、每个模块负责什么、模块之间怎么通信，方便团队对齐设计思路、分析瓶颈、评估风险，是沟通技术方案、做系统设计与运维规划的核心载体。

通用提示词模板

用 Archify 把下面这段自然语言系统描述画成高层架构图：[在这里描述用户、核心组件、主要路径、外部依赖和边界]。不需要代码库。只追问会实质影响图的缺失信息，其余不确定内容要标明而不是编造；保留 8–12 个核心组件和一条一眼可见的主路径。

案例-1：三层Web架构

经典 AWS Web 栈：边缘分发、鉴权、API 服务、缓存、持久化与后台任务

image-20261009131510933

2、工作流

完整描述一项业务或任务从起始到结束的全过程，清晰定义每个步骤的操作内容、执行角色、流转条件、分支判断与先后顺序。它聚焦业务流程本身，用来梳理业务逻辑、明确分工、识别卡点

1、年假安排

image-20261009131631441

2、研发交付流程

image-20261009132822404

3、上海City Walk

image-20261008200702411

鼠标放到流程边框，可浮动展示图片和文字说明

image-20261008200744817

3、时序图

时序图是一种交互类UML图表，以时间推进为轴线，展示多个对象/参与者之间按先后顺序发生的消息调用与交互行为，清晰呈现谁在何时发送请求、返回结果、同步或异步调用，重点体现交互时序与消息流向，不侧重静态结构，用于梳理接口调用逻辑、排查交互异常、对齐多模块之间的通信流程

谁调用谁、顺序如何、最终返回什么？常用于API调用链分析

通用提示词模板

用 Archify 时序模式绘制下面的交互：[粘贴参与者、调用、返回、回退和异步副作用]。确保消息顺序无歧义、标签简短，并明确标注未知行为。不需要代码库。

案例-1（网站的请求流程图）

生成一个一个网站的请求流程图的指令

用 Archify 画出一个网站的请求流程：浏览器请求 API，API 优先读取 Redis，缓存未命中时查询 PostgreSQL 并回填缓存。

执行完成，会提示架构图保存路径、架构图流程逻辑、AI生成过程、校验过程

image-20261008195333939

按提示打开本地路径，打开架构图，查看效果图

image-20261008195623290

可切换皮肤风格，从深色切换到浅色

image-20261008195701390

导出PNG、JPEG、WepP、SVG（矢量图）

案例-2（租一套房流程流程）

image-20261008200017111

4、数据流

数据流图（DFD）是面向数据的可视化模型，以数据为核心，通过加工处理、外部实体、数据存储和数据流箭头，描述业务或系统中数据从产生、传输、加工、存储到输出的完整流动过程，重点表达数据来源、去向以及数据被如何转换，不强调执行时序与对象交互，用于拆解业务需求、厘清数据流转逻辑

哪些事件经过哪些 Topic、处理器、消费者组和失败路径？

通用提示词模板

用 Archify 数据流模式梳理下面的数据路径：[粘贴来源、数据资产、转换、存储、边界和消费者]。为每条数据流标注名称，在有意义时区分流式与批处理，未知的分类或归属要标明而不是编造。

1、产品分析数据流

事件依次经过用户同意、流处理、PII 隔离、数仓同步和受治理的下游消费者

image-20261009133210289

2、每月工资流水

image-20261009133032029

5、生命周期图

描述事物从诞生到消亡全过程的可视化图表，通过阶段节点与流转箭头，展现对象在不同时期的状态变化、触发条件与转换规则，聚焦状态演进的完整周期，不侧重单次交互或数据流转，常用于产品、需求、数据实体等场景，帮助团队明确各阶段特征、准入与退出标准，统一理解实体全生命周期的管理逻辑

有哪些状态、什么事件触发流转、最终如何结束？

通用提示词模板

用 Archify 生命周期模式建模这个对象：[粘贴它的状态、转换事件、等待、重试、取消和终态]。分开执行、等待、可恢复失败和终态，不要隐藏任何结束方式。不需要代码库。

1、部署图

部署对象经过构建、验证、审批、晋级、健康暂停、回滚和明确终态

image-20261009133522324

2、每份求职申请走到哪一步了？

image-20261009132942645

可直接用的提示词清单

可直接喂给OpenCode

1）事故处置 Runbook

响应者如何发现、分诊、缓解、验证并升级？适合故障预案、On-call 交接、稳定性评审和桌面演练

用 Archify 工作流模式把事故处置预案画成响应者泳道。展示发现、分诊、缓解、升级、沟通、回滚和恢复验证；把决策门与操作分开，并让缺失的负责人清晰可见。

2）从源码生成工程

Use archify to map this repository's runtime architecture。中文提示同样有效，Archify 会自动读取仓库证据来生成有源码依据的架构图。

使用 Archify 梳理这个仓库的运行时架构。请先分析代码仓库中的服务、模块和调用关系，然后生成一张高层次的运行时架构图，节点需要标注对应的源码位置。

3）带技术选型的微服务架构

用 Archify 画一张架构图，描述一个电商订单系统。前端是 React SPA，请求经过 API Gateway（Kong），路由到 Order Service（Node.js）和 Payment Service（Go）。Order Service 写入 PostgreSQL 并发送消息到 Kafka；Payment Service 调用外部 Stripe API，结果也写入 PostgreSQL。Redis 用于缓存订单状态。请标注服务之间的通信协议（HTTP/REST 或 Kafka 消息）

4）AI Agent调用流程

用 Archify 画一张 workflow 图，描述 AI Agent 的工具调用流程。用户请求到达聊天界面，然后进入 Planner（规划器）。Planner 将决策交给 Router（路由器），Router 判断是否需要人工审批。如果需要，进入 Approval Gate；批准后执行 Tool Call，Tool Call 调用 External API；拒绝则进入 Blocked 路径，可重试。最终结果返回用户，同时工具结果和上下文被记录用于 Tracing

5）CI/CD部署图

用 Archify 画 workflow 图，描述一个 CI/CD 部署流水线：代码提交触发 CI → 单元测试 → 构建镜像 → 推送 Registry → 部署到 Staging → 人工审批 → 部署到 Production。如果任一测试失败，进入 Failure 路径并通知 Slack。Staging 部署失败可自动回滚到上一版本

6）用户行为数据管道

用 Archify 画数据流图，描述用户行为数据的采集和消费链路。App 和 Web 端埋点数据 → Kafka → Flink 实时聚合 → 写入 ClickHouse（用于实时看板）；同时 Kafka 的原始数据被同步到 S3 → Spark 离线批处理 → 写入 Hive（用于日报和用户画像）。用户画像结果回流到 Redis，供推荐服务读取。请标注哪些节点包含 PII 数据。

7）订单状态生命周期

用 Archify 画 lifecycle 图，描述订单状态流转：Created → Pending Payment → Paid → Shipped → Delivered → Completed。Paid 之后可以 Cancel 进入 Cancelled；Pending Payment 超时进入 Expired；Shipped 状态如果物流异常进入 Exception，Exception 可重试回到 Shipped，或最终进入 Failed。请标注每个状态的重试次数和等待时长

8）常见元素组成

七种节点颜色，深浅主题下保持一致。图例可以按你的故事改名——「后端」可以叫「假期」，「安全」可以叫「规则」

image-20261009134159506

2、next-ai-draw-io

next-ai-draw-io是什么？

一款革命性的 AI 绘图应用

将大模型能力与 draw.io 绘图引擎深度融合，支持用自然语言描述直接生成、迭代修改流程图、系统架构图、UML、ER 图等各类可编辑图表；支持上传图片或 PDF，AI 识别复刻为 draw.io 原生矢量图表，内置对话交互界面持续调整布局、样式与元素，兼容豆包、OpenAI、Claude 等十余种 LLM，提供图表版本回滚，同时提供网页端、桌面端、Docker 部署方案以及 MCP 服务，可接入 Cursor、Claude Desktop 等 AI Agent，还附带 VS Code 插件，方便开发者在编码环境内快速完成技术图表绘制，适合技术文档、系统设计场景，支持私有化部署。

AI能力：