AI时代，你需要一款趁手的SVG编辑器

ivye
工具收集
15天前
9热度
0评论

我要开源：Graphing — AI时代，你需趁手的SVG编辑器

前言

做为一个高频使用 AI 生成 SVG 的开发者，我一直在找一个趁手的”中间编辑工具”——在线编辑器太重，桌面软件太贵，原始的 SVG Editor 已经归档停更。所以我自己 fork 了它，把它打磨成了 Graphing：一个完全嵌在 VS Code 里的可视化 SVG 编辑器，AI 吐出的 SVG，你在编辑器里就能看、能改、能调。

这正是 AI 时代人机协作最自然的方式——轻量、高效、随取随用。

什么是Graphing？

Graphing 是 VS Code 的一个扩展，在编辑器内部提供了一个完整的可视化 SVG 编辑器。它源自经典的 SVG Editor（henoc.svgeditor，22 万+ 安装），并在此基础上做了大幅增强：更强的 SVG 画板（点击拾取、方向键移动、格式化与属性编辑），以及Markdown 内嵌 SVG 即时渲染——你在 .md 文件里写的 SVG 代码，预览面板直接就能看到效果。它不是重量级的图形设计软件，而是一个恰好够用的轻量绘图工具——你既可以在画板上拖拽编辑，也可以直接修改代码，两者之间实时双向同步。

项目地址：https://github.com/Worthies/Graphing
Open VSX 市场：https://open-vsx.org/extension/cloorc/graphing

AI 输出的视觉内容有几种常见格式，但走到”人机协作”这一步，大部分都不够好：

格式	致命缺陷
Mermaid / Graphviz	表达能力天花板太低。画个流程图还行，画个图标、插画、自定义 UI 组件？完全做不到。它们是 DSL，不是图形语言 —— 你被限制在预设的几条语法轨道里，出不了圈。
PNG / JPG	纯二进制。AI 生成一张 PNG 需要走”模型 → 像素 → 压缩”的完整渲染管线，算力开销巨大；更关键的是，你没法在 Git 里 diff 一张位图，也没法告诉 AI”把第三个框的颜色从蓝改成绿”——它只能重画整张图。
SVG	文本即图形，图形即文本。AI 在 token 层面就能精确理解和编辑 SVG：改颜色就是改 `fill="#FF5733"`，调尺寸就是改 `width="200"`，增删节点就是增删一行 `<rect>`。它是 web 的原生矢量格式，零转换就能进项目；它是纯文本，Git diff、Code Review、版本回退全部天然支持。更重要的是，SVG 的表达力没有天花板 —— 从最简单的流程图到最复杂的手绘式插画，它都能承载，而 AI 的创造力不会被一个 DSL 的语法框住。

格式

致命缺陷

Mermaid / Graphviz

表达能力天花板太低。画个流程图还行，画个图标、插画、自定义 UI 组件？完全做不到。它们是 DSL，不是图形语言 —— 你被限制在预设的几条语法轨道里，出不了圈。

PNG / JPG

纯二进制。AI 生成一张 PNG 需要走”模型 → 像素 → 压缩”的完整渲染管线，算力开销巨大；更关键的是，你没法在 Git 里 diff 一张位图，也没法告诉 AI”把第三个框的颜色从蓝改成绿”——它只能重画整张图。

SVG

文本即图形，图形即文本

。AI 在 token 层面就能精确理解和编辑 SVG：改颜色就是改 fill="#FF5733"，调尺寸就是改 width="200"，增删节点就是增删一行 <rect>。它是 web 的原生矢量格式，零转换就能进项目；它是纯文本，Git diff、Code Review、版本回退全部天然支持。更重要的是，SVG 的表达力没有天花板 —— 从最简单的流程图到最复杂的手绘式插画，它都能承载，而 AI 的创造力不会被一个 DSL 的语法框住。

这就是为什么 Graphing 选择 SVG 作为 AI 与人之间的”共同语言”——它不是又一个文档生成器，而是一个连接 AI 创造力与人类审美判断的视觉对话层。

AI 时代的 SVG 创作闭环AI 模型Claude · ChatGPT · Copilot生成 SVG 架构图生成 SVG 流程图生成 SVG 图标输出：纯 SVG 代码Graphing即开即看 SVG画板拖拽微调精准修改代码调色 · 对齐 · 缩放代码与画板实时同步最终交付精致的设计稿可复用的图标集清晰的架构图即插即用的资产直接进入代码仓库AI 生成 SVG → Graphing 查看/编辑 → 代码仓库 — 全链路不离开 VS Codecloorc.graphing · v2.9.11 · MIT

Graphing 如何成为人机协作的最佳窗口

快捷键 — 你的”视觉 prompt”

1. AI 输出 SVG → 你瞬间就能看到

不再需要把 AI 生成的 SVG 代码粘贴到在线工具：Graphing 直接在你的 VS Code 里打开 SVG 文件，画板和代码并排显示。AI 生成的架构图、流程图、数据可视化，右键就能看到效果，所见即所得。

2. 代码与画板双向同步 — 改任意一边，另一边自动更新

这是 Graphing 的核心引擎：你在文本编辑器里修改 <path> 的坐标，画板即时刷新；你在画板上拖拽元素，代码精准更新。xmlDiffPatch 引擎只变更真正改变了的属性，不会格式化或重排你手写的其他 SVG 代码，不会破坏 AI 生成的 <g> 层级、CSS 样式或动画脚本。

3. 精准微调 — 点击拾取、方向键移动、属性面板直接改值

比”盲改坐标数字”更直观的微调方式：点击画板上的元素即可选中，用方向键逐像素移动，右侧属性面板直接编辑 fill、stroke、rx 等关键属性。配合一键格式化，AI 生成的杂乱 SVG 瞬间整洁可读。

4. Markdown 里嵌 SVG — 写文档时直接看见图

这是 Graphing 独有的能力：你在 Markdown 文件里直接嵌入 SVG 代码块，VS Code 的预览面板就能即时渲染出图形。写技术文档画架构图、写 README 配示意图、写博客嵌流程图——全在一个窗口里完成，不需要导出图片、不需要上传 CDN、不需要切窗口看效果。

5. SVG Outline 联动 — 看一眼就知道图层结构

复杂 SVG 的元素管理不再靠猜：VS Code 侧边栏的 SVG Outline 面板会实时展示当前 SVG 的元素树——<g> 分组、<defs> 定义、各形状节点的层级关系一目了然。点击 Outline 中的任意节点，画板上的对应元素高亮选中，双向联动。

6. 内置 SVG LSP — 写 SVG 也有智能提示

Graphing 内置了一个完整的 SVG Language Server：编写 SVG 代码时，LSP 提供元素和属性的自动补全、悬浮文档提示、错误校验。你不再需要查 MDN 确认 stroke-dasharray 的语法——LSP 在你敲代码时就给出了答案。

7. 轻就是快 — 0.5 秒打开，不需要任何外部依赖

没有 Electron 包袱、不需要网络、不依赖在线服务：Graphing 就是你 VS Code 里的一个扩展，安装后即装即用。AI 输出 SVG 的频率越高，这种”零延迟打开”的体验就越重要。

技术实现

Graphing 基于 SVG Edit（@svgedit/svgcanvas），TypeScript 重写，核心引擎不到 60 个源文件：

src/
├── isomorphism/   XML解析/序列化/路径/样式/变换/差异比对
├── node/          VS Code 扩展入口、LSP 服务器、SVG 大纲
├── renderer/      可视画板、工具栏、样式面板、各绘图模式
└── types/         类型声明

渲染管线：SVG text → 系统字体测量 → Canvas 精确布局 → WebView 画板。中英文混排、变换矩阵、渐变填充在可视模式下精准呈现。

前往 open-vsx.org 安装（注意：因微软VSCode市场访问限流，本插件不会发布到VSCode官方市场）。

需要 VS Code ≥ 1.82.0。也可以从 GitHub Releases 下载 .vsix 文件手动安装。

使用方式： 1. 打开 AI 生成的 SVG：右键 .svg 文件 → Graphing: Open SVG Editor 2. 新建空白 SVG：Ctrl+Shift+P → Graphing: New File with SVG Editor 3. 编辑过程中：使用画板工具栏拖拽，或直接在文本编辑器修改代码——双向同步