Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>SVG手动编辑器New to Visual Studio Code? Get it now.
SVG手动编辑器

SVG手动编辑器

boringcat520

|
5 installs
| (0) | Free
SVG手动编辑器:PPT、Visio 没法跟 AI 协作改科研图;用 SVG 让 Agent 出图、你在画布上精修,同一份矢量来回改
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

SVG手动编辑器

SVG手动编辑器图标

PPT 和 Visio 画科研图,真正过不去的不是慢,而是没法跟 AI 协作。

机制图、技术路线、实验流程往往要改十几版:措辞、对齐、箭头、配色。Cursor / VS Code 里的 Agent 本可以帮你出图、改图,但 PPT、Visio 把这条路堵死了——幻灯片和 .vsdx 都不是 Agent 能来回读写的工作文件;你把 AI 生成的图贴进去,得到的多半是 PNG,一张改不动的死图。人在软件里精修完,模型接不上;模型再出一版,你的对齐和措辞全作废。

本编辑器把工作文件换成 SVG:Agent 写同一份矢量文件,你在画布上像改 PPT / Visio 一样拖一拖,改完仍是标准 SVG,Agent 还能接着改。人和 AI 始终在改同一张图。

专为研究生科研绘图:机制图、流程图、框架图、实验方案图,任意形式都可以。

SVG手动编辑器界面:步骤一至步骤五示例流程图、顶边与左边标尺、图形工具与属性栏

PPT、Visio 为什么接不上 AI

PPT 适合做演示,Visio 适合画流程图,但它们都不适合当科研绘图的工作文件。换到 Visio 并没有绕开死结:核心问题不是「拖框比较慢」,而是 人和 Agent 无法接力同一张图:

  • 格式对不上:PPTX、VSDX 结构封闭,对象锁在 Office 文件里。Agent 擅长读写文本和 SVG,却打不开、也改不了你正在拖的那一页幻灯片或那一张 Visio 图。
  • Visio 看起来更专业,对 AI 一样是黑盒:连接线、泳道、模具再整齐,工作文件仍是 .vsdx。它不在 Cursor 的工作区里当可编辑文本,Agent 不能改一个框的字、不能挪一根连接线,更不能和你来回提交同一份图。
  • 贴进去就是死图:让 AI「出一张图」再塞进 PPT 或 Visio,得到的是 PNG / JPEG。改一个标注、挪一根箭头、换一句标题,Agent 接不上,你也只能擦了重贴,或整页重新生成。
  • 人改完,模型断档:你在 PPT / Visio 里对好的格子、改过的措辞,Agent 看不到同一份可编辑矢量。它再出一版,手工全作废。版本一多,只能靠另存副本硬扛。
  • 对齐慢只是次要问题:格子、箭头、放大发糊当然烦,但这些还能忍。真正过不去的是:科研图必须反复改,而 PPT 和 Visio 都无法成为人和 AI 的共同画布。

人和 AI 一起画,而不是二选一

把工作文件换成 SVG,这条路就通了:

  1. 让 Agent 先画:在 Cursor / VS Code 里说明论文结构、配色和标注,生成 SVG(框架图、技术路线、模型结构、实验流程都可以)
  2. 你在画布上改:用本编辑器打开,拖框、改字、拉箭头、对齐,几分钟改到能投稿
  3. 不满意就继续:你改过的还是标准 SVG。Agent 可以接着改同一个文件,打开的画布也会自动刷新——同一张图,人和 AI 来回接力

Agent 负责「从零到有、从有到多种方案」,你负责把最后 10% 摆到位。这才是研究生真正用得上的出图方式。

对齐、箭头粘连、矢量导出这些,是为了让「人改那一步」比在 PPT、Visio 里对格子更快,而不是拿来替代 AI。没有同一份可编辑文件,协作根本转不起来。

请作者喝杯咖啡

这个编辑器按 GPL-3.0 开源。我希望研究生画机制图、技术路线、实验流程时,不必在 PPT、Visio 里跟 AI 各画各的,也不必被贴进去的位图锁死。

如果你用它顺利改完一版图、少熬了一会儿,或者只是觉得「终于能和 Agent 改同一张图」——扫下面任意一个码请我喝杯咖啡,就是最大的鼓励。赞赏不在多少,而在让这件事能继续做下去:更好的对齐、更稳的箭头、你提的下一个功能。

想加什么,也可以扫码时顺手说一声。谢谢你愿意让科研绘图更好用一点。

微信支付收款码    微信赞赏码

左:微信支付收款码 右:微信赞赏码(周六不摸鱼)

安装 VSIX

从 Releases 下载 svg-manual-editor-0.1.35.vsix,然后任选一种方式安装:

  • Cursor / VS Code: 扩展面板 → ⋯ → Install from VSIX…,选中下载的 .vsix
  • 命令行: code --install-extension svg-manual-editor-0.1.35.vsix(Cursor 可用 cursor --install-extension)

安装后重启编辑器。左侧活动栏会出现 SVG手动编辑器 图标,点击即可打开文件页:还没有打开 SVG 时,可以新建或打开项目里的文件;页面会列出工作区全部 SVG(带修改时间)和最近打开的文件(带打开时间)。也可以在资源管理器里对 .svg 右键 → 用 SVG手动编辑器打开。

本地开发也可在本目录运行 .\install-extension.ps1,或按 F5 启动「运行 SVG手动编辑器扩展」。

扩展使用自管理 SVG 文档,绕过 Cursor 某些版本恢复自定义文本编辑器时的 Unable to retrieve document 问题。你在画布上的修改会自动写回当前 SVG;Agent 改了同一个文件,打开的画布也会自动刷新——人和 AI 始终在改同一张矢量图。

在浏览器里用

双击 启动编辑器.bat(需已安装 Python),或把 SVG 拖进画布 / 点「打开」。

常用操作

操作 方式
打开侧边栏 点击 VS Code / Cursor 左侧活动栏的 SVG 图标
新建或打开 SVG 侧边栏「新建 SVG」「打开文件」,或标题栏对应按钮
从项目列表打开 侧边栏按文件夹分组列出工作区 .svg,显示修改时间;点击即用本编辑器打开
从最近打开 侧边栏列出最近用本编辑器打开的文件,显示打开时间
右键文件 打开、重命名、删除、在文件资源管理器中显示
移动方框(带框内文字) 选择工具下拖动矩形
添加流程图图形 打开左侧「图形」二级菜单,可选矩形、圆角矩形、圆/椭圆、判断菱形、输入输出平行四边形和开始结束终止符
显示标尺 点击顶部「标尺」按钮,在画布顶边和左边显示随缩放、平移更新的标尺
显示/隐藏网格 点击顶部「网格线」按钮
记住编辑器偏好 网格线、网格吸附、智能参考线、箭头方向、导出格式/清晰度/背景和属性栏状态会自动保存,下次打开继续使用
水平/垂直移动画布 拖动画布底部或右侧的滚动条,也可点击轨道快速跳转
收起/展开属性栏 点击右侧「属性」标题旁的箭头,收起后画布会自动扩展,选择会自动记住
导出高清图片 单击顶部「导出」可选择 SVG、PNG、JPEG 或 WebP;位图按目标像素直接渲染矢量(不是放大糊图),支持 1×/2×/4×/8×,PNG/WebP 可选透明或白色背景;双击「导出」会按当前设置直接导出到 SVG 所在文件夹
对齐边缘或中心 拖动时跟随智能参考线自动吸附
设置水平/垂直等距 把图形拖到相邻图形之间或队列末端,跟随粉色距离标记
匹配图形宽高 拖动图形边或角点调整大小,接近其他图形尺寸时自动吸附;同高显示水平贯穿线,同宽显示垂直贯穿线;按住 Ctrl 则按原比例等高等宽缩放
临时关闭智能吸附 拖动时按住 Alt
新建箭头 打开「箭头」二级菜单,选择垂直直线、水平直线或倾斜直线后拖动;新箭头始终只有起点和终点,不会自动产生折点
手动改变线条转向 选中直线、箭头或折线后点击左侧「增加节点」,最长线段上会出现黄色正交控制点;错列端点默认生成最短三段式折线,同列端点需要绕行时才生成双折返,可重复增加节点
线条样式 选中直线、箭头、折线或图形后点击左侧「线条」;可选无线条、实线/虚线/点线/点划线的粗细预览,以及普通线条、终点/起点/两端箭头
对齐箭头端点 新建或拖动箭头终点时,接近其他箭头端点会出现蓝色「端点等高/端点同列」参考线并磁性吸附;按住 Alt 可临时关闭
调整箭头 / 折线箭头 选中后直接拖两端或已有节点;编辑器不会在拖动时偷偷增加折点
修改箭头样式 在右侧修改描边颜色、线宽、实线/虚线/点线、拐角和箭头位置;填充和描边使用与文字相同的颜色菜单(主题色、标准色、最近使用、渐变、更多颜色和取色器);箭头会自动跟随线身颜色
在线条上插入文字 选中直线、箭头或折线后点击左侧「线文本」,即可在中点直接输入;也可双击线条或使用右侧属性,用 0–100% 滑杆及直接拖动调整位置
箭头连接图形 新建箭头或拖动箭头端点,靠近图形上/右/下/左中点后自动吸附;吸附只移动当前端点,即使两端不在同一行/列也绝不自动增加折点
端点粘连图形 端点吸附到某条边后会记住这条边,之后移动、方向键微调或缩放该图形时箭头端点自动跟随;只有被移动图形那一端会重算,手工加的折点保持不动;两端图形一起移动时整条线平移;把端点拖离图形即解除粘连
旧图自动识别粘连 打开已有 SVG 时,端点正好落在某条边中点上的箭头会自动获得粘连,无需重新拖一遍
显示连接中点 拖动箭头、折线折点或任意图形时,自动显示所有图形的上/右/下/左中点,松开后消失
正交控制节点 垂直段上的黄色控制点只需左右拖动,水平段上的只需上下拖动;编辑器会联动内部成对拐角,避免出现意外的 V 形斜线
折点智能吸附 拖动黄色正交控制点时,会优先吸附到本线起终点、图形连接中点及其他箭头端点的同行/同列位置;按住 Alt 可临时关闭
正交折线 折线工具的起点和终点可吸附到图形四边中点及其他箭头端点;完成后节点按水平/垂直关系联动,不能拖成 V 形
箭头头部旋转 选中箭头后点击选框旁的旋转图标,只将箭头头部顺时针旋转 90°,线条、折点和线文字保持原位;连续四次恢复自动方向
图形边缘方向 吸附到图形边后箭头头部恢复自动朝向,沿最后一段指向该端点;不会为了垂直进入而插入折点
线文字居中 通过「线文本」插入的文字中心直接落在线条上,可沿整条线前后拖动;折线调整或旋转后仍保持在线上
手动绘制折线 依次单击确认折点,移动鼠标时只显示当前预览;双击或 Enter 完成,Esc 取消
选择、移动和编辑文字 轻点只选中,鼠标移动超过防误触距离后才会拖动;双击或选中后按 Enter/F2 打开编辑框,内容会自动选中,便于 Ctrl+C 复制;也可使用右侧「内容」
缩放后编辑文字 编辑框会跟随当前画布缩放匹配实际字号,并自动扩展以避免出现滚动条或裁切文字
设置文字格式 选中文字或含文字的图形,在顶部工具栏修改文字颜色、字体、字号、加粗、斜体、下划线及左/中/右对齐;颜色菜单提供自动色、主题色、标准色、最近使用、渐变、更多填充色(侧栏渐变预设)、其他颜色对话框(标准/自定义/高级)和取色器;用过的颜色会记在「最近使用」里;多选时会统一应用
两端对齐和行间距 顶部提供标准左/中/右/两端对齐图标;多行文字可设置 1.0×、1.15×、1.2×、1.5×、2.0×、2.5× 或 3.0× 行距,按所属图形分别排版
删文字/图形 选中后 Delete
线条 / 折线 / 文字 / 图形 左侧工具
撤销 Ctrl+Z

许可证

本软件按 GNU General Public License v3.0(GPL-3.0)发布。你可以自由使用、修改和分发;若再分发本软件或基于它的衍生作品,也必须以 GPL-3.0 开源,并保留版权与许可声明。详见仓库中的 LICENSE。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft