PPT-SVG 使用帮助：用上下文快速生成可拆解的 PPT SVG 图形

项目介绍

PPT-SVG 是一个面向 PPT 单页视觉素材的开源工具。它的目标不是替你生成整套演示文稿，而是解决一个更常见、更具体的问题：

已经在做 PPT，但某一页缺一张结构清楚、风格干净、可以继续编辑的流程图、矩阵图、时间线或架构图。

你只需要输入一段描述，必要时上传已有材料作为上下文，工具会让 AI 生成一份结构化 JSON，再由本地渲染器生成 SVG。这个 SVG 可以直接插入 PowerPoint，也可以在 PowerPoint 中转换为形状后继续拆解、改色、改字和重新排版。

项目地址：

https://github.com/imkcrevit/PPT-SVG

在线体验：

https://labs.graptolite.ai/ppt/

演示视频：

适合解决什么问题

PPT-SVG 适合用来生成单张演示图，而不是整份 PPT。

典型场景包括：

• 把一段业务流程整理成流程图
• 把产品路线、项目计划、发布计划整理成时间线
• 把优先级、用户分层、能力分布整理成矩阵图
• 把组织层级、能力层级、成熟度模型整理成金字塔或分层图
• 把系统模块、服务关系、平台组件整理成架构图
• 根据已有 PPT、Markdown、Word 文档中的内容，快速生成一张可以放进 PPT 的视觉图

不适合的场景：

• 生成整套完整 PPT
• 做像 Figma 那样的精细视觉设计
• 做大量动画、复杂插画或品牌级海报
• 用它替代 PowerPoint 的最终排版

更准确地说，PPT-SVG 是一个“帮你快速画出结构图”的工具,通常应该在 PowerPoint 里结合页面风格继续微调。

为什么使用 SVG

SVG 对 PPT 图形非常友好，原因有四个。

第一，SVG 是矢量格式。图形放大、投影、导出 PDF 时，文字、线条和箭头都更清晰，不会像截图一样变糊。

第二，SVG 文件通常比较小，并且天然支持透明背景，方便叠加到不同颜色或不同版式的幻灯片上。

第三，PowerPoint 可以把 SVG 当作 Office 图形处理。需要深度编辑时，可以将 SVG 转换为形状，再对其中的文字、线条、色块、箭头进行二次调整。

第四，PPT-SVG 的生成过程以 JSON 为中间结构。相比直接生成一张不可编辑图片，结构化数据更容易重新生成、检查、局部修改和追踪问题。

界面组成

PPT-SVG 的主界面分为三个区域：对话生成区、预览与 JSON 区、编辑与历史区。

1. 对话生成区

左侧是主要输入区。你可以选择图形类型、输入需求、上传上下文文件，并决定下一轮是否引用当前渲染结果。

当前内置图形类型包括：

• 其他 / AI 自由发挥：让 AI 根据描述选择最合适的图形结构
• 流程图：适合步骤、交接、生命周期、审批流
• 矩阵：适合 2x2 分析、分群、优先级判断
• 时间线：适合路线图、发布计划、里程碑
• 金字塔：适合分层结构、漏斗、成熟度模型
• 架构图：适合系统分层、服务关系、平台图

每个对话最多 5 轮。这样做是为了避免上下文越来越长，导致生成质量下降或 token 浪费。如果 5 轮后仍然没有得到合适结果，建议新建对话，把前面已经确认的要求重新整理成一段更清晰的描述。

2. AI 优化

输入需求之后，可以先点击 AI 优化。它不会扩写你的需求，也不会替你增加新的事实，只会把表达变得更清楚、更适合图形生成。

适合使用 AI 优化的情况：

• 需求写得比较口语化
• 句子较长，重点不够集中
• 担心 AI 不理解图形结构
• 想把一段说明整理成更稳定的生成提示词

如果你已经写了非常明确的提示词，可以直接提交，不一定需要优化。

3. 上下文文件

你可以上传一个上下文文件，帮助 AI 理解要画什么。当前支持：

• PDF
• Markdown
• DOC / DOCX
• PNG / JPG / JPEG
• PPTX

其中 Markdown、DOCX、PPTX 会提取文本作为上下文。PDF 和图片类文件也可以作为附件上传，但为了稳定生成，建议你仍然在输入框里补充关键文字，例如“请根据这张图的三层结构重画为更适合 PPT 的架构图”。

单个附件大小上限为 12 MB。

4. 引用当前渲染

第一次生成之后，后续对话默认可以引用右侧当前渲染结果。这样你可以用自然语言继续修改：

• “保持现在的配色，把第三步改成审批确认”
• “把时间线压缩一点，右侧留出说明文字空间”
• “选中的几个模块改成蓝色系”
• “保留结构，但让标题更短”

如果你希望完全重新生成一张图，可以取消引用当前渲染，或者新建对话。

5. 预览与 JSON

右侧区域提供两个视图：

• 预览：实时查看 SVG 图形
• JSON：查看和编辑生成的结构化数据

普通用户优先使用预览视图即可。JSON 视图适合熟悉结构化数据的人，用来做更精确的修改。修改 JSON 后点击 确定，系统会重新校验并渲染 SVG。

6. 元素编辑

在 SVG 预览中点击元素后，可以在右侧编辑面板中修改：

• 文本内容
• 填充颜色
• 描边颜色

也可以通过框选选中多个元素，批量修改颜色。工具会保留最近 3 步本地编辑历史，可以使用撤销按钮回退。

这个编辑能力适合做轻量修改。如果需要大幅调整结构，通常让 AI 重新生成会更快。

7. 历史图与匹配度

每一轮生成后，系统会在历史区保留对应结果。你可以回看前几轮图形，比较哪一版更适合当前 PPT。

匹配度用于提示当前图形和用户需求的贴合程度。它不是绝对评分，更像一个辅助判断：如果图形结构、文字和空间安排都比较合理，分数通常会更高；如果出现拥挤、缺项或偏离需求，分数会下降。

样式与主题来源

PPT-SVG 除了图形结构类型，也支持样式与主题来源控制，决定颜色、背景和局部视觉倾向。

• 默认样式：白底、克制商务配色，优先保证 PPT 中清晰可读。
• 上传图片主题：可以从品牌图、参考图中提取主色，但会过滤纯背景图、截图式暗色界面和色彩过多的图片。
• 自然语言主题：可以直接说“保持结构，改成蓝绿色”“更接近咨询公司白底风格”等，系统会把它合并进主题配置。
• 本地手动编辑：生成后点击元素，可以改文字、填充色和描边色；框选多个元素时可以批量调整。

如果你只是想让图贴合某个 PPT 模板，最稳定的做法是上传一张包含品牌主色的截图或图片，并在输入框补一句：“只参考颜色和简洁程度，不照搬图片内容。”

推荐使用流程

第一步：选择图形类型

如果你已经知道要画什么，直接选择对应类型。例如流程图、时间线、矩阵、架构图。

如果你还不确定，选择 其他 / AI 自由发挥，让 AI 根据内容判断图形结构。

第二步：输入上下文

描述越具体，生成越稳定。一个好的提示词通常包含四类信息：

• 主题：这张图要表达什么
• 结构：希望用流程、矩阵、时间线还是架构图
• 内容：必须出现哪些节点、阶段、角色、模块
• 风格：简洁、商务、适合白底 PPT、不要太复杂

示例：

请生成一张适合白底 PPT 的 5 步客户 onboarding 流程图，从注册、资料完善、首次使用、价值确认到续费。整体要简洁，节点文字不要太长，每一步下方保留一句简短说明。

第三步：必要时上传文件

如果你的内容已经在 PPT、Word 或 Markdown 中，可以上传文件。上传后，仍然建议在输入框里说明你要提取哪部分内容、希望变成什么图。

示例：

请根据上传 PPT 中关于 Q3 产品计划的内容，整理成一张横向时间线。只保留关键里程碑，不要照搬所有文字。

第四步：生成并检查预览

点击 正式提交 后，系统会经历几个阶段：

• 压缩上下文
• 生成 SVG JSON
• 校验和必要时修复 JSON
• 渲染并检查布局
• 保存本轮生成结果

如果生成失败，可以简化描述、减少节点数量，或者新建对话重新开始。

第五步：局部修改

生成后先做轻量调整：

• 点击文字，修改措辞
• 点击色块，修改填充色
• 点击线条或箭头，修改描边色
• 框选多个元素，批量统一颜色

如果只是个别文字不准确，不需要重新生成整张图。

第六步：下载 SVG

确认图形基本可用后，点击 下载 SVG。下载文件名会尽量使用生成图的标题。

第七步：插入 PowerPoint

在 PowerPoint 中使用 SVG 有两种方式。

如果只需要保持清晰度：

1. 打开 PowerPoint
2. 进入目标幻灯片
3. 选择 插入 > 图片 > 此设备
4. 选择刚下载的 SVG
5. 调整位置和大小

如果你需要后续拆解编辑：

1. 选中插入的 SVG
2. 在顶部工具栏找到 图形格式
3. 选择 转换为形状
4. 按 PowerPoint 提示确认转换
5. 转换后即可像普通 Office 形状一样编辑文字、颜色、线条和位置

不同版本的 PowerPoint 菜单名称可能略有差异。有些版本会通过 取消组合 完成转换，有些版本会显示为 转换为形状。核心目标都是把 SVG 从单个图形转换成可编辑的 Office 形状。

如果你使用的是“链接到文件”或“插入并链接”，在最终分享 PPT 前，建议进入 文件 > 信息 > 编辑指向文件的链接，选择对应 SVG 后点击 断开链接。这样图形会嵌入 PPT 文件，不再依赖你本机的 SVG 路径。

写提示词的建议

1. 明确图形结构

不要只写：

帮我画一下我们的产品流程。

更好的写法：

生成一张横向 5 步流程图，展示产品从需求收集、方案设计、开发、验收到上线的过程，每一步包含一个短标题和一句说明。

2. 控制节点数量

单页 PPT 的图形不适合放太多内容。通常建议：

• 流程图：3 到 7 步
• 时间线：4 到 8 个里程碑
• 矩阵图：4 个象限，每个象限 2 到 4 个要点
• 架构图：3 到 5 层，每层 2 到 5 个模块

如果内容很多，先让 AI 做摘要，再生成图。

3. 指定文字长度

图形最容易出问题的是文字太长。可以直接要求：

每个节点标题不超过 8 个汉字，说明不超过 18 个汉字。

或者：

Keep every label under 4 words and avoid long sentences.

4. 说明使用场景

告诉 AI 这张图会放在哪里，有助于控制复杂度：

这张图用于汇报 PPT 的一页，白底，16:9，风格商务克制，不要使用大面积渐变和复杂装饰。

5. 修改时引用当前结果

如果上一版基本满意，修改时不要重新描述全部内容，只说明变化：

保持当前结构，把第二层的三个模块改成“数据接入、规则引擎、结果输出”，整体颜色更接近蓝绿色。

自部署说明

如果你希望自己部署或本地运行，可以直接使用开源仓库。

git clone https://github.com/imkcrevit/PPT-SVG.git
cd PPT-SVG
npm install
cp .env.example .env.local
npm run dev

然后打开：

• http://localhost:3000/zh
• http://localhost:3000/en

需要配置的环境变量：

OPENROUTER_API_KEY=your_openrouter_key
OPENROUTER_MODEL=google/gemini-2.5-flash
OPENROUTER_SITE_URL=http://localhost:3000
OPENROUTER_APP_NAME=PPT-SVG
MONGODB_URI=
MONGODB_DB=ppt_svg

说明：

• OPENROUTER_API_KEY 必填，用于调用 OpenRouter
• OPENROUTER_MODEL 决定实际使用的模型，可以填写 OpenRouter 支持的 Gemini、GPT、DeepSeek、Claude 等模型 ID
• MONGODB_URI 可选，配置后会记录会话、附件路径和生成产物信息
• 本地开发不需要 Nginx，直接使用 Next.js 服务即可
• 如果要部署到 /ppt 这样的子路径，可以在构建和运行时设置 NEXT_PUBLIC_BASE_PATH=/ppt

当前版本以 SVG 导出为主。仓库中有 PPTX 导出相关后端代码，但 V1 主界面暂未启用 PPTX 导出。

常见问题

生成的图太复杂怎么办？

减少节点数量，并明确说明“只保留关键内容”。例如：

请只保留 5 个关键节点，每个节点最多一句说明，不要展开细节。

文字溢出或拥挤怎么办？

可以让 AI 缩短文字，或者直接点击文字元素手动改短。PPT 图形里，短词和短句通常比完整段落更有效。

结果方向不对怎么办？

如果第一轮方向就不对，建议新建对话，重新写一段更明确的需求。不要在错误方向上连续修改太多轮。

上传文件后仍然没抓住重点怎么办？

上传文件只是补充上下文。最好在输入框里明确告诉 AI 要看哪一页、哪一段、哪个主题，以及你希望它变成什么图。

JSON 报错怎么办？

系统会尝试自动修复模型返回的 JSON。如果仍然失败，通常是输出过长或结构太复杂。可以简化需求，减少节点数量，再重新生成。

PowerPoint 不能转换为形状怎么办？

优先确认你插入的是 SVG 文件，而不是 PNG 截图。如果菜单中没有 转换为形状，可以尝试右键 取消组合，或升级到支持 SVG 转 Office 形状的 PowerPoint 版本。