# dynamicFlow
**Repository Path**: localkingJin/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**: 0
- **Forks**: 4
- **Created**: 2021-02-04
- **Last Updated**: 2021-02-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
### 动态流程图，既有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版 地址：https://github.com/jgraph/drawio-desktop造着操作即可
3. 将.drawio文件导入Electron版本的drawio，然后导出为Html文件（只有Electron版本的才有导出html功能哦）
4. 在你导出的html文件的标签最底层添加
```js
```
5. 然后用浏览器打开你的html文件即可操作。
### 操作方式
- 在html上点击元素，元素会变红，同时右板会出现
- 点击右板下侧的三个图标的第一个，这个是生成当前步骤的，比如第一步展示的元素，第二步展示的元素等
- 然后点击三个图标的第二个，这个是展示动态流程图，页面元素全隐藏，然后点击空白处，会出现第一步骤，然后继续点击，出现第二步骤，以此类推
- 鼠标悬浮右板的每一项，可以在图像上看到选中的那个。同时还可以为每一个步骤添加元素。删除按钮可以删除该步骤或者该步骤的元素。就是可对步骤进行修改咯。
- 三个图标的第三个是关于持久化的，我下面会讲
### 步骤，数据持久化
肯定会有人问，我弄好步骤之后，我关闭页面，不就没了吗？难道又得重新生成步骤？
先看效果吧！
刷新页面后我通过点击三个图标的第三个，我曾经的步骤出现了，这就是数据、步骤的持久化。