Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • May 21 18:39
    amith2368 commented #933
  • May 21 18:39
    amith2368 commented #164
  • May 21 18:37
    amith2368 commented #164
  • May 19 21:26
    amonrperes opened #946
  • May 18 11:47
    Hkbm77 opened #945
  • May 18 10:22
    Hkbm77 commented #322
  • May 18 10:21
    Hkbm77 edited #944
  • May 18 10:20
    Hkbm77 opened #944
  • May 18 07:42
    Hkbm77 commented #322
  • May 17 06:50
    wevek commented #415
  • May 17 06:40
    wevek commented #415
  • May 14 06:17
    CamilleHbp commented #842
  • May 12 02:17
    Ad-Bean closed #942
  • May 12 02:17
    Ad-Bean commented #942
  • May 10 09:14
    ToTheHit opened #943
  • May 10 07:53
    FarajMujey commented #715
  • May 09 09:05
    Ad-Bean opened #942
  • May 09 09:03
    ToTheHit opened #941
  • May 08 19:14
    ToTheHit edited #940
  • May 08 19:06
    ToTheHit edited #940
Anders Jürisoo
Im working on a package: https://github.com/ajthinking/data-story
At the moment it is bundled with php/Laravel but I'm extracting a pure JS version to put on github pages soon. Maybe it can be some inspiration for someone or if you have feedback or want to collaborate that would be awesome :)
Guys: I setup a container based development environment for React-Diagrams here: https://github.com/RomanoViolet/React-Diagrams-DevSetup. The idea is get a developer to useful stuff very quickly.
And now I need help: I want to use the typescript based interface, and playing around, I found that stuff like resizing the "boxes" is not working for me: I thought that this line would be sufficient. I am new to web development, but noticed that changes to color work without any issues. Obviously I am missing something fundamental. Can someone please help?
If I interpret the react-diagrams code correctly it derives from react-canvas. In the react-canvas repo I find a HistoryBank which enables an undo and redo via engine.getHistoryBank().goForward();. Is this available in react-diagrams as well? And how do I access the HistoryBank?
I'd like to have a central error message handling: showing messages to user if not compatible nodes are connected or too many connections are established. One way would be to fire events. But if I got this correctly I'd need to bind a listener to each port. Is there a way to send/propagate/... information from the canLinkToPort to my component containing the CanvasWidget?
Hey, can you help me? I have nodes and link with arrow or two arrows in the on line (TransitionLinkModel extends DefaultLinkModel) but when I drag node sometimes I didn't see arrow, becouse arrow in In-Out Port (I use DefaultLinkModel ) in left side on node and during the drap it's behind node ... when I use RightAnglePortModel I coun't create arrow in line
I plan to open source code soon
Dylan Vorster
hot damn :O
thats sexy

Hi, Guys)

Does exist any ability to lock offset functionality. I mean, when we press on the empty area of the graph by left mouse button and while holding it we can move across the graph, do we have an ability to disable this functionality?

1 reply
Sinan Yaman
Hey guys,
I wanted to get the links to show above nodes, and changed the z-index of the svg to 1. However, now I can't link two ports, as they are behind the link layer. Any fixes for that?
@/all @dylanvorster @renato-bohler @m-brantheim @imaGuru Hello I would like to ask how is it possible to register new custom states in the state machine. I see that in the package react-canvas-core there is a class named AbstractDisplacementState which I could extend and create my own states. (which can be triggered by a set of actions made by the user as I understand correctly). So my question is if I create a new state. How can I register it in the StateMachine? Can you point me to a code example or write me back a quick high level info? Thank you in advance for any help!
6 replies
@all @dylanvorster @renato-bohler @m-brantheim @imaGuru Hi guys....I have a quick question. I just start work with projectstorm/react-diagrams but problem is when I install everything from the documentation a I have this error:
Could you please help me with that?
@Andrej-jigx check projectstorm/react-diagrams#598
@SQLGate already open sourced?
Hello, i want to create editable chart for editing questions and answers. somehow i find it not simple. maybe someone can assist. my code is here - https://github.com/urgent/jolene/tree/master/src. the target editable chart i am trying yo create described at this pic - https://drive.google.com/file/d/1KEtZtTvVfL5BwHQTWbzKLVFPvbiWIZNF/view?usp=sharing . is there anyone that can assist to get to this goal ?
Anders Jürisoo

Hi @ygrossm, cool idea! Not sure I will be able to assist very well as Im new to TS.

Anyways, I did implement a similar dynamic port thing, where ports are created from an array. Maybe you can find some inspiration there (even though its not perfect)

Also shouldn't you be using your own models? In the factory and a few other places you refer to the default models?

Good luck :)

Renato Böhler

Huh, just discovered that PostgreSQL pgAdmin4 project uses react-diagrams hehe


Good stuff
Vamshi Krishna Chippa
Hey All,
Where can we set allowLooseLinks={false}
2 replies
Vitchenko Vladislav
Hello! Does anyone know why when we call generateModel here we do not pass initial config like we do when we generate layer or node? NodeModel.ts from react-diagrams-core on screenshot
Hemant Ranvir
did anyone find solution for this?
Vishal Diyora
Hey Guys, This is awesome library. I'm creating custom node and custom link using the demo in the demo https://github.com/projectstorm/react-diagrams/tree/446cc8cdffc506adb9a7a2b9466dfe6b6bcd42e3/demos/demo-custom-link1 and https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project .
I have couple of questions.
Can I create a link without creating port between nodes?
Can I have N number of links at different location in the nodes?
Attached design above
Sinan Yaman
The smart routing example on the storybook doesn't show any links? Is it getting updated?
Dylan Vorster
Probably a regression after the updates i did a few days ago
Ill look later today
Big Bad Waffle

Hi all! Quick (fairly common I bet) question...

  • I have a custom node with a function on the model to update a property
  • I'd like the widget to be redrawn afterwards
  • What is the correct pattern to do this?
  • Calling repaintCanvas isn't doing anything but manually dragging the node DOES cause the changed option value (it's displayed in the widget) to appear
  • Calling repaintCanvas in a setTimeout also doesn't work
  • The node I'm modifying is currently selected
  • Deselecting the node performs the redraw
  • Overriding performanceTune to return false on the model doesn't work
  • Calling model.clearSelection() DOES work

Thanks in advance!

9 replies
Vamshi Krishna Chippa
Hey @renato-bohler,
Could you pls help me out to built right click options on node. I guess you made it in your project for copy, paste, zoom etc
Hi guys can some1 help me? How can I create my custom node with name, inputs and outputs. I check every demo but I’m still litle confused. Can some1 make tutorial or documentation abou thath?
Is there a close-to-step-by-step setup instruction for beginners? Sorry but current doc is just not clear enough... Having same problems when trying the demos as @EbiPenMan mentioned above... Thanks!
Hi Everyone, Could someone please tell how to access the connected ports in the format of json. The user connects different ports. At the end of the task, how can I know the connections between the ports.
3 replies

Hi Everyone,

is there a way to drag node on link and auto-connect to that link?

Let's say i have a two nodes Node1 and Node2, and both the node are connected with default link (link1). Now i also have another node named as Node3, which is not connected to any link.

When dragging Node3 and drop on link1, Node3 should placed between Node1 and Node2 and connected to link1.

How to achieve this. Please help me.

Hello! Is it possible to selects a link and then presses the keyboard delete \ backspace key in order to delete it? How can I implement it?
2 replies
Hi everyone! Is it possible to change the font of a single port in a node?
1 reply
Anders Jürisoo

Problems migrating to TS

Im migrating my react-diagram app to TS but have issues when inheriting from react-diagrams classes. Here is my PortModel.js:

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

export default class PortModel extends DefaultPortModel {
    constructor(options) {
            // Make id easier on humans
            id: `Port_${options.name}_on_${options.parent.options.id}}`

After renaming it to PortModel.ts I get this message

Class constructor DefaultPortModel cannot be invoked without 'new'

It seems I have some transpilation/versioning issue. Though I have lots of TS other files migrated already and it works fine...



    "compilerOptions": {
      "module": "commonjs",
      "removeComments": true,
      "preserveConstEnums": true,
      "sourceMap": true,
      "lib": [


    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],

Any remedy for my situation?

2 replies
Hi everyone, I am working on a diagram with 700+ nodes. It seems during deserialization, the performance drops significantly. It takes more than 40 seconds to load the graph. Anybody else facing the same problem? How can I enhance the performance?
1 reply

Hello! I picked up the lib today and doing quite well. I'm trying to see if it is possible to only export nodes + their links to .json. Using serialization makes a massive file and i'm having a hard time reading through if theres anything like I want in it.

If anyone knows or could point me in the direction to export only nodes and their links to .json, it would be a great help.


ps: using custom nodes if that makes a difference

5 replies
Anders Jürisoo
carbon (6).png
Sara Quispe
Hello, I'm trying to make a project which have multiples CanvasWidget, but the performace for the others was too bad, there some ways to render multiples engines ?
Hi. I'm trying to create an insepctor form where I can edit data within a node. I can store the selected node in a Redux store but I was wondering what the best way of updating the diagram is after editing data in the form.
1 reply
Anders Jürisoo
How can I extend the setLocked method to also prevent zoom/drag? Pseudo of what I want: image.png
Aymen Marouani
Hi all,
Thanks for the awsome library and the sharing on that chat room.
I'd like to ask a question
I want to delete a link in a given diagram
The combination SHIFT + LEFT CLICK + DELETE works very well