GraphViz 使用教程-用代码生成有向图。并介绍流程图、时序图等绘图工具

GraphViz简述

GraphViz是一个使用DOT编程语言生成有向图，无向图等图象的工具。 如果只是偶尔使用，可以在本地先定义好关系，使用web浏览器在线生成关系图。

GraphViz基本元素

• (N) node 节点
• (E) edge 线
• (G) graph 图
• (S) subgraph 子图
• © cluster subgraphs 子图群

生成一个有向图

第一步，定义关系如下：

总部->{市场营销部;财务部;人力行政部;技术部;}
技术部->{后端开发;前端开发;运维;}
市场营销部->{线下营销; 线上营销}

第二步，给定义好的关系起个名字，一个有向图定义完成

digraph 组织架构{
总部->{市场营销部;财务部;人力行政部;技术部;}
技术部->{后端开发;前端开发;运维;}
市场营销部->{线下营销; 线上营销}
}

组织架构，函数调用，物流追踪，网络追踪，审批流程等有向操作，只需要用"->"定义节点之间的关系，便可以生成其关系图。
复杂的节点关系用graphviz生成图可更直观地观察节点之间的关系。

node属性、edit属性和subgraph的使用

digraph {
	bgcolor="#EEEEEE";

	node [shape="box"];
	a[shape="ellipse", color="red"];
	b[fontcolor="#55AA55", style="dotted"];
	c[style="invis"];
	d[style="filled" color="#F9B34B"];
	stract_z[shape="record", label=" 第一列|{ 第二列-行|  第二列二行}| 第三列"];

	a->stract_z:f21;
	b->stract_z:f22[style="dotted", color="#55AA55"];
	a->c[headclip=false, arrowhead="none"];
	c->d[tailclip=false];
	d->sa:sa01;

	subgraph cluster_a {
		label="定义的一个子图";
		style="rounded"
		sa[shape="record", label="{{ 001 |  002}| sa1|  sa2}"];
		sa:sa1->sb;
		sa:sa2->sc;
	}

	{rank="same"; stract_z; d}
}

上面的例包含了常用的定义node节点内容和样式和颜色， edge样式和颜色，隐藏node，子图，PORT链接点和节点同级。
总得来说，用GraphViz画有向图只需要定义节点和节点关系即可，样式等其他无关紧要的东西并不常用，可慢慢调整。

如何安装GraphViz

GraphViz支持Linux , Windows , Mac系统平台 。如mac用brew安装

brew install graphviz

Linux , Windows 平台到官方网站找相应的安装包。

下载地址： http://www.graphviz.org/download/

GraphViz工具

GraphViz支持的命令有

• dot − filter for drawing directed graphs
• neato − filter for drawing undirected graphs
• twopi − filter for radial layouts of graphs
• circo − filter for circular layout of graphs
• fdp − filter for drawing undirected graphs
• sfdp − filter for drawing large undirected graphs
• patchwork − filter for squarified tree maps
• osage − filter for array-based layouts

本文讲述dot有向图的使用

dot命令行调用

// dot -Tpng -o a.png a.dot && open a.png
dot -Tpng -o a.png a.dot

配置Sublime支持图片预览

此安装方式，需要Sublime已经安装了Package Control

• command+shift+p打开命令面板
• package install GraphvizPreview
  安装成功后，按快捷control+shift+g 便可为当前打开的dot文件生成预览图

精通sublime的话，可以自已配置Build System的方式实现生成图片

web端在线生成图片

在线生成有向图：http://graphviz.herokuapp.com/
你也可以搭建自己专用的webgraph编辑器，git仓库地址：
https://github.com/Potherca/GraphvizWebEditor
克隆到网站目录下执行composer install便可以使用。

桌面端应用

DotEditor

其他图象化工具

• PlantUML - 时序图，用例图，类图，组件图，等程序架构图绘制工具（PlantUML可以以jar包的方式运行，底层调用GraphViz生成图象）
• D3 vs G2 vs Echarts - javascript前端绘图工具
• Neo4j - NOSQL图形数据库
• Xmind - 脑图工具

在线绘图工具

• ProcessOn https://www.processon.com/
• 百度脑图 http://naotu.baidu.com/
• draw.io https://www.draw.io/
• Zen Flowchart http://www.zenflowchart.com/
• https://www.gliffy.com/

延展阅读

GraphViz官方文档
http://www.graphviz.org/documentation/

GraphViz案例教程
https://renenyffenegger.ch/notes/tools/Graphviz/examples/index

类似Graphviz的工具是如何实现自动排版的
https://www.zhihu.com/question/32098665

程序员必知的图形工具
https://mp.weixin.qq.com/s/YaEMA9gw2Uz9IdZIl0UAHw