介绍

一个超级简单，没有废话的图表库，用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
//or
npm install storm-react-diagrams

---

• 引入JS文件

es6：

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

---

reqiure：

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

---

js：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="node_modules/storm-react-diagrams/dist/main.js">

---

• 引入css

确保你已经启用了style-loader

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

---

或者确保你启用了sass-loader

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

---

直接引入：

<link rel="stylesheet" href="node_modules/dist/style.min.css">

• typescript（如果你使用则需要安装环境）

• 如何使用

// 1)设置图引擎
var engine = new SRD.DiagramEngine();
engine.installDefaultFactories();
// 2) 设置图模型
var model = new SRD.DiagramModel();
// 3) 创建一个默认节点
var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
let port1 = node1.addOutPort("Out");
node1.setPosition(100, 100);
// 4)创建另一个默认节点
var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
let port2 = node2.addInPort("In");
node2.setPosition(400, 100);
// 5)链接端口
let link1 = port1.link(port2);
// 6) 将模型添加到根图
model.addAll(node1, node2, link1);
// 7)将模型加载到引擎中
engine.setDiagramModel(model);

---

• 创建组件

function SimpleDiagramWidget(props) {
 return <SRD.DiagramWidget diagramEngine={props.engine} />;
}

总结

现在Web越来越多的不错的插件出现，不少本来只能在桌面端完成的操作在Web端也得到了一些实现，作为一个Web开发者，很乐意看到这样的一个现状，如果你对react-diagrams感兴趣的话可以用它来完成一些流程图的Web设计工具，或者继承到你的项目设计工作流或者类似于ERP的审批流。总之，很多有意思的事情等待你的挖掘！