动态流程图，既有drawio的美观样式，也有ppt式的动画播放功能。

我已经在drawio项目中嵌入了幻灯片的播放功能，可以直接在drawio中实现当前的效果

文章地址

效果图

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

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

操作效果展示

操作体验地址：http://43.138.251.145:2335/drawio/%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%8F%AF%E6%93%8D%E4%BD%9C%E6%9D%BF.html

1. 首先你得用drawio去绘制你的流程图，直接下载drawio的安装包，安装包地址

2. 绘制完，导出为html。

3. 删除html文件中的script标签，然后添加以下的script      

4.  <script>var name = window.location.href;        
    name = name.substring(name.lastIndexOf("/") + 1);        
    name = name.substring(0, name.lastIndexOf("."));        
    var loading = document.createElement('h1')        
    loading.setAttribute('id','loading')        
    loading.textContent = '加载中'        
    document.body.appendChild(loading)
    </script>    
    <script type="text/javascript" src="http://119.29.32.105:2335/js/viewer-static.min.js"></script>    
    <script>        loading.remove()    </script>    
    <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" defer="defer"></script>                       
   

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

操作方式

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

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

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

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

• 三个图标的第三个（快捷键e）是关于持久化的，我下面会讲

步骤，数据持久化

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

先看效果吧！

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

开源地址

gitee.com/gitofcjf/dy…