木匣子

Web/Game/Programming/Life etc.

Graphviz 与绘图语言 Dot

在博客描述数学公式可以用 LaTex 语言,那么是否有一种简单的语言可以用来描述(graph)?

是的,有一个神奇的工具叫做 Graphviz

Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。Graphviz是一个自由软件,其授权为Eclipse Public License。其Mac版本曾经获得2004年的苹果设计奖。
widipedia

Graphviz 使用一种叫做 Dot 的语言来描述图形,例如:

digraph G { hello -> world }

以上代码表示一个由 [hello] 指向 [world] 的有向图;使用 Google 的 Chart API 我们可以很方便地得到生成的图片:

digraph G{ hello -> world }

但是很遗憾的是 Google Chart Tools 的 Image Charts 全部 API 已经被申明为弃用(Deprecated)了,根据条款,这些 API 在2015年4月20日过后将彻底无法使用。这意味着到那个时候,上面这张图就看不到了。

不过没关系,一个叫 Davie King 的开发者搭建了 GViz 在线服务,可以通过嵌入脚本的方式在网页上呈现 Graphviz 图形。

<script type="text/javascript" src="http://gviz.oodavid.com/gviz.js"></script>
<script type="gviz" data-layout="dot"><![CDATA[
    digraph { hello -> world }
]]</script>

如果对以上 API 都不满意?没关系,还有更牛的东西。Github 上有一个叫 GraphvizOnline 的开源项目。它使用 emscripten 将 graphviz 移植到浏览器上。可以在这里看到演示。它可以直接在浏览器上生成最终图形,以 SVG 的方式呈现。不过因为是浏览器版本,所以运行走来可能有点慢。如果页面上的图像太多了,会非常低效。


如果你想深入学习如何编写 Dot 语言的话,官方提供了一份简明手册可供参考:dotguide.pdf

此外,你也可以下载 Graphviz 应用程序,在自己的电脑上制作图像文件。实际上我的本科毕业论文里的大部分关系图就是用它生成的。