【VScode】通过Graphviz插件快速画出流程图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

简介

  Graphviz 是一个开源的图形可视化工具集，用于创建和渲染图形图表、图形结构和网络图。它包括一组用于描述和绘制图形的开放源代码工具和库，最常用的是Graphviz DOT语言。
  结合当前ChatGPT，帮助我们快速编写DOT 代码，使其快速生成各种流程图，前提是你的文字流程描述要足够清晰。

安装Graphviz插件

ctrl+shift+x 打开应用商城搜索输入“Graphviz”，找到【Graphviz Interactive Preview】，直接安装；
安装完后重启VS Code软件；

如何使用

新建文件夹，并以.dot 命名，复制如下代码，看效果：

digraph Organization {
  rankdir=TB;
  node [shape=record];

  // 部门节点
  subgraph cluster_hr {
    label = "人力资源部";
    HR [label="{HR|部门经理: Alice|员工: Bob, Carol, Dave}"];
  }

  subgraph cluster_it {
    label = "信息技术部";
    IT [label="{IT|部门经理: Eve|员工: Frank, Grace, Harry}"];
  }

  subgraph cluster_sales {
    label = "销售部";
    Sales [label="{销售|部门经理: Jane|员工: Kim, Leo, Mary}"];
  }

  // 部门之间的关系
  HR -> IT [label="协作"];
  HR -> Sales [label="招聘"];
  IT -> Sales [label="技术支持"];

  // 公司高层领导
  CEO [label="首席执行官: Olivia"];
  CTO [label="首席技术官: Peter"];
  CFO [label="首席财务官: Richard"];

  // 公司领导之间的关系
  CEO -> CTO [label="报告"];
  CEO -> CFO [label="报告"];
}

结合ChatGPT 生成示意图

打开ChatGPT输入：使用vscode graphviz 生成TCP/IP协议栈分层

digraph G {
  rankdir=LR; // 设置图示的方向（从左到右）
  node [shape=box]; // 设置节点形矩形形状

  Application [label="Application Layer"];
  Transport [label="Transport Layer"];
  Network [label="Network Layer"];
  DataLink [label="Data Link Layer"];
  Physical [label="Physical Layer"];

  Application -> Transport;
  Transport -> Network;
  Network -> DataLink;
  DataLink -> Physical;
}

打开ChatGPT输入：并画出层级之间的关系

digraph G {
  rankdir=LR; // 设置图示的方向（从左到右）

  // 创建节点
  subgraph cluster_0 {
    label = "应用层";
    HTTP [label="HTTP"];
    FTP [label="FTP"];
    SMTP [label="SMTP"];
  }
  
  subgraph cluster_1 {
    label = "传输层";
    TCP [label="TCP"];
    UDP [label="UDP"];
  }
  
  subgraph cluster_2 {
    label = "网络层";
    IP [label="IP"];
  }
  
  subgraph cluster_3 {
    label = "链路层";
    Ethernet [label="Ethernet"];
  }

  // 创建连接
  HTTP -> TCP;
  FTP -> TCP;
  SMTP -> TCP;
  TCP -> IP;
  IP -> Ethernet;
}