一、diagrams介绍：

diagrams提供了一套网页版流程图绘制，以及对应的桌面版本。

官网：https://www.diagrams.net/(或者http://draw.io/)，进入后可以在线绘制流程图。

下载桌面版地址：https://github.com/jgraph/drawio-desktop/releases ，介绍：drawio-desktop is a diagrams.net desktop app based on Electron. 毫无疑问，diagrams也是用了Electron技术，实现了js跨平台开发（和vscode一样）,从而实现了web端、桌面端、vscode插件端一体化。

接下来，我们简单介绍一下网页版的功能。

好了，接下来介绍如何在vscode里集成这个功能。

二、vscode之draw.io intergration插件：

这个插件就是上面公司（Draw.io）开发的，如下：

安装后，使用起来也很简单，创建一个文件（后缀drawio，vscode会自动识别）。

1、接下来我们做一个示例：

2）导入到线上：

在vscode中画的图（test1.drawio），可以导入到线上。