---

1. 打破次元壁：如何在 Trae/Cursor 中直接生成架构图与插画

1.1. 前言

我发现了一个让 Trae 和 Cursor 变身"AI 插画师"的玩法。只需一个简单的 Python 脚本，就能让 IDE 直接读取代码并生成 SVG 矢量图。不需要外部工具，也不用切屏，直接在编辑器里就能出图。

1.2. 背景与痛点

写代码和文档的时候，最烦的就是"缺图"。

业务逻辑太绕的时候，写几百字注释都不如一张图管用，但画图真的太费劲了。README 如果只有干巴巴的文字，别人根本不想看。就算去 Excalidraw 画好了，截图贴回来，代码一改，图又得重画。

其实你手里的 Trae 或 Cursor 已经内置了绘图能力。它不需要安装插件，不需要 API Key，只需要一点点"引导"。

1.3. 核心机制：Print-to-Image

要在 IDE 里生成图片，我们利用的是 Agent 本身就会写 SVG XML 代码的能力，加上它能看见脚本打印在终端里的 Prompt。

我们写个脚本把"画图要求"打印在终端里，Agent 看到后就会照做，直接把 SVG 代码写进文件里。

2. 怎么落地：从原理到实战

2.1. 核心代码拆解

要实现这个功能，你只需要一个简单的 Python 脚本。这个脚本负责构造一个标准化的 API 请求（Prompt），发送给 Agent 这个"后端服务"。

2.1.1. 关键代码段

# generate_diagram.py

def create_drawing_prompt(code_content, diagram_type):
    # 1. 定义 SVG 模板 (告诉 Agent 怎么写 SVG 才规范)
    svg_template = """
    要求：
    1. 使用 <svg> 标签，必须包含 viewBox。
    2. 风格：Notion 风格 (黑白线条，手绘感)。
    3. 字体：使用 sans-serif，支持中文。
    4. 不要使用 Markdown 代码块，直接输出 XML。
    """
    
    # 2. 拼装指令
    prompt = f"""
--- START DRAWING INSTRUCTION ---
你现在的身份是：技术插画师。

【任务】
请根据以下代码内容，绘制一张 {diagram_type}。

【代码内容】
{code_content}

【绘图规范】
{svg_template}

【执行步骤】
1. 分析代码结构。
2. 设计图表布局。
3. 编写 SVG 代码并保存为 'output.svg'。
--- END DRAWING INSTRUCTION ---
    """
    return prompt

# 3. 打印指令，触发 Agent
print(create_drawing_prompt(my_code, "类图"))

2.1.2. 为什么这样做有效？

SVG 是纯文本，能直接进 Git 版本控制。代码改了，重新跑一遍脚本，图就更新了，再也不用担心二进制图片冲突。想换成 Notion 风还是手绘风，改改 Prompt 就行。

2.2. 灵魂拷问：非得写脚本吗？

直接在 Chat 框里让它画图当然也可以。但脚本封装（Skills）解决了几个实际问题。

如果你要画的文件有几千行，脚本可以自动读取并截取重点，而不用你手动复制粘贴或反复 @ 文件。画出高质量图片的 Prompt 通常很长（包含 SVG 规范、配色要求、字体限制等），把这些固化在脚本里，就不用每次都去翻“咒语书”了。

而且这不一定要用 Python。Shell、Node.js、Go 甚至一个简单的 cat prompt.txt 都可以。只要能在终端打印出 Prompt，就能驱动 Agent。

💡 换个角度看 Skills

在 Trae 和 Cursor 里，Skills 本质上就是对 IDE 内置 AI 能力的 API 封装。

官方虽然没有提供 draw_svg() 这样的函数接口，但我们通过脚本把“复杂的 Prompt”封装起来，对外只暴露简单的命令行参数。这就相当于你自己定义了一个 AI 绘图 API。

你写的不是脚本，而是调用 Agent 大脑的驱动程序。

3. 实战案例：让 IDE 给你画图

3.1. 案例一：Code-to-Flowchart (代码转流程图)

接手复杂代码时，这个功能最有用。比如面对一段复杂的逻辑跳转，与其硬啃代码，不如写个脚本让 Agent 把 if-else 分支画成流程图。脚本跑完，目录下直接生成 flowchart.svg，逻辑走向一目了然。

3.2. 案例二：Readme-to-Header (文档配图)

或者写完博客想加个头图，直接让脚本读取 README 标题和简介，生成一张扁平化风格的 Banner。不用找设计师，也不用到处找素材，一张 SVG 封面图就有了，直接插入文档顶部。

4. 可复用的 Skill 片段：你的私人 API 封装

你可以直接把下面这个脚本保存为 tools/draw.py。这就相当于你为项目定义了一个 draw_it() 接口，以后任何时候需要画图，调用它就行，不用每次都去想 Prompt 怎么写。

import sys
import os

def draw_it(target_file, instruction):
    """
    通用绘图指令生成器
    """
    try:
        with open(target_file, 'r') as f:
            content = f.read()
    except:
        content = "无文件内容，仅根据指令绘图"

    prompt = f"""
    === 🎨 AI 绘图指令 ===
    
    【目标】
    {instruction}
    
    【参考内容】
    文件：{target_file}
    内容摘要：
    {content[:2000]}...
    
    【SVG 规范 (必须遵守)】
    1. 输出为独立 .svg 文件。
    2. 必须设置 viewBox="0 0 800 600" (按需调整)。
    3. 样式：现代扁平化，配色舒适。
    4. 确保文字不重叠，使用 Arial 或 sans-serif。
    
    【行动】
    请直接编写 SVG 代码并保存文件。
    =====================
    """
    print(prompt)

if __name__ == "__main__":
    # 使用：python draw.py ./main.py "画一张系统时序图"
    if len(sys.argv) > 2:
        draw_it(sys.argv[1], sys.argv[2])
    else:
        print("Usage: python draw.py <file_path> <instruction>")

5. 接下来做什么？

掌握了"定义 API"的思路后，这个逻辑完全可以用到别的地方。比如写一个脚本读取代码，让 Agent 生成 API 文档；或者读取函数生成单元测试；甚至读取 Git 改动记录进行 Code Review。

记住，Trae 和 Cursor 都是你的后端，而你是那个定义接口的人。