0

I'm hoping someone can help or point me in the right direction. I have been doing a lot of research but have not found anything that fits. I would like to make an area where you can drag and drop objects then connect them with arrows to show order.

I would like it so that you can drag and drop unlimited amounts of objects. Then be able to click on a "+" or something to then start to draw an arrow to the next object.

Quick summary for the overall project, I would like to eventually make a flowchart where it can branch off in two directions for decisions but have objects that I can drag out and then draw an arrow to the next object.

Libraries and articles

  1. I found this article that I tried to follow, but I couldn't get it working, but this is a good representation of what I am looking for if it is modified to be done when clicking not just drawing.

  2. I know about jsplumbtoolkit but I do not have that kind of money, also they do a lot more than what I would like to do.

  3. I have seen the react-js-diagrams that seem to be what I want but have not been able to get it to work.

Image of what I would like enter image description here

V. Sambor
  • 12,361
  • 6
  • 46
  • 65
laxer
  • 720
  • 11
  • 41
  • check this answer: https://stackoverflow.com/questions/37265654/konvajs-how-to-connect-two-shapes-with-an-arrow – V. Sambor Sep 14 '18 at 23:02
  • Thank you for the response. That looks like a good place to start. I have been reviewing the documents for Konva, is there a way I can start to draw the arrow with a mouse click and finish with the tip of the arrow over the second circle? – laxer Sep 15 '18 at 01:01
  • you should find all you need in the konva documentation, they have also nice demos: https://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html – V. Sambor Sep 15 '18 at 09:02

0 Answers0