一个非常好用的，在线画图软件。开源的在线画流程图软件，超级棒。draw.io

Posted 2022-08-02 freewebsys

前言

---

本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/83689187
未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于draw.io

---

是一个在线的编辑画图的软件。
软件可以进行流程图的编辑设计。非常的棒。
可以存储到网络盘上或者下载到本地。

网站地址：
https://www.draw.io/?lang=zh
网站的参数说明：
https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported
带开发者模式：

通过修改
https://www.draw.io/?dev=1
可以在chrome 上面看到源代码映射：

当然本身也是开源软件，apache 开源协议的。
github地址：
https://github.com/jgraph/drawio
7000 多个星星呢。

2，使用

---

非常方便的使用：

可以画简单，复杂的系统流程图，工作流程引擎啥的呢。
下载git代码，然后可以本地运行。
还有封装的桌面版本可以使用。

https://github.com/jgraph/drawio-desktop

下载项目之后。是个普通的java 工程。不是maven的。
依赖的jar 特别的少。

前后台的全部代码都有呢。主要还是前端的代码。
后端代码，主要是负责账户登录。存储啥的。很少的代码。
主要还是前端的代码。
不是node的项目呢。还是纯js的代码呢。学习使用起来肯定好。
代码量也挺大的呢。慢慢看，最好改装成啥功能。或者参考下自己也做个拖拽的项目。才能学的很好。

同时还使用了 https://electronjs.org/ 项目做桌面版本的支持呢。
还是非常好的项目。
但是这个web 工程里面没有源代码是压缩之后的。

在这个项目：
https://github.com/jgraph/mxgraph

其中npm 对应的lib 在：

https://www.npmjs.com/package/mxgraph

https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
这个才是前端的代码。
https://github.com/jgraph/mxgraph/tree/master/javascript/examples
下面有好多例子学习。

4，总结

---

draw.io 是一个图形编辑器。网站只是一个演示。
真正的代码是在 mxgraph 下面。有java js php 的。

将这个转换成自己的项目还需要多研究研究。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/83689187

博主地址是：http://blog.csdn.net/freewebsys