当前位置：首页 > draw.io教程

用 AI + draw.io 10 分钟画出专业技术路线图

drawio1周前 (04-19)draw.io教程8

写基金标书、投论文，技术路线图几乎是必交材料。但很多人卡在这里：PPT 里手动拖方框、对齐箭头，改一次布局就要重排半小时。

其实有个更省力的路径——把论文直接喂给 AI，让它生成 draw.io 的 XML 代码，粘贴进去就能渲染。我用「Attention Is All You Need」这篇经典论文亲测了一遍，从提示词到成图只用了不到 10 分钟。

目标效果长什么样

先看参考模板。这是学术申报书里常见的三列式技术路线图样式：左列是研究阶段，中列展开各阶段的具体内容，右列列出对应方法，层层嵌套、层次清晰。

我们的目标就是用 AI 生成一张结构类似的图——不用手动画，代码直接导入。

打开 Gemini，输入以下提示词。

以 Transformer 论文为例，提示词结构如下：

请帮我生成 draw.io XML 代码，绘制论文NIPS-2017-attention-is-all-you-need-Paper.pdf 的技术路线图，风格参考“技术路线图参考模板.jpg”的三列式路线图。

Gemini 会根据论文内容和提示词生成完整的 XML 代码。

生成完成后，把 XML 代码全部选中复制，准备导入 draw.io。

打开 diagrams.net，新建空白画布，然后按下图操作：

① 点击顶部菜单「其它」
② 选择「编辑绘图…」
③ 清空弹窗里的默认内容，把刚才复制的 XML 粘贴进去，点击「确定」

图表立刻渲染出来，不需要任何手动排版。

导入后得到的路线图如下。三列结构完整：研究阶段沿左侧纵向推进，每个阶段的具体研究内容在中间展开，对应的关键技术列在右侧。

整体效果已经接近参考模板的层次感。如果对某个模块不满意，直接双击文字修改，或者继续对话让 AI 调整后重新导入。

如果初版有节点重叠或宽度不对，不用从头写提示词，直接追加：

请把中列每个大框内的子节点改为水平并排（而非竖向列表），
子节点之间不加箭头，只是并列展示。
整体宽度保持 1400px，请输出修改后的完整 XML。

AI 会在原有基础上局部修改，再次粘贴导入即可。

导出时选「文件」→「导出为」→ PNG（300 DPI 适合论文投稿）或 SVG（矢量格式，无限缩放不失真）。