Dot之美

作为一名开发人员，我的理想世界是一个逻辑化的、简单的、有序的世界，而画图，则是这个世界上空的一朵乌云，因为

它不简单：

• 会有十几种方框，几十种箭头，有阴影的，没阴影的，有3D效果的，有圆角的，我的选择障碍综合征每当这时就会发作。
• 它不能以简单的文本方式表现，没法通过版本管理工具跟踪每一次修改。
• 它的维护成本很高，挪动已经作好的布局，添加一个新的元素都非常耗时。

它不逻辑化：

• 在于其中很大一部分工作是让它变的好看，譬如对齐，譬如使用合适的箭头…

在寻觅了很久后，我发现了dot,  它是使用纯文本描述图形的语言，它本身是一种语言规范，不同的实现，譬如Graphviz ， Grappa等。

让我们从一个工作流开始，学习如何安装dot，定义dot language,  生成gif格式的图。

头脑中工作流

这是我头脑中的工作流（我用BrainCapturer工具截的图）我试图去构建的用于描述Curve文档流转的图表，其中需要包含各个角色的职责，各种状态跃迁的条件等。

安装dot

像其它好用的工具一样，dot对于linux和mac非常友好。

linux aptitude包管理器

sudo apt-get install graphviz

mac port包管理器：

sudo port install graphviz

Windows用户可以从http://www.graphviz.org/Download..php下载并安装

安装成功后，运行

dot -v

应当可以看到

dot – graphviz version 2.22.0 (20090304.0156)
Activated plugin library: libgvplugin_pango.6.dylib
Using textlayout: textlayout:cairo

用dot描述上述工作流

digraph G {
Start                   [label="Start", shape="box"]
Draft_In_Sandbox        [label="Draft", shape="box"]
Ready_For_Publish       [label="Ready For Publish Curve", shape="box"]
Approved                [label= "Approved Curve", shape="box"]
Published_Curve         [label="Published Curve", shape="box"]
Deleted_Curve           [label="Deleted Curve", shape="box"]
Inactive_Curve          [label="Inactive Curve", shape="box"]

Start -> Draft_In_Sandbox                      [label = "Create the curve"]
Draft_In_Sandbox -> Draft_In_Sandbox           [label = "Testing the curve"]
Draft_In_Sandbox -> Ready_For_Publish          [label="Mark as Ready For Publish by owner"]
Ready_For_Publish -> Ready_For_Publish [label="Testing the curve by risk admin"]
Ready_For_Publish -> Approved    [label = "Mark as Approved by risk admin" ]
Approved -> Published_Curve      [label="Published by IT admin"]
Published_Curve -> Deleted_Curve [label="Deleted by IT admin"]
Deleted_Curve -> Published_Curve [label="Restored by IT admin"]
Inactive_Curve -> Published_Curve[label="Reactivate the curve"]
Published_Curve -> Inactive_Curve[label="Activate the curve."]
Published_Curve -> Draft_In_Sandbox[label="Edit/Rename the curve."]
}

这段代码已经自解释了。我就不再浪费口舌了。dot 的语法很简单，对大脑也非常友好，譬如

• 不需要任何关键字，使用alphanumberic即可定义节点
• 有向连接 nodeA -> nodeB
• 无向连接 nodeA — nodeB

生成图像文件

1. 创建文件workflow.dot
2. 拷贝上述内容至workflow.dot
3. 在命令行中运行 dot -Tgif workflow.dot -o workflow.gif

dot支持不同的输出格式，-T 选项用于切换不同的输出格式。

至此，我们便完成了一张图的从最初的构想到最终实现的过程。

dot之美在于简单，在于它定义了一种DSL, 让我可以专注在定义工作流本身。在于定义状态的变迁，维护这张图片，跟踪这张图片都变得简单, 甚至创建图片都变成了一种令我非常愉快的工作, 这种Geek的工作方式是我的至爱。

最后，大家可以去dot画廊看看专家们创建的图片：

• http://www.graphviz.org/Gallery.php
• http://www.flickr.com/photos/kentbye/sets/72157601523153827/