Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 14:57
    Antoninecek closed #628
  • 14:57
    Antoninecek commented #628
  • 13:05
    renato-bohler commented #749
  • 11:49
    vivekshah-zymr commented #749
  • 11:48
    vivekshah-zymr commented #749
  • Jan 25 20:15
    LuisEgan commented #746
  • Jan 20 16:16
    challamalla commented #799
  • Jan 15 00:46
    yuliolinares opened #917
  • Jan 13 13:49
    LiKaiChang commented #850
  • Jan 13 13:42
    LiKaiChang commented #850
  • Jan 13 13:39
    LiKaiChang commented #850
  • Jan 13 04:02
    HatWeight closed #910
  • Jan 06 12:44
    serjikus22 commented #375
  • Jan 06 08:56
    mengjie0320 commented #916
  • Jan 06 08:56
    mengjie0320 closed #916
  • Jan 06 08:56
    mengjie0320 commented #916
  • Jan 05 16:30
    carb synchronize #915
  • Jan 05 16:18
    carb synchronize #915
  • Jan 05 07:09
    mengjie0320 opened #916
  • Jan 04 17:31
    carb commented #915
Daniel McQuillen
Any strategies for best handling a 'print' function? As a first go, I'm working with zoom to fit but realizing that I also need a recalibrate to upper left kind of operation...(or maybe there's an easier approach?)
Ishtiaq Ahmad

Hey Everyone. lot's of respect for everyone who is in this community.
i am drawing a projectstrom/react-diagrams. I tried creating a view, by following the instructions at
i have develop 3 nodes manually. but now i want to create dynamically nodes through map function. i am not getting an idea that how i do this.any one help me please.
below is my code.

import createEngine, {DefaultLinkModel,DefaultNodeModel,DiagramModel } from '@projectstorm/react-diagrams'
import {CanvasWidget} from '@projectstorm/react-canvas-core';
import '../App.css'

const MindMap = () => {
const engine = createEngine();
const node1 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)',

node1.setPosition(100, 100);
let port1 = node1.addOutPort('In');

// node 2
const node2 = new DefaultNodeModel({
name: 'Node 2',
color: 'yellow',
node2.setPosition(59, 50);
let port2 = node2.addOutPort('OUT');

const node3 = new DefaultNodeModel({
name: 'Node 3',
color: 'rgb(0,192,130)',
node3.setPosition(80, 6);
let port3 = node3.addOutPort('Out');

const link = port1.link(port2);
const link1 = port1.link(port3)

// link.addLabel('Hello World!');

const model = new DiagramModel();
model.addAll(node1, node2, node3, link, link1);

return ( 
<div style={{height:'100vh', width:'100%', backgroundColor:'aliceblue'}}>
<CanvasWidget className="canvas" engine={engine} />


export default MindMap

Are there any recommendations of how to use background elements, I'd like to group nodes in the layout.
One way could be to just add some customized Nodes first so they are rendered below all other nodes. But that would require the possibility to lock the specific background nodes, regular nodes should not be locked. Or if there are events like OnClick, OnDrag, that can I can prevent for those nodes to be "locked".
Or are there any other approach more suitable for my usecase?
Or can the engine take an array of node-models so that the layout can be layered?
(Please let me know if there are any detailed documentation where I can find the asnwers myself)
Hello all, is there any easy way to migrate the old version (storm-react-diagrams) to the new version(@projectstorm/react-diagrams)?
Hello! I am having some performance issues. I do not know If I have reached the top for this library. I have a project where I have 400 nodes and 7000 links. Even without the connectors I am having problems.

Hi everbody!

I'm having the autocomplete input issue only in Chromium based browsers (Chrome and Brave).
If I've tested in Safari and Mozila using Mac OS and in that browsers doesn't have any problem.

This issue appear, for example, when I add a input with a datalist bellow to a react diagram in another div and choose one option of autocomplete option:

<input list="listExamples">
   <datalist id="listExamples">
           <option value="PETR4" />
            <option value="VALE4" />
            <option value="Internet Explorer" />
            <option value="Chrome" />

In that example above, if I use a keyboard or mouse and choose a autocomplete option like "PETR4" on chromium browser based, it will throw the error:



Can anyone has any idea to help me with this issue?

Captura de Tela 2021-09-20 às 20.51.05.png
Captura de Tela 2021-09-20 às 20.35.13.png
Captura de Tela 2021-09-20 às 20.36.51.png
These images above is about that issue.
It is also showing in issue #642: projectstorm/react-diagrams#642
Kuba Szymanowski
Is there a built-in way to edit nodes (the name for example) or do I have to implement it manually?
If there is no way to do it out of the box, is there some example of how to extend a node to add for example an edit button or a button to add new port?

Hey @KKSzymanowski ,

To edit nodes, you've to implement it manually. Just put a edit and use the onChange event. For example:

onChange={(e) => {
                             // node receive value of edit
                              node_example.options.name = e.target.value;
                             // refresh diagram with new node name


I'm using dagre to distribute the nodes in the diagram. I randomly place the nodes and "autodistribute" them:

import {
} from '@projectstorm/react-diagrams';

import centerModel from '../Actions/centerModel';

const reroute = (engine) => {

const autoDistributeNetwork = (engine, useGraphOptions = true) => {
  const graphOptions = useGraphOptions
    ? {
        rankdir: 'TB',
        ranker: 'longest-path',
        marginx: 50, // margin of whole diagram
        marginy: 50, // margin of whole diagram
        nodesep: 200, // minimum x distance between nodes
        ranksep: 100, // minimum y distance between nodes
    : {};

  const distributionEngine = new DagreEngine({ graph: graphOptions });


Additionally I have a sidebar which can pull in from the side and shrinking the canvas. On this action the nodes on the diagram "crumble" together in the state they used to have before "autodistribution" kicked in. And it keeps in this state. Calling autoDistributeNetwork has no effect on the layout. Even dragging and dropping has no (coordinated) effect (the nodes get picked randomly and dropped at weird places).

Does anyone encounter this problem as well? How can I get around this?

1 reply
Aymen Marouani
Hi All,
Aymen Marouani

Simple question, I'd like to ask about the property added to DiagramWidget called inverseZoom to inverse the behavior of the mouse's zoom wheel(see projectstorm/react-diagrams#95): actually, I'm using CanvasWidget which came after DiagramWidget with a react-diagrams version 6.5.2 as following `

<CanvasWidget  engine={engine}/>

Does any one have an example of how to add the property inverseZoom to work with (code please) ?
Thanks in advance.

1 reply
Hi There, I need help on adding html content in nodes and ports
Can anyone provide inputs on this ?
projectstorm/react-diagrams#27 Kindly help here?
Aaron Michaux

So... when I add repaintDebounceMs to the engine options, it sometimes disables panning the CanvasWidget.

  const engine = createEngine({
    registerDefaultDeleteItemsAction: false,
    repaintDebounceMs: 50

Anyone else seen this?

Aaron Michaux
For anyone out there, the problem went away when I patched engine.repaintCanvas, so that debouncing happens on the leading edge of the timeout.
Sinan Yaman
Hey fellow developers, does anyone know if there is a way to get the ids of the visible ports (i.e. not zoomed out or dragged out of view from canvas)?
Hey folks, I'm just getting started with react-diagrams. I'm following the demo project for custom node widget/model/factory. I've written a custom node model, extending NodeModel, and in overriding the deserialize function I'd like to provide the type for the event parameter - but auto imports aren't working for some reason. So, where can I import the DeserializeEvent from? And should I use it like this:
deserialize(event: DeserializeEvent<CustomNodeModel>) {...}
Malav Shah
Hi Guys, I have integrated this lib in my project which builds using vite and is monorepo. Now facing issue in building production build.
Any help will be appreciated. Thanks in advance.
your problem is when trying to assign null the variable in your declaration, try:
var node: DefaultNodeModel;
I'm sure it will work for you!
Andrii Zhyvchyn
hi all!
Does someone know how I can change target port with mouse?
I tied to .setTargetPort(null) on link, but this not attach link to mouse movements
K Wood
Hello everyone!
I'm trying to get the diamond node model demo working, but it gives me an error using it as written when running it through create-react-app's npm start script
Error: Cannot find factory with type [diamond]
More specifically I'm trying to use this with the drag and drop demo, and I've got it showing up in the tray on the left hand side, but when I drag it on to the canvas I get the error
How do you let your app know how to find the factory for it?
K Wood
Got it! Instead of defining engine as new CreateEngine, I needed to use this.props.app.getDiagramEngine()
Hey there - it seems like the repo has quite a few open issues and hasnt been updated in 20 days - is this project dying? Not trying to be negative, but is project storm working on this anymore?
Dylan Vorster
i work on it when i get time
I have a project coming up shortly that will see it have some activity soon
Jeremy Kuhnash
does anyone have working directions on how to build a standalone project?