程序员画流程图的工具Draw.io

古城微笑少年丶 2023-10-04 22:45 23阅读 0赞

Draw.io 是一个很好用的免费流程图绘制工具,制图结果本质上是xml文件，web版和桌面版可以支持导出图像（png或者svg矢量图都可以）。

你可以利用它绘制一系列的图表、图示或图形，包括流程图、UML类图、组织结构图、泳道图、E-R 图、文氏图等等。

一大堆的介绍，感觉很高端，其实我真正用的也就几个。

这块软件可以在线访问进行画图，也可以下载安装包（绿色版）在本地打开进行画图，都是很方便的。

## 在线网址： ##

[https://app.diagrams.net/][https_app.diagrams.net]

## exe下载地址: ##

github下载地址： [https://github.com/jgraph/drawio-desktop/releases][https_github.com_jgraph_drawio-desktop_releases]

![90e507202fdd4196bcc63498b470691c.png][]

创建时可以选择一些模板：

![db06c1419d3b4bd59543a22e20a13e1e.png][]

## VSCode插件 ##

在VSCode扩展商店里面搜drawio，找到vscode-drawio，直接安装。

![56799aebc992426e8bc29ac29744c9b7.png][]

打开或新建后缀名是.drawio.svg或者drawio.png的文件。

![18edc6af70d147e88ca9c2221583c44d.png][]

## **绘制流程图需要的符号：** ##

![a5c02164c55c41c697e5302d2ed8fa92.png][]

**流程图分类**

流程图的种类多达10种，归纳整理如下：

![46c531ba9e7a416e9169dc74563259e8.png][]

其中程序员平时用的比较多的有：

*  基础流程图：按照工作展开的描述过程，是各类流程图的基础，是最基本的流程图；

*  跨职能流程图：针对某个特定流程，制定各个单位的权责，描述各个单位作业活动以及在部门之间往来的情形；

*  数据流程图：一种描述系统数据流程的工具，可以将抽象的数据独立出来，通过特定的图形符号来展示信息的来龙去脉和实际流程。这是一种能描绘信息系统逻辑模型的重要工具。

## 更多关于流程的介绍可以参考链接： ##

[https://blog.csdn.net/xijinno1/article/details/129346727][https_blog.csdn.net_xijinno1_article_details_129346727]

[https_app.diagrams.net]: https://app.diagrams.net/
[https_github.com_jgraph_drawio-desktop_releases]: https://github.com/jgraph/drawio-desktop/releases
[90e507202fdd4196bcc63498b470691c.png]: https://img-blog.csdnimg.cn/img_convert/90e507202fdd4196bcc63498b470691c.png
[db06c1419d3b4bd59543a22e20a13e1e.png]: https://img-blog.csdnimg.cn/img_convert/db06c1419d3b4bd59543a22e20a13e1e.png
[56799aebc992426e8bc29ac29744c9b7.png]: https://img-blog.csdnimg.cn/img_convert/56799aebc992426e8bc29ac29744c9b7.png
[18edc6af70d147e88ca9c2221583c44d.png]: https://img-blog.csdnimg.cn/img_convert/18edc6af70d147e88ca9c2221583c44d.png
[a5c02164c55c41c697e5302d2ed8fa92.png]: https://img-blog.csdnimg.cn/img_convert/a5c02164c55c41c697e5302d2ed8fa92.png
[46c531ba9e7a416e9169dc74563259e8.png]: https://img-blog.csdnimg.cn/img_convert/46c531ba9e7a416e9169dc74563259e8.png
[https_blog.csdn.net_xijinno1_article_details_129346727]: https://blog.csdn.net/xijinno1/article/details/129346727