vue中使用mxgraph
类型流编辑器 (typeflow-editor)
build with the vue and mxGraph.
使用vue和mxGraph构建。
核心外观 (Core appearance)
![typeflow-editor](https://i-blog.csdnimg.cn/blog_migrate/ffff5c6041de837bf66fa37a52a9b700.png)
拖动“定义”中的元素之一后,将显示表格以填充 (After drag the one of the elements in "definitions", the form will display to fill)
![inputForm](https://i-blog.csdnimg.cn/blog_migrate/29dfad1782035d624bfebba0dcbb22d0.png)
完成创建Typflow模型后 (After finishing creating your typflow-model)
![draw](https://i-blog.csdnimg.cn/blog_migrate/cc39f9fb56c5d67194226ef7a70b8df1.png)
要检查或更新创建的元素,可以双击 “定义”顶点(InputEndpoint,OutputEndpoint,PureFunction) (To check or update the created elements you can double click the Definition vertex (InputEndpoint, OutputEndpoint, PureFunction))
![update2](https://i-blog.csdnimg.cn/blog_migrate/ecc0ce91c9d8a0a8aad6ac80e1da2eb9.png)
![update1](https://i-blog.csdnimg.cn/blog_migrate/fd8baf1598754306db55553b4267dbb9.png)
要删除 , 缩放 ( 放大 /缩小), 导出 , 导入或保存 ,请使用左侧的工具栏 (To delete, zoom(in/out), export, import or save, use the left tool bar)
![toolbar](https://i-blog.csdnimg.cn/blog_migrate/7a763a14095da5daff34fba497cde6a1.png)
导入时,可以选择从本地或从数据库导入 (When import, you can choose import from local or from database)
![import_choose](https://i-blog.csdnimg.cn/blog_migrate/ca5f360ceb90a123ce9b8ce16f081b48.png)
从数据库何时 (When from database)
![choose_panel](https://i-blog.csdnimg.cn/blog_migrate/41084afe2bab28dc83b911a92d8dc343.png)
项目设置 (Project setup)
npm install
编译和热重装以进行开发 (Compiles and hot-reloads for development)
npm run serve
翻译自: https://vuejsexamples.com/draw-tool-for-typeflow-build-with-the-vue-and-mxgraph/
vue中使用mxgraph