Getting started

Installation via NPM

The first thing you need to do, is grab the distribution files on NPM. You can do this either using yarn or npm

Via yarn:

  1. yarn install storm-react-diagrams

Via npm:

  1. npm install storm-react-diagrams

When you run this in your project directory, this will install the library into node_modules/storm-react-diagrams. You will then find a dist folder that contains all the minified and production ready code.

This will also install React and a few other dependencies that you need in order to use this library.

Including the library

When including the library you will need both the javascript files as well as the raw BEM styles. Both are included in the dist folder and there are numerous ways to integrate them into your project:

Getting the javascript files

Using Typescript / ES6: (recommended)

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

Using RequireJS:

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

As a script tag (not recommended)

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

Getting the CSS

Using RequireJS / Typescript/ ES6 (recommended)

Make sure you have the style-loader enabled and then:

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

or make sure you have the sass-loader enabled and then:

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

If you are using typescript and get a "require function not found" then make sure to

  1. yarn add @types/node

which will give you the typescript definition files for requireJS

Using SASS:

setup your include paths on webpack or lib sass using the following option

  1. includePaths: ["node_modules"]

and then if you want the raw sass source code:

  1. @import "~storm-react-diagrams/src/sass/main";

or if you want the minified css

  1. @import "~storm-react-diagrams/dist/style.min";

Using a style tag

or if you want the minified css

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

Render your first diagram

In your library code

  1. // 1) setup the diagram engine
  2. var engine = new SRD.DiagramEngine();
  3. engine.installDefaultFactories();
  5. // 2) setup the diagram model
  6. var model = new SRD.DiagramModel();
  8. // 3) create a default node
  9. var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
  10. let port1 = node1.addOutPort("Out");
  11. node1.setPosition(100, 100);
  13. // 4) create another default node
  14. var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
  15. let port2 = node2.addInPort("In");
  16. node2.setPosition(400, 100);
  18. // 5) link the ports
  19. let link1 = port1.link(port2);
  21. // 6) add the models to the root graph
  22. model.addAll(node1, node2, link1);
  24. // 7) load model into engine
  25. engine.setDiagramModel(model);

And then create an instance of the diagram widget. An example of the simplest possible react widget to do this would be:

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