在学习的过程中不可避免地要绘制流程图，树状图，这些图画起来比较简单，但是要达到美观就比较麻烦了。所以在网上找了一些绘图的工具，首先是Typora的自带绘图工具。

Typora的绘图代码

mermaid绘图

首先是成品：

graph LR

A[方形] -->B(圆角)

    B --> C{条件a}

    C -->|a=1| D[结果1]

    C -->|a=2| E[结果2]

    F[横向流程图]

下面是代码：

```mermaid

graph LR

A[方形] -->B(圆角)

    B --> C{条件a}

    C -->|a=1| D[结果1]

    C -->|a=2| E[结果2]

    F[横向流程图]

```

接受一下算法：

  1. {}表示的是条件判断，[]是方形的边框，（）是圆形的。
  2. –>表示的线，A,B,C是标号。||是条件，括号内的是节点名称。
  3. LR表示横向， TD是竖向

标准流程图flow

成品：


st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st(right)->op(right)->cond

cond(yes)->io(bottom)->e

cond(no)->sub1(right)->op

代码：

```flow

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st(right)->op(right)->cond

cond(yes)->io(bottom)->e

cond(no)->sub1(right)->op

```

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

代码：

```flow

st=>start: 开始框

op=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

```

到此也就结束了，还有UML等的绘制，但是目前我用不到，再此就不进行记录了。

工具绘图Graphviz

Graphviz 是一个开源的图可视化工具，非常适合绘制结构化的图标和网络。Graphviz 使用一种叫 DOT 的语言来表示图形。

DOT 语言

DOT 语言是一种图形描述语言。能够以简单的方式描述图形，并且为人和计算机所理解。

有关代码：

无向图

graph graphname {
   a -- b -- c;
   b -- d;
}

有向图

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

设置属性

属性可以设置在节点和边上，用一对 [] 表示，多个属性可以用空格或者 , 隔开。

strict graph {
  // 设置节点属性
  b [shape=box];
  c [shape=triangle];

  // 设置边属性
  a -- b [color=blue];
  a -- c [style=dotted];
}

完整的属性列表可以参考 attrs | Graphviz - Graph Visualization Software

子图

subgraph 的作用主要有 3 个：

  1. 表示图的结构，对节点和边进行分组
  2. 提供一个单独的上下位文设置属性
  3. 针对特定引擎使用特殊的布局。比如下面的例子，如果 subgraph 的名字以 cluster 开头，所有属于这个子图的节点会用一个矩形和其他节点分开。
digraph graphname{ 
    a -> {b c};
    c -> e;
    b -> d;

    subgraph cluster_bc {
        bgcolor=red;
        b;
        c;
    }

    subgraph cluster_de {
        label="Block"
        d;
        e;
    }
}

布局

默认情况下图是从上到下布局的，通过设置 rankdir=“LR” 可以让图从左到右布局。

现在够用了。

基本命令

使用dot -T输出的格式 dot文本 -o *.输出格式 命令，可以生成相应格式的图片。比如要根据上面的脚本生成一个svg图片，可以执行命令：dot -Tsvg eg.dot -o eg.svg

生成图片

dot test.dot -T png -o test.png

由一个节点指向多个节点时，可以将它们用大括号包上，当子节点含有空格时可用引号将其包含。可以对脚本代码加上注释，其风格与C++的注释风格一样，可以用/* */包括注释内容，也可以用//将后面到下一行为止全当作注释。

节点描述中包含空格导致被拆分成两个节点

​ 解决方案一，使用 label

graph pic1 {
        google [label="Google 搜索"];
        百度搜索 -- 大象笔记
        google -- 大象笔记
}

解决方案二，加双引号

graph pic1 {
        百度搜索 -- 大象笔记
        "Google 搜索" -- 大象笔记
}

一些基本图形

节点形状

https://graphviz.gitlab.io/_pages/doc/info/shapes.html

画流程图工具 Graphviz，简介及基础教程

箭头的形状也有很大的选择空间

https://graphviz.gitlab.io/_pages/doc/info/arrows.html

画流程图工具 Graphviz，简介及基础教程