依旧代码镇顶。

这次的主角是简陋小工具——Lazac File3D。

虽然界面很丑，但是个人觉得还算实用，目前只是测试阶段，后面有时间了再改进下用户体验重新写界面好了。

为了尽量避免引用第三方库，达到自闭包，jQuery和Bootstrap都没有使用。当然也没测内存泄漏了；作为一个瞬时使用小工具，没那么多讲究～

这个工具在可视化graph的时候，引用了刚写完的简易库Petal Braench (github.com | petal | Braench)。它就是把一个图拍扁了，算好对应的tree（比如A->B->C->A变为A->B->C, C->A），用div的形式去表现一个图，省去了svg或者canvas计算坐标的繁杂。顺便吐槽下现在的图可视化特别喜欢用force layout，对我的手机浏览器真的是个考验。Braench也是希望图的可视化不但能在桌面浏览器上显示，还可以在手机浏览器上有效显示。好，Braench插播结束。

回到Lazac File3D。说到这个工具诞生的起因，其实很简单：最近在编译mariadb，可是mariadb的编译脚本是按照CMake的标准写的，我没有在Windows编译的打算，只是想试试编译个Android平台的精简版，还是得比较清楚各个模块如何组装；而CMake编译后的log虽然可以很清楚地知道每一条指令历史，可是它们是平面的，我一下子看不清编译mysqld需要哪些模块先编译好，所以就希望Build Log的行与行之间要是有个关系mapping倒也不错。何况这个工具写好了，还可以分析其他文件，比如静态分析源代码，分析运行Log得到函数调用图，这也是Lazac的初衷。现在找个好用的代码阅读工具真难，IDA Pro算是不错，可惜是逆向工具；Windows上有个比较popular的，但貌似我不太喜欢。还是自己动手丰衣足食吧。

下面是这个工具的使用。先选一个文本文件，它会按tokenize函数（初始化LazacFile3D的时候config对象里有custom.tokenize就好，不指定就默认）分割文本成数组，默认当然是按'\n'分。后面只要包含指定文本的每个元素（这里是每行）都会被搜索到，并且会添加一个block显示在最下方。每次搜索的block都会留在界面上，不使用了可以Close掉。内容太多还可以使用Show/Hide去控制下。在这些blocks间勾选一些元素，然后再找到要链接到的那个元素；"-> A"是将勾选元素指向这个元素；"A ->"是将这个元素指向勾选元素；"A x>"和勾选元素没关系，是清除这个元素所指向的所有元素。因为Braench可视化图的时候是按照先画一个元素的div，再将指向元素的div作为children添加上去。所以绝个例子来说，遇到编译Log，就是先勾选"#1 gcc -c t1.o"和"#2 gcc -c t2.o"，再在"#3 gcc -o exe exe.c t1.o t2.o"这个元素上点击"A ->"，表示编译生成文件的联系(exe需要t1.o和t2.o)。准备好元素间的关系，点击搜索框上面的Save，得到一大堆数字文本；这个文本第一行是文本总行数；以后每行第一个数字是行号（从0开始），后面跟着的数字是这行指向的其他行。按刚才的例子就有：

3

3;1;2

最后点击Visualize，就会看见标有"#3 gcc -o exe exe.c t1.o t2.o"的方框里有两个方框，分别标着"#1 gcc -c t1.o"和"#2 gcc -c t2.o"。

这个工具的代码很简单，就是用一个数组去存储元素，另一个数组存储组每个元素指向其他元素的index集合。可视化的时候会去除没有指向到的元素。比如刚才的例子如果有第4行，那么这行在可视化里就不会画出。写好工具，可以去玩其他东西了。

J.Y.Liu

2015.09.22