ubuntu利用vs code使用graphviz画流程图

刺骨的言语ヽ痛彻心扉 2021-11-19 14:46 742阅读 1赞

今天由于需要画流程图，导师推荐使用graphviz进行绘画，真心感慨--画图神器呀！！！

## 划重点 ##

### 先把做法给公布了：利用vs code 画graphviz图，只需要安装插件Graphviz（dot） language support for Visual Studio Code就好了，然后可以利用组合键命令 Ctrl+k 、v，实现边写代码边预览效果图（那效果是杠杠滴） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mjk1NTEx_size_16_color_FFFFFF_t_70][]

## 1：ubuntu安装graphviz ##

直接执行 sudo apt-get install graphviz，然后按照提示需要安装依赖就安装上去就好了，这里就不再花费时间表述。

## 2：使用graphviz进行画图 ##

（1）graphviz能够让我们利用代码进行表示，可以让我们直观的画出点对点之间直接的联系，并且最后形成流程图；

（2）graphviz使用dot布局文件，即是文件后缀为.dot，下面是一个实例：

创建文件first.dot:

digraph first{
        a[lable="这是a" shape="diamond"];
        b[lable="这是b" shape="box"];
        c;
        d;
        a -> b[lable="边"];
        b -> c;
        d -> c;
    }

然后在Terminal中输入：dot first.dot -Tpng -o first.png

执行结果就是生成了一张first.png图片。

## 3：关于graphviz的用法 ##

## 关于其用法，我就直接贴上官方文档，大家可以看看[http://www.graphviz.org/documentation/][http_www.graphviz.org_documentation] ##

它有各种效果，能够画出各种形状的结点，所以还是非常棒的！

官网上面的一些展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mjk1NTEx_size_16_color_FFFFFF_t_70 1][]

## 4：利用vs code实现边编写代码，边预览的效果！ ##

只需要在vs code中，安装插件Graphviz（dot） language support for Visual Studio Code，就能够实现边写代码边预览效果图！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mjk1NTEx_size_16_color_FFFFFF_t_70]: /images/20211119/c2821b94f59a47209789a106d292f73f.png
[http_www.graphviz.org_documentation]: http://www.graphviz.org/documentation/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mjk1NTEx_size_16_color_FFFFFF_t_70 1]: /images/20211119/3ccf5121ccd74a9893f97a3ebc10c64d.png