Search code examples
webdiagramblock-programming

Is there a framework for diagramming?


Lucid chart (https://www.lucidchart.com/) is a popular site that allows you to create your own diagrams by dragging and dropping nodes and connecting them with lines.

Similarly, I plan to develop a site that will allow users to create nodes and follow them with lines to do visual programming. Are there any existing frameworks that allow users to draw diagrams visually and connect(or associate with line) them to specific actions? (I do not want to code lines that do not twist or bend better than wires between nodes, but I want a framework that does all of these things automatically.)

Or should I use the diagram libraries like gojs, jointjs and the rest (program code behavior, linkage, etc.) to create the code one by one by hand?

What I am about to make precisely is similar to Scratch(https://scratch.mit.edu/) with a block coding style, and the key is to programming and run nodes by connecting them with lines.


Solution

  • You already found a few frameworks for diagramming and there are more listed here on SO.

    Some of them should be able to help you with your task, while others aren't so customizable. My personal recommendation would be yFiles for HTML, because it provides the most complete customization options, but if this is not in a commercial context or you want exactly what scratch already does, then you should be looking at the JavaScript implementation of it on GitHub.

    Be sure to come back here with more concrete coding options, since a question like this is actually way to broad in scope for SO and thus likely to be closed, soon.