1. Graphviz
程序员画流程图利器
1.1. mac 安装 命令行工具
$ brew install graphviz
1.2. Atom 插件插件
- graphviz-preview dot 预览插件,
ctrl-d
- language-dot dot 编辑插件
- graphviz-preview-plus dot 预览插件,
ctrl-shift-v
后缀用 .dot
1.3. mac 安装 GUI 工具
只能查看,不能编辑
安装 macports
source ~/.bash_profile
sudo port install graphviz-gui
1.4. Web 显示
Graphviz 文件转成 svg 文件,再显示
- GraphvizOnline 在线显示 Graphviz
1.5. 语法
1.5.1. 3种元素
- 图
graph
- 顶点
node
- 边
edge
graph 分类
- graph 无向图,线上无箭头
- digraph 有向图,线上无箭头
- subgraph 子图
属性
参考 Node, Edge and Graph Attributes
- shap 形状,Node Shapes eg:box,record
- rankdir 箭头方向,eg:LR、TB
- style 样式,eg:filled
- color 颜色
- fillcolor
- image
- label
1.5.2. other
- 子图的名称必须以
cluster
开头
1.5.3. 布局
- dot 默认布局方式,主要用于有向图
- neato 基于spring-model(又称force-based)算法
- twopi 径向布局
- circo 圆环布局
- fdp 用于无向图