创建第一张图
根据手头的内容选择开始方式。
详细步骤与注意事项
从数据创建
- 打开“从数据创建”或“加载”。
- 粘贴文本并检查预览。
- 点击“应用到图”将结果加载到画布。
选择示例
- 打开“选择示例”。
- 选择图形,如有参数可调整顶点数等。
- 应用到画布,再编辑顶点和边。
自己绘制
- 点击“自己绘制”进入顶点模式。
- 点击空白处放置顶点。
- 切换到边模式,依次选择两个顶点。
看看输入如何变成图
设为无向、1-indexed,然后复制输入例 → 导入 → 应用到图。
用边列表绘制图形
可复制的输入
4 4
1 2
2 3
2 4
3 4绘图结果

详细步骤与注意事项
在“设置”中选择“无向”和“1-indexed”,将完整代码块粘贴到“加载”,再点击“应用到图”。图示表示连接关系,实际位置取决于所选布局。
在“格式”中选择“带顶点数和边数的边列表”。第一行 4 4 表示顶点数和边数,后续每行表示两个顶点之间的连接。
4 个顶点、4 条边:1–2、2–3、2–4 和 3–4。
将邻接矩阵转换为图形
可复制的输入
0 1 1
1 0 1
1 1 0绘图结果

详细步骤与注意事项
在“设置”中选择“无向”和“1-indexed”,将完整代码块粘贴到“加载”,再点击“应用到图”。图示表示连接关系,实际位置取决于所选布局。
选择邻接矩阵格式。行和列对应顶点,1 表示有边,0 表示无边。此对称矩阵表示无向图。
3 个顶点、3 条边组成三角形,每对顶点之间都有连接。
可视化带权树
可复制的输入
4 3
1 2 5
1 3 2
3 4 7绘图结果

详细步骤与注意事项
在“设置”中选择“无向”和“1-indexed”,将完整代码块粘贴到“加载”,再点击“应用到图”。图示表示连接关系,实际位置取决于所选布局。
在“格式”中选择“带顶点数和边数的边列表”。第三列为边权。导入后选择树布局,可以更清楚地查看层次关系。
4 个顶点、3 条边的树:1–2 的权重为 5,1–3 为 2,3–4 为 7。
加载文本或文件
替换当前图之前,可以检查格式和顶点数。
详细步骤与注意事项
打开“加载”
粘贴文本,或点击“打开文件”选择文本文件或 Graph Editor JSON 文档。
检查格式和预览
编辑器会自动识别格式。若存在多种解释,请在“格式”中选择。顶点编号从 0 还是 1 开始也会自动推断,因此请检查顶点标签。
点击“应用到图”
预览结果会替换当前图。如有警告,请先检查内容再应用。使用撤销可以恢复加载前的图。
支持的输入格式
- 带 N M 首行的边列表
4 4 1 2 2 3 2 4 3 4- 边对列表(无首行)
1 2 2 3- 树的边列表(N 之后 N−1 条边)
4 1 2 1 3 3 4- 父数组
4 1 1 3- 带权父数组
4 1 5 1 3 3 2- 邻接表
1: 2 3 2: 4- 邻接矩阵
0 1 1 1 0 1 1 1 0- Graph Editor JSON(空图)
{ "version": 1, "nodes": [], "edges": [], "settings": {} }
放置顶点,再用边连接
通过工具栏的三种模式完成不同操作。
详细步骤与注意事项
用“顶点”添加顶点
点击或轻触画布空白处添加顶点。按 N 可切换到此模式。
用“边”连接两个顶点
依次选择起点和终点。有向图的箭头与此顺序一致。点击空白处或按 Esc 可取消正在创建的边。
用“选择”调整位置
拖动顶点来移动,拖动边来弯曲。选择顶点或边后,可通过显示的操作栏编辑或删除。
- 在选择模式下按住 Shift 拖动,可以框选多个元素。“选择”旁的箭头可切换框选目标:全部、仅顶点或仅边。
- Ctrl(Mac 为 ⌘)+ Shift + 拖动仅选择顶点;Ctrl(Mac 为 ⌘)+ Alt + 拖动仅选择边。
- 双击元素,或选中后按 Enter,可以编辑标签或权重。右键也能打开编辑菜单。
修改颜色、标签和图设置
突出图中的一部分,并调整编号与箭头。
详细步骤与注意事项
- 选择顶点或边后,点击操作栏中的颜色即可修改,也支持多选。按 C 可依次切换所选元素的颜色。
- “设置”可切换有向或无向、带权或无权,以及 0-indexed 或 1-indexed 编号。还可以修改箭头大小和顶点标签显示。
- 选择有向边后可以反转方向。“设置”中的“反转全部边”可修改整张图的方向。
- 手动弯曲边后,可用“恢复自动布线”还原自动路径。右键菜单也提供“向左弯曲”和“向右弯曲”。
- 在设置中开启“拖动吸附到网格”,便于对齐顶点位置。
试用示例并选择布局
保持连接关系,改变顶点的排列方式。
详细步骤与注意事项
在“加载”中点击“使用示例”,可以选择树、环、网格等图形。可以按名称搜索或按类别筛选。有参数的示例可以先调整顶点数等,再应用到画布。
打开“布局”(L)可以重新排列图形。不确定时可先试“自动布局”,或用“圆形”和“网格”比较简单排列。
- 树或森林适合“树”布局,有向无环图适合“DAG”,二分图适合“二分图”。不符合条件的布局会被禁用,并显示原因。
- “BFS 分层”按起点距离排列,“放射”把距离层排成圆环。先选择一个顶点,可将其作为起点;“树”布局会将其作为根。
- 有向图的“SCC”按强连通分量分组。还可选择“直线”“同心圆”和“消除重叠”。
- 开启“错开重叠的边”后,编辑器会尽量自动弯曲边来避开顶点。若仍有重叠,可移动顶点或手动弯曲边。
按用途选择导出格式
继续编辑时保存 JSON,分享图形时使用 PNG。
详细步骤与注意事项
用 JSON 保存以便再编辑
在“导出”的格式中选择“JSON”,保存 .json 文件。它保留顶点、边、标签、位置、颜色、弯曲和图设置。再次编辑时从“加载”打开。
用 PNG 分享图像
打开“PNG”,选择整张图或当前视图,设置背景和留白。整张图可以选择长边尺寸、当前缩放或固定画布。检查预览后保存或复制。
用文本导出连接数据
在“导出”中选择边列表、邻接表或邻接矩阵。这些格式不包含位置、颜色或手动弯曲,自定义标签可能变为连续编号。若格式无法表示某些边或权重,请选择 JSON 或兼容的边列表。
用 TikZ 将图形加入 TeX 文档
选择“TikZ (TeX)”,复制代码或保存 .tex 文件。所需宏包列在输出开头的注释中。中文等 Unicode 标签需要支持相应字符的引擎和字体。
使用键盘操作
未在输入框中输入时,可用这些快捷键控制画布。
- 选择 / 顶点 / 边模式
- VNE
- 清除选择或取消创建边
- Esc
- 删除所选元素
- DeleteBackspace
- 撤销
- Ctrl+Z⌘Z
- 重做
- Ctrl+Shift+Z⌘⇧ZCtrl+Y
- 全选
- Ctrl+A⌘A
- 复制 / 剪切 / 粘贴所选内容
- Ctrl / ⌘ + C / X / V
- 编辑标签或权重
- Enter
- 切换所选颜色
- C
- 微移所选顶点
- ← ↑ → ↓
- 以较大步长移动所选顶点
- Shift + ← ↑ → ↓
- 完整显示图
- Shift+1
- 恢复 100% 缩放
- Ctrl+0⌘0
- 布局 / 设置 / 快捷键列表
- L,?
详细步骤与注意事项
Windows 和 Linux 使用 Ctrl,Mac 使用 ⌘。
移动视图并在手机上编辑
移动显示区域,同时保持顶点位置不变。
详细步骤与注意事项
- 拖动画布空白处可平移视图。手机上可用双指缩放并移动视图。
- 在“顶点”模式轻触空白处添加顶点;在“边”模式依次轻触两个顶点以连接。
- 在“选择”模式轻触顶点或边,使用操作栏修改颜色、编辑标签或删除。也可拖动顶点移动,拖动边弯曲。
- 如果图移出屏幕,使用“适应视图”找回。使用键盘时,Shift+1 可完整显示图。
遇到问题时
输入、保存或显示异常时,可检查以下内容。
为什么加载结果与预期不同?
请明确选择格式,检查首行的顶点数和边数、每行列数,以及编号从 0 还是 1 开始。确认警告和预览后再应用。有向或无向可在“设置”中修改。
用边列表绘制图形图保存在哪里?
图保存在当前浏览器的本地存储中,图内容不会发送到服务器,也不会同步到其他浏览器或设备。清除此站点的数据会删除已保存的图,因此请将重要内容导出为 JSON 备份。
自动保存失败或与另一个标签页冲突怎么办?
当前工作仍保留在屏幕上。请先选择“保存当前的图”备份。保存失败时可重试;发生冲突时,确认内容后再选择“使用另一个标签页的图”。无法自动保存时,请持续保存 JSON 文件。
图的大小有上限吗?
最多 1,000 个顶点、5,000 条边,每个标签等文本字段最多 256 个字符。文本输入最多 1,000,000 个字符,JSON 最多 2,000,000 个字符。大型图的部分布局会禁用,自动布线和消除重叠可能仍留有需要手动调整的部分。
无法复制图像或文本怎么办?
浏览器剪贴板权限等原因可能阻止复制。请改为保存 PNG 或将文本下载为文件。如果导出格式无法表示当前图,请改用 JSON 等兼容格式。
看不到图怎么办?
如果图移出了屏幕,请使图适应视图。如果出现显示错误,请保存 JSON 备份后重试。示例加载失败时也可以重试,或返回粘贴继续操作。
需要付费或注册吗?
免费且无需注册。源代码公开在 GitHub。