使用开源的react绘图库——react-diagrams，实现Web端绘图功能

介绍

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

特性介绍

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

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

无复杂的操作

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

你的工作都将是可预期的

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

Github

github：

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

文档：

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

动图预览

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

快速开始

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

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">

确保你已经启用了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">

// 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的审批流。总之，很多有意思的事情等待你的挖掘！