超容易上手 - 用代码写简单流程图

无意中，看到一个用dot语言写简单流程图，感觉有趣，于是略微了解了下。 复杂的我觉得还是别的工具xmind之类的😂。

超容易操作和理解。

vscode，安装两个插件Graphviz (dot) language support for Visual Studio Code和Graphviz Preview。

新建文件demo.dot，输入以下内容

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

Cmd+shift+p调出面饭，输入graph preview，就可以看到流程图了

什么是DOT语言

• DOT语言是一种文本图形描述语言。
• 它提供了一种简单的描述图形的方法，并且可以为人类和计算机程序所理解。
• DOT语言文件通常是具有.gv或是.dot的文件扩展名。

主要分为有向图和无向图

就是符号的区别：

有向图就是上面的digraph，里面是->。 无向图就是单纯的graph，里面是--

加点样式

统一的样式，在上面直接添加即可。 单个节点的样式，也直接定义。 线的颜色，直接中括号写。 线上文字，也是直接中括号写

digraph{
  /* 统一定义 */
  // rankdir = LR
  fontsize = 10
  label = "图的属性设置"
  // 结点的设置
  node [shape=circle,fontsize=10]
  // 线的设置
  edge [arrowsize= .5]
  /* 单个节点样式 */
  b [style=filled, fillcolor=".7 .3 1.0", color=green, fontsize=10]
  // 线条颜色
  a->b->c->d [color=blue];
  // 线上文字
  b->d[label=备注,fontsize=10];
  c->d;
}

其他资料

• dot的学习笔记
  
• 维基百科的dot解释
  
• 官方文档