动态流程图，既有drawio的美观样式，也有ppt式的点击动态化。

效果图

以下的tiny-vue，即Vue1.0版本的initState、complie、数据响应的源码流程。通过不断点击，动态出现流程图的每一步，这样更适合与他人讲解。体验地址是：

http://119.29.32.105:2335/drawio/%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94.html

操作效果展示

1. 首先你得用drawio去绘制你的流程图，比如vscode的drawio插件，或者github上的Electron版本，绘制完成导出.drawio文件

2. 下载drawio的pc端Electron版 地址：github.com/jgraph/draw…造着操作即可

3. 将.drawio文件导入Electron版本的drawio，然后导出为Html文件（只有Electron版本的才有导出html功能哦）

4. 在你导出的html文件的标签最底层添加                                                

   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script><script src="http://119.29.32.105:2335/js/lottie.js"></script><script src="http://119.29.32.105:2335/js/dynamic.min.op.js"></script>
   

                                           

5. 然后用浏览器打开你的html文件即可操作。                               

操作方式

• 在html上点击元素，元素会变红，同时右板会出现

• 点击右板下侧的三个图标的第一个，这个是生成当前步骤的，比如第一步展示的元素，第二步展示的元素等

• 然后点击三个图标的第二个，这个是展示动态流程图，页面元素全隐藏，然后点击空白处，会出现第一步骤，然后继续点击，出现第二步骤，以此类推

• 鼠标悬浮右板的每一项，可以在图像上看到选中的那个。同时还可以为每一个步骤添加元素。删除按钮可以删除该步骤或者该步骤的元素。就是可对步骤进行修改咯。

• 三个图标的第三个是关于持久化的，我下面会讲

步骤，数据持久化

    肯定会有人问，我弄好步骤之后，我关闭页面，不就没了吗？难道又得重新生成步骤？

先看效果吧！

刷新页面后我通过点击三个图标的第三个，我曾经的步骤出现了，这就是数据、步骤的持久化。

开源地址

gitee.com/gitofcjf/dy…