学会使用Graphviz绘制流程图

# 一、初识Graphviz

# 1.1 简介

GraphViz是一个开源的图像可视化的软件，是贝尔实验室开发的一个开源的工具包，它使用一个特定的DSL(领域特定语言): dot作为脚本语言，然后使用布局引擎来解析此脚本，并完成自动布局。graphviz提供丰富的导出格式，如常用的图片格式，SVG，PDF格式等

# 1.2 环境搭建

结合sublime Text插件实时编译预览

使用shift+command+p，输入搜索选中Package Control: Install Package,然后输入GraphViz,然后安装GraphVizPreview即可，安装完成后，只要全选中代码，然后按shift+command+g就可以预览了。

• 其实也可以直接用brew安装GraphViz,但是每次要敲命令行，太麻烦了

mac下执行

brew install graphviz

终端编译代码 dot test.dot -T png -o test.png

# 二、使用

Graphviz 支持两类图：无向图（graph,用“ - - ”表示节点之间）和 有向图（digraph,用“ ->” 表示节点之间）。graphviz包含3中元素，图，顶点和边。每个元素都可以具有各自的属性，用来定义字体，样式，颜色，形状等

GraphViz中包含多种布局

• dot 默认布局，用于有向图
• neato 基于spring-model算法(force-based)
• twopo 径向布局
• circo 圆形布局
• fdp 用于无向图

# 2.1 第一个graphviz图

语法介绍 http://graphs.grevian.org/reference

digraph abc{
  a;
  b;
  c;
  d;
 
  a -> b;
  b -> d;
  c -> d;
}

定义顶点和边的样式

digraph abc{
  node [shape="record"];
  edge [style="dashed"];
  a;
  b;
  c;
  d;
 
  a -> b;
  b -> d;
  c -> d;
}

进一步修改顶点和边样式,将顶点a的颜色改为淡绿色，并将c到d的边改为红色

digraph abc{
  node [shape="record"];
  edge [style="dashed"];
 
  a [style="filled&