粘一段代码,拿一张类图、流程图或者架构图。
从这段代码画一个 UML 类图:abstract class Shape { abstract area(): number } class Circle extends Shape { constructor(private radius: number) { super() } area() { return Math.PI * this.radius ** 2 } } class Rectangle extends Shape { constructor(private w: number, private h: number) { super() } area() { return this.w * this.h } }
Try it →画出这个 Express 路由处理函数的控制流流程图:router.post('/checkout', authenticate, validateCart, async (req, res) => { const total = calculateTotal(req.body.items); if (total <= 0) return res.status(400).send('empty cart'); const charge = await chargeCard(req.user, total); if (!charge.success) return res.status(402).send('payment failed'); const order = await createOrder(req.user, req.body.items); res.json(order); })
Try it →为这个函数画一个流程图:function quicksort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; const left = arr.slice(1).filter(x => x < pivot); const right = arr.slice(1).filter(x => x >= pivot); return [...quicksort(left), pivot, ...quicksort(right)]; }
Try it →从这个 docker-compose.yml 画一个架构图:服务有 'web'(nginx,暴露 80 端口,依赖 'api')、'api'(node 应用,依赖 'db' 和 'redis')、'db'(postgres,挂载 volume)、'redis'(缓存)、'worker'(后台任务处理,依赖 'redis' 和 'db')。
Try it →接手一个没文档、类之间关系也说不清的文件?粘进来让它画类图,比跨着几个文件手动追继承关系快。
一段绕的控制流改动,画成流程图比看 diff 好评审。评审会之前把新函数粘成一张图,直接贴到评论里。
新人粘一个核心领域类,或者主请求入口,拿到一张图,不用干读五百行。
把一个什么都干的大类拆开之前,先把现在的结构画出来,让「重构前」这个状态有据可查。
讲师把学生的代码或者教材里的例子当场变成图 —— 讲继承、讲控制流、讲服务边界的时候不用现画白板。
有时候讲清楚一段代码最快的办法是给张图,而拿到这张图最快的办法不是装一个静态分析工具,是把代码粘进来,说清楚你要什么图。粘一个类定义要类图,粘一个路由处理函数要控制流的流程图,粘一个 docker-compose 要服务拓扑的架构图。
说清楚要什么很重要 —— 「从这段代码画一张类图」比光把代码粘进来、不给任何指令效果好得多。因为它读代码的方式接近一个工程师扫一眼 diff,是语义上的理解,不是严格建一棵语法树。这也是跟专门的代码转 UML 工具相比要认的账:不用构建、不用装语言服务器、它认识的语言都能用(JavaScript、TypeScript、Python、Java、Go、Rust 等等),但这是尽力而为的理解,不是保证正确的静态分析。写一条评审留言或者一份上手文档,这笔账划算;要是这张图必须跟真实类型系统严丝合缝地对上,先看一遍再用。
粘的时候克制一点 —— 一个类层次、一个函数、一个 docker-compose 文件,不要整个仓库。它读的是能塞进一次对话的内容,不是整个代码库。跨几十个文件的逆向工程,这是逐个片段的起点,不是全仓库可视化工具。
对话模式里 AI 会先问你两三个问题 —— 谁参与、发生什么、异常分支怎么走 —— 弄清楚了再动笔。
教程里讲了常用符号、几种基本结构、九条画法规范,还有可以直接拿去用的 prompt 模板和真实业务例子。