# dynamicFlow

**Repository Path**: gitofcjf/dynamic-flow

## Basic Information

- **Project Name**: dynamicFlow
- **Description**: 通过点击实现的动态流程图，既拥有ppt的点击不断出现元素的功能，又拥有drawio的美观图形和样式
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2020-12-18
- **Last Updated**: 2023-10-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

### [博客网站](https://juejin.cn/post/6911642584561647624)

### 效果图
以下的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](http://119.29.32.105:2335/drawio/%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94.html)


### 操作效果展示
操作体验地址：[http://119.29.32.105: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](http://119.29.32.105: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.
```javascript
<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.js" defer="defer"></script>  
```                           
5.然后用浏览器打开你的html文件即可操作。                               


### 操作方式
- 在html上点击元素，元素会变红，同时右板会出现
- 点击右板下侧的三个图标的第一个（快捷键q），这个是生成当前步骤的，比如第一步展示的元素，第二步展示的元素等
- 然后点击三个图标的第二个（快捷键w），这个是展示动态流程图，页面元素全隐藏，然后点击空白处，会出现第一步骤，然后继续点击，出现第二步骤，以此类推
- 鼠标悬浮右板的每一项，可以在图像上看到选中的那个。同时还可以为每一个步骤添加元素。删除按钮可以删除该步骤或者该步骤的元素。就是可对步骤进行修改咯。
- 三个图标的第三个（快捷键e）是关于持久化的，我下面会讲


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

先看效果吧！

    

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