vscode流程图插件、diagrams网页端和桌面工具

一、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流程图插件、diagrams网页端和桌面工具_第1张图片

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

二、vscode之draw.io intergration插件:

这个插件就是上面公司(Draw.io)开发的,如下:

vscode流程图插件、diagrams网页端和桌面工具_第2张图片

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

vscode流程图插件、diagrams网页端和桌面工具_第3张图片

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

vscode流程图插件、diagrams网页端和桌面工具_第4张图片

2)导入到线上:

在vscode中画的图(test1.drawio),可以导入到线上。

vscode流程图插件、diagrams网页端和桌面工具_第5张图片

你可能感兴趣的:(web前端,工具)