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

最新推荐文章于 2024-08-26 19:31:26 发布

youwen21

最新推荐文章于 2024-08-26 19:31:26 发布

阅读量1.2w

点赞数 6

分类专栏： GraphViz 文章标签： GraphViz graph DOT 有向图

本文链接：https://blog.csdn.net/youwen21/article/details/98896703

版权

GraphViz 专栏收录该内容

14 篇文章 14 订阅

订阅专栏

GraphViz 图形工具使用教程综合篇

GraphViz简述
GraphViz基本元素
- 生成一个有向图
- node属性、edit属性和subgraph的使用
如何安装GraphViz
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="<f1> 第一列|{<f21> 第二列-行| <f22> 第二列二行}|<f3> 第三列"];

	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="{{<sa01> 001 | <sa02> 002}|<sa1> sa1| <sa2> 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便可以使用。
在这里插入图片描述