在线画图网站Graph Editor的使用

网站链接

链接

网站介绍

CS Academy是一个在线的算法学习和竞赛的网站，打开网站左侧导航栏中的App目录下有一个可以在线画图的应用Graph Editor，用来画图（有向、无向）非常好用。

网站的界面如下：
在这里插入图片描述
左侧为图的数据信息，中间为生成图片，右侧为图的配置信息。

左侧信息栏中，Node Count为节点数量，Graph Data则填写图的信息。可以通过上方Undirected/Directed调整为无向/有向图。

Obj
X
Y
A
B
C

在这里插入图片描述
点击中间栏0-index、1-index可分别为节点先后从0、1开始编号。Custom Labels允许节点显示左侧信息栏自定义的标签。

创建边
创建边可以通过u v label或u label v创建一条u到v之间的（若为），标注为label的边。有向图模式下，一个菱形继承的图例为：

Obj
X
Y
A
B
C
X Obj extend  //或写成X extend Obj
Y Obj extend
A X extend
A Y extend
B Y extend
B X extend
C A extend
C B extend

在这里插入图片描述

在右侧边栏中，有很多mode可供我们使用，能够方便地调整图例信息，使画出的图更加美观。

Force mode：在该模式下，节点之间都有“引力”作用在彼此之间，使得整个图都尽可能地在图像的中心区域。可以通过拖动节点改变它们的相对位置（其它节点也会跟着一起移动）。
Draw mode：在此模式下，可以通过鼠标点击调整节点位置：

也可以单击画布任意一处创建新节点，并且可以一次点击两个节点创建它们之间的边。

如果不小心点了某个点而不想要边，再次点击该点即可取消边的创建。
Edit mode：可以点击边/节点，修改它们的label属性，按回车键确认。
Delete Mode：通过点击边/节点可以对其进行删除。
Config：配置节点与边的样式。
- Node radius：节点半径
- Edge ideal length：边的（理想）长度
- Node background：节点背景色
- Node color：节点颜色
- Edge color：边的颜色
- Run Command：共有三条命令：
  1. Fix all nodes：固定所有节点
  2. Unfix all nodes：取消固定所有节点
  3. Arrange as tree：将所有节点按树形排列。