AI 画的架构图一眼假,因为它根本不该动手画

AI 画的架构图一眼假,因为它根本不该动手画

你可能见过那种图:紫色渐变背景、发光边框、连线穿过方框、标签叠在一起、箭头指向莫名其妙的地方。

一看就是 AI 画的。

问题不在于模型不够聪明。你让它画一张架构图,它得同时干三件事:想清楚系统有什么、算出每个框放哪、再把它们写成几百行 SVG 坐标。第三件事它根本不擅长。

有个叫 SeeCode 的项目换了个思路:模型只写规格,画图交给渲染器。

SeeCode 官方示例:一张真实系统图,方框、连线、标签、图例都由渲染器排好

先看看"对"的图长什么样

上面这张是官方示例:从 Storefront 到 Edge cache,再到 Checkout API,往下写 Orders DB、调 Stripe、发 Kafka 事件,最后 Receipts 消费。

每一条线都有类型——HTTP 实线、主路径加粗、异步虚线;每个框都有角色——external 灰边、service 黑边、focal 蓝边、store 填充;右下角还有图例。

这种图,模型直接写 SVG 是画不出来的。不是画得丑,是画不对。

它把"画图"拆成了两步

第一步,Agent 读你的需求,从 45 种图型里挑一个,写一份 30 到 150 行的 JSON:有什么节点、怎么连、大概放在哪一行哪一列。

第二步,SeeCode 的渲染器接手:布局、连线路由、标签避让、排版、配色、动效,全由它算。

这张图本身也是 SeeCode 画的:一句话需求 → Agent 选型 → JSON 规格 → 渲染器 → HTML / 导出

所以模型从头到尾没碰过 SVG。它只回答三个问题:有什么、怎么连、大致在哪。

这一步的差别,直接体现在账单上。

官方数据:模型直接写 SVG 约 15,000 token,写 JSON 规格约 1,400 token

一张图 1,400 token,对比 15,000 token。差了十倍多。原因也简单:SVG 里全是坐标和样式,JSON 里只有结构。

45 种图,每种有自己的动效

不是 45 个模板换皮。每种图型的动画方式不一样:

  • 架构图:连线从源头长出来,主路径上跑一个光点
  • 时序图:消息一条一条播放
  • 图表:柱子从基线长起来
  • 流程图:按步骤逐段亮起

官方示例:缓存未命中的读路径,Client → API → Redis → Postgres,八步交互

除了这些,还有部署图、依赖图、UML 类图、ER 图、数据库 schema、状态机、泳道图、数据流、甘特图、漏斗图、热力图、桑基图、等距图(isometric)等等。

能改,也能重画你已有的

生成只是第一步,后面这些才是日常:

用嘴改。 "把支付那条路径高亮"、"换成深色"、"给老板看的版本简化一点"——它改的是 JSON,不是重画。

导入旧图。 Mermaid、Graphviz、PlantUML、D2、draw.io、Excalidraw、Structurizr、BPMN、SQL、Prisma、DBML、OpenAPI、CSV/JSON 都能读,读进来按自己的版式重画。一个 Markdown 里有多张 Mermaid,会拆成文件夹,每张一个文件,附一个 index.html。

扫代码。 说一句"diagram this repo",它先扫仓库的模块、依赖、技术栈、基础设施,每个节点能链回源文件。

导出。 交互 HTML、SVG(内嵌字体)、高清 PNG、GIF、MP4,浏览器里点一下就行。要放进 PPT、Notion、Confluence、README,它按去处选格式。

交互才是它跟截图最大的区别

一张 PNG 只能看。SeeCode 生成的 HTML 能动手:

  • 鼠标悬停一个节点,相关的线亮起来,数据流向有光点在跑
  • 点一个节点,镜头推近,右侧面板列出它的职责、下游、所有连接
  • 选两个节点按播放,镜头跟着请求一跳一跳走完
  • 开一个"镜头",只看异步事件、或只看主链路、或只看存储
  • 左右方向键,按构建顺序一步步演示,适合开会讲

链接还能记住视图:#focus=api、#route=web,db,发给同事直接打开那一屏。

丑话

1. 它不是独立软件。 SeeCode 是给 Agent 用的技能,装在 Claude Code、Codex、Cursor、OpenCode 里。不接 Agent,你只能自己跑 CLI。

2. 导出要环境。 命令行导 SVG 只要有 Node;PNG、GIF、MP4 要用你本机的 Chrome 或 Edge。GIF 还需要它自带的编码器,装不全会提示 "encoders missing"。

3. 默认带水印。 每张图右下角有 SeeCode 标记,可以要求去掉,也可以在配置里全局关掉。

4. 1,400 token 是官方自述。 没有第三方复测。而且这是"写规格"的成本,实际用起来还要算上读类型说明、校验、打补丁的轮次。

5. 项目很新。 10 月 2 日建仓,一个月 6 个版本,52 次提交基本来自作者一人,1 个外部贡献者。852 星说明需求真实,但也说明它还没经过大规模踩坑。

6. 图型是"选择题",不是"自由绘画"。 45 种覆盖了大多数工程图,但你要画一张非标准的示意图、信息图、手绘风格插画,它帮不上忙——它擅长的是结构化图表,不是设计。

我的判断

图表工具竞争的重点,正在从"模板多不多"转向"中间表示稳不稳"。

过去十年,画图工具的胜负手是模板库:谁的模板多、谁的拖拽顺。但 AI 进来之后,真正的瓶颈变成了模型能不能可靠地表达结构。让模型直接产出一张漂亮的 SVG,等于让它一次做对布局、路由、排版三件事——成功率低,token 还贵。

SeeCode 的做法是把这三件事拆出去,模型只负责它最擅长的部分:理解你的系统,说清楚有什么、怎么连。

这个思路不只适用于图。表格、幻灯片、海报,凡是"结构 + 排版"的活,都可以这么拆。

至于要不要用:如果你每天在给文档配架构图、给老板画流程图、给博客做示意图,它省下的不只是 token,是来回改坐标的时间。

如果你一年画三张图,用 Excalidraw 拖两下更快。

工具的好坏,取决于你多久用一次。


相关链接:

评论

暂无评论。

登录后可发表评论。