Graphviz绘图 – DOT语言-一一网

平时工作中总是需要画一些流程图的，流程图在绘制的过程中，如果想在中间插入一个步骤，或者删除一个步骤是比较麻烦的，需要调节一些其他的节点，那么怎么解决这一问题呢？

答：使用 Graphviz绘图，用代码来画图，这样子修改一起是比较方便的，专注于流程，思路有了，图自然就有了，不用总是在调整图形、箭头之间花费大量的时间。

简介

Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&T实验室启动的开源工具包，可以用于绘制DOT语言脚本描述的图形。

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

一、在 vscode 中使用 Graphviz绘图 — 安装插件

Mac下直接通过brew install graphviz了，也可以直接从官网下载。

brew install graphviz
复制代码

二、使用示例

1. 简单示例：

digraph G{

    size = "5, 5";//图片大小
    main[shape=box];/*形状*/

    main->parse;
    parse->execute;

    main->init[style = dotted];//虚线

    main->cleanup;
    edge[color = green]; // 连接线的颜色

    execute->{make_string; printf}//连接两个

    init->make_string;
    main->printf[style=bold, label="100 times"];//线的 label

    make_string[label = "make a\nstring"]// \n, 这个node的label，注意和上一行的区别

    node[shape = box, style = filled, color = ".7.3 1.0"];//一个node的属性

    execute->compare;
    
    {rank=same; parse, init}
}
复制代码

2. 查看可视化图形

点击右键，选择 Open Preview to the SIde, 如下图：

3.生成图片

第一步将上述文件创建文本文件并命令为x.dot。

第二步，使用命令将文本内容转换为图片。

dot demo.dot -T png -o demo.png
复制代码

-T表示输出类型，可以指定jpg、gif、svg等等，-o指定输出文件名，不指定则输出到标准输出上。

三、使用说明

指定形状

    "box"[shape=box]
    "polygon"[shape=polygon,sides=7] 
    "ellipse"[shape=ellipse]
    "circle"[shape=circle]
    "point"[shape=point]
    "triangle"[shape=triangle]
    "invtriangle"[shape=invtriangle]
    "plaintext"[shape=plaintext]
    "diamond"[shape=diamond]
复制代码