a super simple, no-nonsense diagramming library written in react that just works

Overview

Introduction

Join the chat at https://gitter.im/projectstorm/react-diagrams NPM Package Quality CircleCI lerna

DEMO: http://projectstorm.cloud/react-diagrams

DOCS (wip) https://projectstorm.gitbook.io/react-diagrams

Docs are currently being worked on, along with a migration path.

What

A flow & process orientated diagramming library inspired by Blender, Labview and Unreal engine.

  • Modern Codebase written entirely in Typescript and React, the library makes use of powerful generics, advanced software engineering principles and is broken up into multiple modules.
  • Hackable and extensible the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs.
  • HTML nodes as a first class citizen the library was originally written to represent advanced dynamic nodes, that are difficult to represent as SVG's due to complex input requirements ux requirements.
  • Designed for process the library is aimed for software engineers that want to rewire their programs at runtime, and that want to make their software more dynamic.
  • Fast diagram editing the defaults provided give the highest priority to editing diagrams as fast as possible.

Gallery

Example implementation using custom models: (Dylan's personal code)

Personal Project

Get started with the default models right out of the box:

Installing

For all the bells and whistles:

yarn add @projectstorm/react-diagrams

This includes all the packages listed below (and works (mostly and conceptually) like it used to in version 5.0)

A more modular approach

This library now has a more modular design and you can import just the core (contains no default factories or routing)

yarn add @projectstorm/react-diagrams-core

this is built ontop of the evolving react-canvas-core library

yarn add @projectstorm/react-canvas-core

which makes use of

yarn add @projectstorm/geometry

and of course, you can add some extras:

yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing

How to use

Before running any of the examples, please run yarn build in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.

Take a look at the diagram demos

or

Take a look at the demo project which contains an example for ES6 as well as Typescript

or

Checkout the docs

Run the demos

After running yarn install you must then run: cd packages/diagrams-demo-gallery && yarn run start

Building from source

Simply run yarn then yarn build or yarn build:prod in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.

Built with react-diagrams

Do you have an interesting project built with react-diagrams? PR it into this section for others to see.

Comments
  • Create arrow head in links

    Create arrow head in links

    I want to create something like this blue arrow: image

    I tried to customize the link, but had no success. Can someone send me and example or help me with that?

    Thanks!

    feature request help wanted 
    opened by matheusgaya 30
  • How to use events

    How to use events

    Hi there,

    Is there documentation on how to work with events? I want to add some events to my project but don't even know where to begin.

    If you could me give me some information on the different events and how to attach them I would happily write the documentation and add a PR.

    Cheers

    question answered 
    opened by Baudin999 23
  • Import error after build

    Import error after build

    I've got an error while importing brand new built library. It completely ok with importing your git version. But I got an error after importing a library just right after built with webpack command. Even if no any single change.

    Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
        at invariant (invariant.js:38)
        at Object.addComponentAsRefTo (ReactOwner.js:68)
        at attachRef (ReactRef.js:23)
        at Object.ReactRef.attachRefs (ReactRef.js:42)
        at ReactDOMComponent.attachRefs (ReactReconciler.js:23)
        at CallbackQueue.notifyAll (CallbackQueue.js:76)
        at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
        at ReactReconcileTransaction.closeAll (Transaction.js:206)
        at ReactReconcileTransaction.perform (Transaction.js:153)
        at ReactUpdatesFlushTransaction.perform (Transaction.js:140)
    

    Do you have any idea what could be wrong?

    opened by gen4sp 19
  • link far end aligns with the mouse pointer position

    link far end aligns with the mouse pointer position

    Checklist

    • [x] The code has been run through pretty yarn run pretty
    • [x] The tests pass on CircleCI
    • [x] You have referenced the issue(s) or other PR(s) this fixes/relates-to
    • [x] The PR Template has been filled out (see below)
    • [x] Had a beer/coffee because you are awesome

    What?

    The DragNewLinkState.fireMouseMoved method was not taking into account the click starting position when dragging a new link, it just assumes it's the same point (x,y) of the link port. Sometimes, especially with big ports, it causes a slight mismatch between the link far end point and the mouse position as reported in the issue #467

    How?

    I saved the mouse starting position within the DragNewLinkState class itself.

    Feel good image:

    (Add your own one below :])

    LOL

    opened by antonioru 18
  • Really Struggling

    Really Struggling

    Hello all, First and foremost, I'm a complete n00b to react and webpack. But I'd really like to use react-diagrams in my project, but can't seem to get it to render properly.

    Here is what I've done so far:

    1. cd into my project folder
    2. ran npm install --save storm-react-diagrams
    3. Created a new page on my site and added the following code to it:
    import React, { Component } from 'react';
    
    import {
    	DiagramEngine,
    	DiagramModel,
    	DefaultNodeModel,
    	LinkModel,
      DefaultPortModel,
      DiagramWidget,
      DefaultLinkModel
    } from "storm-react-diagrams";
    
    
    //1) setup the diagram engine
    var engine = new DiagramEngine();
    engine.installDefaultFactories();
    
    //2) setup the diagram model
    var model = new DiagramModel();
    
    //3-A) create a default node
    var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
    var port1 = node1.addPort(new DefaultPortModel(false, "out-1", "Out"));
    node1.x = 100;
    node1.y = 100;
    
    //3-B) create another default node
    var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
    var port2 = node2.addPort(new DefaultPortModel(true, "in-1", "IN"));
    node2.x = 400;
    node2.y = 100;
    
    //3-C) link the 2 nodes together
    var link1 = new LinkModel();
    link1.setSourcePort(port1);
    link1.setTargetPort(port2);
    
    //4) add the models to the root graph
    model.addNode(node1);
    model.addNode(node2);
    model.addLink(link1);
    
    //5) load model into engine
    engine.setDiagramModel(model);
    
    class SandboxPage extends Component {
      render() {
        return (
          <div>
            <DiagramWidget diagramEngine={engine} />
          </div>
        );
      }
    }
    
    export default SandboxPage;
    

    But the page renders like this: image

    I pretty much copied the code from the simple demo example, but obviously, something is wrong.

    Any help would be appreciated.

    question answered 
    opened by jc78 18
  • Wrong link appearance while creating a link if zoom is activated

    Wrong link appearance while creating a link if zoom is activated

    I am pointing at the second "Test 1" here with a zoom of around 60.

    image

    The issue is probably introduced by the recent bugfix of #469 concerning link placement offset

    EDIT : Added more details

    opened by pierre-moire 17
  • Link has been linked event | Auto remove unlinked wires bahavior

    Link has been linked event | Auto remove unlinked wires bahavior

    Hey! Two things I want to implement:

    1. It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?

    2. It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly

    feature request architecture 
    opened by gen4sp 16
  • Can't seem to build with Rollup.js (0.41.4) / possibility of converting to ES6 modules?

    Can't seem to build with Rollup.js (0.41.4) / possibility of converting to ES6 modules?

    I'm making a toy project to get the hang of this library, but can't seem to be able to build it with rollup.

    I've tried several approaches, but none of them is working: I keep ending up with either 'CanvasWidget' is not exported by node_modules\storm-react-diagrams\src\main.js or 'default' is not exported by node_modules\storm-react-diagrams\src\main.js. This happens regardless of whether I specify namedExports for rollup's commonJS plugin.

    For reference, my rollup config is mostly derived from the one available here

    Secondary question: would you be interested in PRs that migrate the codebase to ES6 modules? If so, how would you propose to best handle it?

    opened by mwozniczak 16
  • Features/labview style of routes

    Features/labview style of routes

    Checklist

    • [ ] The code has been run through pretty yarn run pretty
    • [x] The tests pass on CircleCI
    • [ ] You have referenced the issue(s) or other PR(s) this fixes/relates-to
    • [x] The PR Template has been filled out (see below)
    • [x] Had a beer because you are awesome

    What?

    New "right-angle" style like LabView for example. It is more engineering way how to route things e.g electronic schematic. Check new routing rightanglerouting newroute

    NOTE 1: I placed it into routes/rightAngles just because I am not really familiar with the whole structure and plans how to restructure it.

    NOTE 2 If this will be merged we should consider mutual function for DefaultLinkWidget and RightAngleLinkWidget. I mean addPointToLink, generatePoint, generateLabel, generateLink, findPathAndRelativePositionToRenderLabel, calculateLabelPosition and we should place it to abstract class or something.

    Why?

    Because it is not available in this project. Smart routing is nice but I can't move the path.

    How?

    It is a new feature some it just takes some time to develop it :)

    Feel-Good "programming lol" image:

    (Add your own one below :])

    image

    opened by DanieLazarLDAPPS 13
  • Link Arrowhead

    Link Arrowhead

    I'm trying to create a link with arrowhead to use on UML Diagrams, but all examples shown in issue #183 aren't working on actual commit (waste more than 24h working on it). Is there another way to create an arrowhead?

    opened by mathiasbaldissera 13
  • links deSerialize problem

    links deSerialize problem

    I've faced a problem. While deserializing simple diagram with custom nodes and ports this line returns null. But if I call it in a few msec - it returns correct value. It seems the canvas doesn't rendered yet when this code is run.

    Where could be a problem?

    diagramEngine.js - getNodePortElement()

    var selector = this.canvas.querySelector('.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID()+'"]');
    
    bug 
    opened by gen4sp 13
  • How to re-order nodes by z-index?

    How to re-order nodes by z-index?

    I could not find any way to push a node to foreground and background, so I had to do this:

    const background = document.querySelector('[data-nodeid="nodeid"]') as HTMLDivElement;
    if (background) {
        background.style.zIndex = '-1';
    }
    

    Do not see this as an elegant solution, so question arised: Is there some function in the library to push a node to foreground/background?

    opened by Marshall200900 0
  • Node not getting added with useEffect

    Node not getting added with useEffect

    Hi,

    I have been trying to make this work with useEffect as follows

    import createEngine, { 
      DefaultLinkModel, 
      DefaultNodeModel,
      DefaultLabelModel,
      DiagramModel, 
      LabelModel
    } from '@projectstorm/react-diagrams';
    import { useSelector } from 'react-redux'
    import styles from './Diagram.module.scss';
    
    import {
      CanvasWidget
    } from '@projectstorm/react-canvas-core';
    import styled from '@emotion/styled';
    import { useEffect } from 'react';
    import { drawEdge, drawNode } from './reducer';
    
    const FullscreenCanvas = styled(CanvasWidget)`
      height: 100%;
      width: 100%;
    `;
    
    export default function Diagram(props) {
      const nodes = useSelector((state) => state.nodes);
      const engine = createEngine();
      const model = new DiagramModel();
      engine.setModel(model);
    
      useEffect(() => {
        nodes.forEach(node => {
          addNode({
            name: node.name,
            color: 'rgb(0,192,255)'
          })
        });
    
        engine.repaintCanvas();
      }, [nodes]);
    
      function addNode(attrs) {
        const node = new DefaultNodeModel(attrs);
        node.setPosition(100, 100);
        model.addAll(node); 
      }
    
      return (
        <>
          <div className={styles['diagram-container']}>
            <FullscreenCanvas engine={engine} />
          </div>
        </>
        
      )
    }
    

    Instead of useEffect if I call addNode function onClick of a button and then repaintCanvas, it works

    Is anything extra required in case of useEffect? Thanks in advance!

    opened by abhisheksarka 1
  • Support more layout engines

    Support more layout engines

    Hi, this library is awesomem, but I was wondering if it is possible to use different layout engines like cytoscape.js does like these:

    Thank you

    opened by AlessandroAnnini 0
  • Issue with LinkModel setTargetPort

    Issue with LinkModel setTargetPort

    Hi,

    Not sure if I've followed all guidelines properly, but we've recently upgraded to a new version of react-diagrams and encountered a new issue based on a change to the setTargetPort method which was made in LinkModel here https://github.com/projectstorm/react-diagrams/commit/8173b70834d3ba15cfee4b15b0515621b210a84c#diff-85d35b77b068838235138041137155ba2b82b9965d0868ac1db8a431fe71f6b3 and which was patched in this version: https://github.com/projectstorm/react-diagrams/commit/e34c73ca00aa18d294267bc0a70527693185771b to account for null ports

    We rely on the passed argument port to perform the reportedPosition check below:

    this.targetPort = port;
    this.fireEvent({ port }, 'targetPortChanged');
    if (port?.reportedPosition) { // uses `port`
    	this.getPointForPort(port).setPosition(port.getCenter());
    }
    

    our issue is that the this.targetPort may have changed after firing the event (and no longer reports its position), but the check is still performed against the port argument and this breaks for us in getPointForPort because the ID of the targetPort has now changed and we can no longer set the position for port.

    The reason why targetPort changes in our use case is because when a user links 2 blocks together, we want to insert a node in the middle and effectively the port type changes from a BlockPort to a custom NodePort.

    User links: Screen Shot 2022-11-29 at 11 57 33 AM

    Node is added: Screen Shot 2022-11-29 at 11 57 45 AM

    Any way we could instead rely on this.targetPort in the check ? Effectively becoming:

    this.targetPort = port;
    this.fireEvent({ port }, 'targetPortChanged');
    if (this.targetPort?.reportedPosition) {
    	this.getPointForPort(this.targetPort).setPosition(this.targetPort.getCenter());
    }
    

    (same for setSourcePort i guess) ??? Before our upgrade to the library, the setTargetPort would only perform the event firing and would not attempt to set the position below:

    this.targetPort = port;
    this.fireEvent({ port }, 'targetPortChanged');
    

    but now since we're calling this.getPointForPort() we rely on:

    getPointForPort(port: PortModel): PointModel {
    		if (this.sourcePort !== null && this.sourcePort.getID() === port.getID()) {
    			return this.getFirstPoint();
    		}
    		if (this.targetPort !== null && this.targetPort.getID() === port.getID()) { // targetPort has changed ID ! and we never enter here
    			return this.getLastPoint();
    		}
    		return null;
    	}
    

    hence why this change is breaking for us.

    [edit*] adding error stack trace - see screenshot where targetPort differs from port: Screen Shot 2022-11-29 at 11 41 13 AM

    Or are we perhaps missing something ?

    thank you for letting us know

    opened by chrys-unito 0
  • Add an option to align nodes

    Add an option to align nodes

    Hi 👋 ,

    I am using the lib for personal purposes and I love it 😄,

    In my project, I just implemented a way to align nodes between them that would look like this :

    CPT2211182131-1280x864 (1)

    It works with a setting option that can be activated/deactivated and with a DELTA which determines the sensibility of the trigger

    I was wondering if some people would be interested in this feature and if I could implement it

    opened by Flowwl 1
  • PortWidget cannot be used as a JSX component

    PortWidget cannot be used as a JSX component

    After updating to React 18 and to v6.7.4 every PortWidget and LinkWidget are failing to render and throw following ts error:

    JSX element class does not support attributes because it does not have a 'props' property.ts(2607) 'PortWidget' cannot be used as a JSX component. Its instance type 'PortWidget' is not a valid JSX element. Type 'PortWidget' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786).

    Usage is as simple as that: <PortWidget engine={engine} port={port} key={port.getID()}>...

    opened by loziobrus 0
Releases(v6.7.4)
  • v6.7.4(Jun 3, 2022)

    Upgraded all dependencies, and moved to React 18. React storybook still uses React 17 under the hood though, we need to wait for the manager to be upgraded in that repo. I will aggressively merge PR's that fix anything that this upgrade breaks, but so far my testing seems to show everything working.

    Source code(tar.gz)
    Source code(zip)
  • v6.7.0(Feb 7, 2022)

    Sorry for the hiatus everyone. I moved to Denver (from South Africa x_x) and was busy with admin and large projects for an entire year. The good news is that I am now using this library in two large projects at work and so it will most likely get updates more quickly. Im also planning a version 7 which will break up the library further so that the rendering is completely pluggable. I plan on eventually doing a WebGL version so we can build impossibly large diagrams similar to those in the excellent Unreal and Blender pipelines.

    Source code(tar.gz)
    Source code(zip)
  • v6.0.2(Mar 6, 2020)

  • v5.0.0(Feb 25, 2018)

  • v4.0.0(Jan 18, 2018)

  • v3.2.0(Nov 22, 2017)

  • 2.1.4(Feb 20, 2017)

    After battling with UMD and npm a little bit, I can now confirm that this actual works. Here is a demo project that proves it. Simply run yarn or npm install and then webpack. test2.zip

    Source code(tar.gz)
    Source code(zip)
mxGraph is a fully client side JavaScript diagramming library

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https://github.com/jsGraph/mxgraph https:

JGraph 6.5k Dec 30, 2022
Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Color Thief Grab the color palette from an image using just Javascript.Works in the browser and in Node. View the demo page for examples, API docs, an

Lokesh Dhakar 11.2k Dec 30, 2022
Barcode generation library written in JavaScript that works in both the browser and on Node.js

Introduction JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It h

Johan Lindell 4.7k Dec 30, 2022
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
RocketTrades - Discord Stocks and Charts bot. Written for the RocketTrades Discord bot.

Rocket Trades RocketTrades, Discord Charts and Stocks bot. MORE DETAILS AND UPDATES TO COME SOON Getting started • Installation • Configuration • Inte

Ethan Primmer 3 Feb 4, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript

JS.Sketcher JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript YouTube Tutorial Video Live Sample Demo 2D Sketcher Help Docs

Val Erastov 1.1k Jan 3, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Jan 3, 2023
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 740 Dec 31, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.3k Dec 29, 2022
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022