画流程图工具 Graphviz 教程 - 简介

更新日期: 2018-10-04 阅读次数: 5625 分类: graphviz

Graphviz 是贝尔实验室开发的一套“所想即所得”的画流程图工具。

优势

可以用纯文本编辑

  • 适合 git 管理
  • 可以 git 管理之后,协作编辑就方便了

基本概念

Graphviz 分为两种类型的图

  • Graph 没有方向的图,元素之间只有连线,没有箭头方向
  • Digraph 元素之间,用带方向的箭头连接。Direction Graph

Graph 无向图

graph pic1 {
        a -- b;
        b -- c;
}

画流程图工具 Graphviz,简介及基础教程

Digraph 有向图

digraph pic1 {
        a -> b;
        b -> c;
}

画流程图工具 Graphviz,简介及基础教程

Ubuntu 上安装 graphviz

sudo apt-get install graphviz

查看是否安装成功

$ dot -v

dot - graphviz version 2.38.0 (20140413.2041)
libdir = "/usr/lib/graphviz"
Activated plugin library: libgvplugin_dot_layout.so.6
Using layout: dot:dot_layout
Activated plugin library: libgvplugin_core.so.6
Using render: dot:core
Using device: dot:dot:core
The plugin configuration file:
        /usr/lib/graphviz/config6a
                was successfully loaded.
    render      :  cairo dot fig gd map pic pov ps svg tk vml vrml xdot
    layout      :  circo dot fdp neato nop nop1 nop2 osage patchwork sfdp twopi
    textlayout  :  textlayout
    device      :  canon cmap cmapx cmapx_np dot eps fig gd gd2 gif gv imap imap_np ismap jpe jpeg jpg pdf pic plain pla
in-ext png pov ps ps2 svg svgz tk vml vmlz vrml wbmp x11 xdot xdot1.2 xdot1.4 xlib
    loadimage   :  (lib) eps gd gd2 gif jpe jpeg jpg png ps svg xbm

上面是 ubuntu 16.04 的默认版本,18.04 的默认版本是 graphviz version 2.40.1 (20161225.0304)

graphviz 的版本

这个项目是开源的,目前放在 gitlab 上,https://gitlab.com/graphviz/graphviz

最新的版本是,2.40.1,2017年发布的。

我看一直在维护,我就放心了。

一些基本图形

节点形状

https://graphviz.gitlab.io/_pages/doc/info/shapes.html

画流程图工具 Graphviz,简介及基础教程

箭头的形状也有很大的选择空间

https://graphviz.gitlab.io/_pages/doc/info/arrows.html

画流程图工具 Graphviz,简介及基础教程

基本命令

生成图片

dot test.dot -T png -o /mnt/d/test.png

中文乱码

graph pic1 {
        百度搜索 -- 大象笔记
        Google 搜索 -- 大象笔记
}

生成的 PNG 中,中文显示为乱码。

画流程图工具 Graphviz,简介及基础教程

方块式样的乱码通常代表缺少字体,这跟 PHP 在 Ubuntu 服务器上生成图片,不指定字体是一个现象。

第一种解决方案是,生成 SVG 的结果,而不是 PNG

画流程图工具 Graphviz,简介及基础教程

然后 Google 浏览器中打开。

第二种方法是,在 dot 文件中指定字体,但是在 Windows WSL 下,我没有测试成功。我也懒得测试了,还是 SVG Chrome 这个方案最方便。

节点描述中包含空格导致被拆分成两个节点

解决方案一,使用 label

graph pic1 {
        google [label="Google 搜索"];
        百度搜索 -- 大象笔记
        google -- 大象笔记
}

画流程图工具 Graphviz,简介及基础教程

解决方案二,加双引号

graph pic1 {
        百度搜索 -- 大象笔记
        "Google 搜索" -- 大象笔记
}

三方接口及实现

https://github.com/CodeFreezr/awesome-graphviz

例如,有个 js 的实现,可以在网页上实时编辑。

VIM 中编辑的实时预览

https://www.cnblogs.com/vash0/p/7044217.html

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
查看更多节日