Release 了一个新的 VizGraph

2019 第一篇!

也是去年年底的时候心血来潮写的这个小东西:

中间断断续续往里面补了一些功能,修修 bug 什么的,然后就很久没有再管过了。

虽说一开始想要的本来不是个能写 GraphViz 的文本编辑器,结果写到最后还是写成了个文本编辑器。

话说 vscode 里面的 GraphViz 插件其实也挺不错的,

结果我自己平时还是觉得用这个更顺手哈哈


有天忘了在找什么的时候路过发现这个叫 CS Academy 的 OJ 上提供了一个简易的图编辑工具:

左边是文字形式记录的图关系,右边呢可以通过点击和拖动等等直观对图进行编辑,然后修改一边另外一边也会跟着同步更新。

刚看到的时候觉得惊了!这不就是我最早想要的玩意嘛!

然后果断 F12 开始研究起来。


嗯,这个网站本身应该是用某种框架做的,所有的动作都被包含在一个大概 10 万行左右的超大 js 文件里面。虽然从这里面直接扒出来基本上应该是不太可能的,不过看了下几个位置的 click、鼠标拖动事件等等差不多也可以知道实现的原理了,又在 d3.js 里找到个类似的东西,照着改改很快也山寨了一个功能差不多的出来。

然后我就发现更纠结了。

最初的想法是通过右边的图形界面操作生成左边的中间结果,然后手动细调之后再进一步生成 GraphViz 的 dot 代码,最后通过 GraphViz 生成 svg 的图。

结果等到这个 Graph Editor 写出来之后,却发现这样瞎搞还不如从一开始就老老实实直接写 dot 代码来的顺畅。

这大概就是花了好大的精力实现了最初的想法之后发现自己走了歪路的感觉了。


说起来这算是我第一个真正走到了实用阶段还一直在继续改的脑洞了,歪过一次之后现在决定这玩意还是老老实实就写成个编辑器吧。

目前是加了个多模版的启动页,然后用 PPT 花几分钟做了个图标。

对!你没看错,PPT!

一直没有真正好好学过前端相关的东西,所有这些都是有想法之后现场在网上找的教程和资料。

等以后有空了再改大概得想办法照顾一下这个界面的美观性(目前负分……),然后把逻辑部分的代码也好好重构一下。然后虽说现在把 Ace Editor 的自动补全功能打开了,但是这里面似乎不自带补全规则,之后还得看看怎么加。再然后还想把 GraphViz 语法的文档功能加进去,我自己经常用的时候还得开 GraphViz 的网站查有的东西怎么写,生产力啊生产力!


Keep coding!

2019 大家继续加油呀!

0%