Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Nov 27 13:53
    davidsu06 commented #771
  • Nov 27 08:20
    berabulut commented #771
  • Nov 26 21:27
    davidsu06 closed #747
  • Nov 26 21:25
    davidsu06 opened #771
  • Nov 25 14:59
    sinanyaman95 commented #767
  • Nov 25 14:57
    sinanyaman95 commented #768
  • Nov 25 14:54
    arif-hanif commented #512
  • Nov 25 09:01
    bewithme commented #489
  • Nov 25 08:57
    bewithme commented #489
  • Nov 24 19:59
    berabulut commented #769
  • Nov 24 19:59
    berabulut commented #769
  • Nov 24 18:21
    berabulut commented #769
  • Nov 24 18:20
    berabulut commented #769
  • Nov 24 14:16
    AshishAvesta commented #750
  • Nov 23 13:07
    renato-bohler commented #770
  • Nov 23 07:32
    Sieusaosieungo edited #770
  • Nov 23 07:31
    Sieusaosieungo opened #770
  • Nov 20 13:48
    loucarpe edited #769
  • Nov 20 10:50
    loucarpe opened #769
  • Nov 20 10:02
    bebbi closed #758
Hi all, when I yarn install storm-react-diagrams, i get version 5.2.1, but that is not what i wanted. I want the latest version of it. anyone has any suggestions ?
what i am trying to say, how to migrate from 5.2.1 to the latest version
2 replies
Sirishnadh Sunkara
Hii guys i am new to this group, I want to get arrowhead for link in react-diagrams. can anyone help how to get this.
3 replies
Maxime Cloutier
Hey guys, I'm implementing a zoom in/out with buttons on my diagram and all works very well until I try to save the state. I try setting the zoomLevel with this.diagramEngine.diagramModel.setZoomLevel(this.state.zoomLevel) in my componentDidMount, but nothing happens even if my value is 25, the initial zoom will still be 100%. I tried to see if there was a way to pass it to the diagramEngine when creating the new instance, but it didn't seem to be possible, anyone has an idea?
3 replies
Volkan Akkaya
Hi everyone, Is it possible to display some hover card when I click a node or link?
3 replies
Everest Climber
Screen Shot 2020-09-16 at 4.03.58 AM.png
Hi everyone, is it possible to make this using react-diagrams?
If anybody has a similar experience, it would be great to provide some tips and guidance.
HI! I was wondering if is possible to create multiples Diagram Engine with its own body widget ? anyone has an idea?
Hi is there a way to disable the drag action of the CanvasWidget?
Hi everyone! Is it possible to display correctly links? Are there any libs or algorithms?
6 replies
Снимок экрана 2020-10-02 в 15.45.11.png
Снимок экрана 2020-10-02 в 15.42.37.png
Снимок экрана 2020-10-03 в 0.12.57.png
Hi all, is there a way I can specify a node by it's center location? I have a list of (x, y) co-ordinates and want to create nodes centered at each point.
12 replies
Noah Kettler
Hey everyone! Is there currently a way to set the width of the canvas after the initial render? Or is repaintCanvas() supposed to do that? I have a panel that collapses and I need to get the width of the canvas after it is collapsed.
Hello friends!
I tried to add react-diagrams to an existing react project and I got this error on page loading: "TypeError: Class constructor n cannot be invoked without 'new'"
here is where the pb happened
many thanks in advance for your insights
2 replies
Hi everyone! Perhaps there is some method for redrawing the diagram?
1 reply
Dylan Vorster
Boss is sleeping x.x
1 reply
Anwar Chakhar
Hi, anyone having issue with ml-matrix missing ?
even with 6.2.0 ... weird. I'll add it for now
Anwar Chakhar
My bad, the new version (without matrix dependency) has not been published yet
Hey guys, how do I dynamically update the canvas height and width using a react state variable? I tried to put the CanvasWidget inside a div with height as this state variable, but nothing is getting rendered.
5 replies

Hi! I want to add highlight ports can be connected (input to output, output to input) on creating new link, but I have problems with rendering it.

I have added a field (canBeChosen) to PortModel and updating all ports with correct value and then triggering canvas update:

// https://github.com/projectstorm/react-diagrams/blob/655462087f1f54eccb5e75f024be00efda674eab/packages/react-diagrams-core/src/states/DragNewLinkState.ts#L49 
this.engine.getModel().getNodes().forEach(node => {
    if(currentNode === node){
    _.forEach(node.getPorts(), (port: MyPortModel) => {
            port.canBeChosenHint = true;

this has no effect, but when I starting to drag node , highlights are shown.

Is there a way to trigger port rerender from PortModel or some other state propagation way?

Thank you!

1 reply
Sergio Duran
I'm working with a diagram which contains 3 nodes, 1 of these nodes has 1k items and ports inside, is there a way in which react-diagrams library has a good performance with up to 1k items inside? currently, it's taking more than 14s, so, I decided to use react-virtualized for the items but I'm getting issues with the links (very slow)
Snehanshu "Paul" Phukon

Hello guys, hope everyone is doing well.
I am working on a project that uses react-diagrams, but I am stuck at an issue.

So I have a simple functional compontent

import React from "react";
import "./styles.css";
import createEngine, {
} from "@projectstorm/react-diagrams";
import { CanvasWidget } from "@projectstorm/react-canvas-core";

export default function App() {
  React.useEffect(() => {
    // Do ajax request

  const node = new DefaultNodeModel({
    name: "Function",
    color: "#44355b"

  const engine = createEngine();
  const model = new DiagramModel();


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <CanvasWidget engine={engine} style={{ height: "100%" }} />

When I use useEffect to do an Ajax request, the canvas is freezed, but it works fine when the useEffect isn't there.

Why is this happening?

3 replies
Hi everyone! How can I connect custom nodes? I created a custom node based on the example (https://github.com/projectstorm/react-diagrams/tree/master/packages/diagrams-demo-gallery/demos/demo-custom-node1). But in this example, the custom node is connected to the default node. Maybe someone has examples of connecting a custom node with a custom node? I'm just beginning to understand this library. Thanks!
1 reply
Peek 2020-10-20 19-09.gif
1 reply
Hi Guys, I have an issue with the links when I move the diagram. I don't know if it's a problem with the css or maybe i'ts a problem in the links. I'm using the default links with custom nodes. Any help would be greatly appreciated.
madhulita reddy
Hii guys , How can i add a image instead of text in a node??
Vitalii Tokarchyn
@madhulita_gitlab Hi, you can create your custom factory inherited from "AbstractReactFactory" for nodes, with defined type, add it to engine. Now, when you will add "NodeModel" with the same type to the engine, the method "generateReactWidget" will be executed. There you can define any react component you want, or just import it from another module.
Oscar Kwan
Hey everyone, I'm implementing react-diagrams and trying to figure out the best API for my component to tell the consumer when the diagram's been changed. Any suggestions are appreciated. Thanks!
Oscar Kwan
Would it be something like this, or would this cause performance issues
    activeModel.getModels().forEach((item) =>
        eventDidFire: () => {
          // Fire a callback or action
1 reply
Hi guys , How can i create connection node ?
Hello, is there any workaround, to achieve group-like nodes at this moment? Some ugly hacks are possible, too
Hi @witqq basically i am trying to build sql query generator based on database table which is listed in ui. Once I drag table in playground node has to be created with both in and out port to support many-to-many.
Has anyone here had issues with the <svg> layer in the <CanvasWidget> component getting truncated? My diagrams are rendering properly but the svg layer only fills part of my viewport and the nodes get "squished" against this invisible boundary.
Would really appreciate any helphere
Mike Polowick

Hello! I'm trying to update the appearance of a custom node programatically in response to a system event. The <CustomNode> component accepts a state prop from the NodeModel options, something like: <CustomNode state={event.model.options.state} />. I can trigger an update with something like this:

aNodeModel.getOptions().state = 'running';
aNodeModel.setSelected(aNodeModel.isSelected() || false);

But that seems super hacky. What would be a better approach? I tried repaintCanvas() instead of setSelected() but it does not rerender the node component.

1 reply
Hi, how can I change all link / specific links to animated links (with "moving" dashed line) without selecting them (= without mouse click on the link itself)? Thanks
Hi guys, Is there a way to prevent creating a connection without port source/target? My use case is if a user initiates a link from the source, and drops anywhere beside any target port, the connection should be removed automatically.
1 reply
Loup Carpentier
Hey, I am looking for a concrete example of a Custom Node with a background image I can choose, like a PNG Icon, I tried some different things to get it done and my research lead nowhere so far. I am kind of new to TypeScript and JavaScript, may be that's why I can't see the way right now. Thanks for your answers =D

Has anyone here had issues with the <svg> layer in the <CanvasWidget> component getting truncated? My diagrams are rendering properly but the svg layer only fills part of my viewport and the nodes get "squished" against this invisible boundary.

For anyone else seeing similar behavior like this, it's due to CSS conflicts. Check out issue #666

Jen Duncan
I have a dialog that pops up when a user clicks a 'save' button. This dialog is meant for the user to save information about the nodes/links they just created. If the user clicks the backspace button within one of the textareas on the dialog, the link connecting two nodes (that had focus) on the canvas deletes. Anyone know how to stop this from happening? Thx!
Sinan Yaman
Hey guys, does anyone have a small example of a hierarchy tree that is implemented based on react-diagrams?