跳转到指南正文

创建、编辑与保存图

通过图示查看导入、编辑、布局和保存的操作。

创建第一张图

根据手头的内容选择开始方式。

详细步骤与注意事项

从数据创建

  1. 打开“从数据创建”或“加载”。
  2. 粘贴文本并检查预览。
  3. 点击“应用到图”将结果加载到画布。

选择示例

  1. 打开“选择示例”。
  2. 选择图形,如有参数可调整顶点数等。
  3. 应用到画布,再编辑顶点和边。

自己绘制

  1. 点击“自己绘制”进入顶点模式。
  2. 点击空白处放置顶点。
  3. 切换到边模式,依次选择两个顶点。

看看输入如何变成图

设为无向、1-indexed,然后复制输入例 → 导入 → 应用到图。

用边列表绘制图形

可复制的输入

4 4
1 2
2 3
2 4
3 4

绘图结果

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

绘图结果

3 个顶点、3 条边组成三角形,每对顶点之间都有连接。
详细步骤与注意事项

在“设置”中选择“无向”和“1-indexed”,将完整代码块粘贴到“加载”,再点击“应用到图”。图示表示连接关系,实际位置取决于所选布局。

选择邻接矩阵格式。行和列对应顶点,1 表示有边,0 表示无边。此对称矩阵表示无向图。

3 个顶点、3 条边组成三角形,每对顶点之间都有连接。

可视化带权树

可复制的输入

4 3
1 2 5
1 3 2
3 4 7

绘图结果

4 个顶点、3 条边的树:1–2 的权重为 5,1–3 为 2,3–4 为 7。
详细步骤与注意事项

在“设置”中选择“无向”和“1-indexed”,将完整代码块粘贴到“加载”,再点击“应用到图”。图示表示连接关系,实际位置取决于所选布局。

在“格式”中选择“带顶点数和边数的边列表”。第三列为边权。导入后选择树布局,可以更清楚地查看层次关系。

4 个顶点、3 条边的树:1–2 的权重为 5,1–3 为 2,3–4 为 7。

加载文本或文件

替换当前图之前,可以检查格式和顶点数。

粘贴输入
检查预览
应用到图
详细步骤与注意事项
  1. 打开“加载”

    粘贴文本,或点击“打开文件”选择文本文件或 Graph Editor JSON 文档。

  2. 检查格式和预览

    编辑器会自动识别格式。若存在多种解释,请在“格式”中选择。顶点编号从 0 还是 1 开始也会自动推断,因此请检查顶点标签。

  3. 点击“应用到图”

    预览结果会替换当前图。如有警告,请先检查内容再应用。使用撤销可以恢复加载前的图。

支持的输入格式
带 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": {}
}

放置顶点,再用边连接

通过工具栏的三种模式完成不同操作。

在顶点模式中放置点
在边模式中选择两个点
在选择模式中拖动
详细步骤与注意事项
  1. 用“顶点”添加顶点

    点击或轻触画布空白处添加顶点。按 N 可切换到此模式。

  2. 用“边”连接两个顶点

    依次选择起点和终点。有向图的箭头与此顺序一致。点击空白处或按 Esc 可取消正在创建的边。

  3. 用“选择”调整位置

    拖动顶点来移动,拖动边来弯曲。选择顶点或边后,可通过显示的操作栏编辑或删除。

  • 在选择模式下按住 Shift 拖动,可以框选多个元素。“选择”旁的箭头可切换框选目标:全部、仅顶点或仅边。
  • Ctrl(Mac 为 ⌘)+ Shift + 拖动仅选择顶点;Ctrl(Mac 为 ⌘)+ Alt + 拖动仅选择边。
  • 双击元素,或选中后按 Enter,可以编辑标签或权重。右键也能打开编辑菜单。

修改颜色、标签和图设置

突出图中的一部分,并调整编号与箭头。

更改所选顶点的颜色
双击编辑标签
在设置中切换为有向图
详细步骤与注意事项
  • 选择顶点或边后,点击操作栏中的颜色即可修改,也支持多选。按 C 可依次切换所选元素的颜色。
  • “设置”可切换有向或无向、带权或无权,以及 0-indexed 或 1-indexed 编号。还可以修改箭头大小和顶点标签显示。
  • 选择有向边后可以反转方向。“设置”中的“反转全部边”可修改整张图的方向。
  • 手动弯曲边后,可用“恢复自动布线”还原自动路径。右键菜单也提供“向左弯曲”和“向右弯曲”。
  • 在设置中开启“拖动吸附到网格”,便于对齐顶点位置。

试用示例并选择布局

保持连接关系,改变顶点的排列方式。

选择示例
选择布局
保持连接关系重新排列
详细步骤与注意事项

在“加载”中点击“使用示例”,可以选择树、环、网格等图形。可以按名称搜索或按类别筛选。有参数的示例可以先调整顶点数等,再应用到画布。

打开“布局”(L)可以重新排列图形。不确定时可先试“自动布局”,或用“圆形”和“网格”比较简单排列。

  • 树或森林适合“树”布局,有向无环图适合“DAG”,二分图适合“二分图”。不符合条件的布局会被禁用,并显示原因。
  • “BFS 分层”按起点距离排列,“放射”把距离层排成圆环。先选择一个顶点,可将其作为起点;“树”布局会将其作为根。
  • 有向图的“SCC”按强连通分量分组。还可选择“直线”“同心圆”和“消除重叠”。
  • 开启“错开重叠的边”后,编辑器会尽量自动弯曲边来避开顶点。若仍有重叠,可移动顶点或手动弯曲边。

按用途选择导出格式

继续编辑时保存 JSON,分享图形时使用 PNG。

JSON:稍后编辑
PNG:分享图像
文本:连接数据
TikZ:插入 TeX 文档
详细步骤与注意事项
  1. 用 JSON 保存以便再编辑

    在“导出”的格式中选择“JSON”,保存 .json 文件。它保留顶点、边、标签、位置、颜色、弯曲和图设置。再次编辑时从“加载”打开。

  2. 用 PNG 分享图像

    打开“PNG”,选择整张图或当前视图,设置背景和留白。整张图可以选择长边尺寸、当前缩放或固定画布。检查预览后保存或复制。

  3. 用文本导出连接数据

    在“导出”中选择边列表、邻接表或邻接矩阵。这些格式不包含位置、颜色或手动弯曲,自定义标签可能变为连续编号。若格式无法表示某些边或权重,请选择 JSON 或兼容的边列表。

  4. 用 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。