阿里开源流程图js_开源免费的React绘图插件——react-diagrams

介绍

一个超级简单，没有废话的图表库，用react来编写，全名是 STORM React Diagrams(SRD)，SRD是一个非常容易使用的库，用于在Web中创建流程图，最终可以表示任何类型的流程/网络/图形等。

---

---

特性介绍

• 简单

没有非常大的难度就可以集成到你的项目当中去

• 自定义

可自定义而无需关心其核心

• 操作简单

无复杂的操作

• 性能优秀

快速优化处理具有数百个节点/链接的大型图表

• 非常易用

你的工作都将是可预期的

• 非常适合创建声明性系统

如程序化流水线和可视化编程语言

---

---

Github

github：

https://github.com/projectstorm/react-diagrams

---

文档：

https://projectstorm.gitbooks.io/react-diagrams/

---

---

动图预览

昨天的文章中介绍阿里的动画效果解决方案，看到条友说没有gif，其实也不是我懒，而是还没发现一个好用的gif录屏软件，所以就截图了，今天的流程图演示不必担心，官网自带动图：

• 删除所有选中的节点

---

---

• Shift+鼠标拖动实现多选

---

---

• Shift+鼠标点击实现选中

---

---

• 鼠标拖动整个图表

---

---

• 鼠标滚轮实现放大/缩小功能

---

---

• 单击连线+鼠标拖动添加新连接点

---

---

• 单击节点端口，添加新连接

---

---

快速开始

• 安装

yarn install storm-react-diagrams//ornpm install storm-react-diagrams

---

• 引入JS文件

es6：

import * as SRD from "storm-react-diagrams"

---

reqiure：

var SRD = require("storm-react-diagrams)

---

js：

---

• 引入css

确保你已经启用了style-loader

require("storm-react-diagrams/dist/style.min.css");

---

或者确保你启用了sass-loader

require("storm-react-diagrams/src/sass/main.scss");

---

直接引入：

• typescript(如果你使用则需要安装环境)

• 如何使用

// 1)设置图引擎var engine = new SRD.DiagramEngine();engine.installDefaultFactories();// 2) 设置图模型var model = new SRD.DiagramModel();// 3) 创建一个默认节点var node1 = new SRD.DefaultNodeModel("Node 1