SQLFlow frontend 最主要依赖的接口是 /sqlflow/generation/sqlflow/graph。从这个接口获得数据后，分析其中的 graph 和 sqlflow 字段，绘制对应的图形，并进行相关的交互。在 SQLFlow frontend 中点击不同的按钮，或者在 setting 区域做不同的设置，实质上是给这个接口传递了不同的参数，从而获得了对应的图形结果。
在代码编辑框输入 sql 代码，点击 dbvendor 菜单选择数据库，点击 visualize 按钮或者 visualize join 按钮，可以绘制对应的图像。
点击 visualize 按钮实际上是请求了graph 接口，并传入了下面的参数：
| 参数 | 值 |
|---|---|
| sqltext | 代码编辑框中的代码，例如 select * from a; |
| dbvendor | dbvendor 菜单选择的数据库，例如 dbvoracle |
| showRelationType | fdd |
| ignoreFunction | true |
点击 visualize join 按钮实际上是请求了graph 接口，并传入了下面的参数：
| 参数 | 值 |
|---|---|
| sqltext | 代码编辑框中的代码，例如 select * from a; |
| dbvendor | dbvendor 菜单选择的数据库，例如 dbvoracle |
| showRelationType | join |
| ignoreFunction | true |
点击 dbvendor 菜单，选择数据库后，点击 sample sql 可以在代码编辑框中获得这个 dbvendor 对应的示例 sql，随后可以 visualize。
鼠标在 sqltext 上悬停，可以在图形中找到对应的图形。
鼠标在图形上悬停，可以在 sqltext 中找到对应的代码。
鼠标悬停在面板边缘悬停，如果有高亮效果，则可以拖动跳转宽度。
点击图形某个 column，可以固定上下游关系。长按鼠标左键，可以移动画布。
设置当前graph 接口接口的参数，来获得不同的分析结果：
| 参数 | 值 |
|---|---|
| showRelationType | 如果 direct dataflow = true，为 fdd； 如果 direct dataflow = true 且 indirect dataflow=true ，为 fdd,fddi,fdr,frd； |
| dataflowOfAggregateFunction | direct 或者 indirect，取决于 dataflowOfAggregateFunction |
| ignoreRecordSet | false 或者 true，取决于 show intermediate recordset |
| ignoreFunction | false 或者 true，取决于 show function |
| showConstantTable | false 或者 true，取决于 show constant |
| showTransform | false 或者 true，取决于 show transform |
切换不同的选项，观察网络请求，可以看到接口参数的变化：
显示 sql 的 schema 结构。在 schema、database、table 上点击鼠标右键，可以 visualize。
global、summay、ignore record 表示的是graph 接口返回的的三个模式（json 中的 mode 字段），分别用三种不同的颜色表示。
ANALYTICS、ENTITY 前的图标为绿色，表示 mode 为 global；DATAMART 前为黑色，表示 mode 为 summary；其他节点前为灰色，表示当前节点还没有被 visualize。
导出处理结果为 json 或者 png:
graph 接口： post /sqlflow/generation/sqlflow/graph