If you are to build a specific online diagraming solution in 2020, what JavaScript library/framework would you use?
The features expected:
- select shapes
- move shapes
- resize shapes
- click events
- glue to lines
- snap rules
- change shape color/style
- complex (custom) shapes, grops
- change shape text (preferably with format, i.e. bold/italics)
- programmatic shape access (like change data graphics, colors/styles, dynamic icons)
- load/save
Options I have seen
d3.js (https://d3js.org/) (raising the sun manually)?
svg.js (https://svgjs.com/), snap.svg (http://snapsvg.io/) (any better)?
Raphael.js (https://dmitrybaranovskiy.github.io/raphael/), Draw2d (http://www.draw2d.org/draw2d/), bonsai.js (https://bonsaijs.org/)(outdated, no updates for a long time)?
MxGraph (https://jgraph.github.io/mxgraph/) (examples (https://jgraph.github.io/mxgraph/javascript/index.html), aka draw.io) - looks like a monster, but maybe I am wrong?
Fabric.js (http://fabricjs.com/), Paper.js (http://paperjs.org/), go.js - looks promising, but uses canvas (hard to debug)?
Rappid (jointJs) (https://www.jointjs.com/), GoJS (https://gojs.net/)- looks kind of promising, but not open source (binds you to a vendor)? Are they okay?
Lucidcharts, Visio - no custom code/plugins? (the API only reads information - am I wrong)?
Java anything is just so early 21st century. Wasm.
Sounds good, but do we have something usable in wasm? ???
I'm looking now at mxgraph actually (mxgraph-js)..
https://jgraph.github.io/mxgraph/javascript/index.html
Given your requirements, I would be real surprised any of those will work.
As far as I can tell, the current flavor of the day (lucid chart, draw.io, inkscape, etc) is more for static shapes
(no smart shape capibilities other than writing a script that to be invoked...same for shape data)
(even all those cool Amazon 3D shapes were done in adobe then imported to draw.IO as static images)
As obtuse as visio is RE shapesheet or VBA, those features differentiate it from most others.
Though proprietary, smart draw and EDraw might provide what you want.
of course, there 100s of half backed projects from GitHub (its the new "lets write a compiler over Christmas" exercises)
vojo, thank you for the answer!
I am assuming I do write some (java)script for "smart" capabilities, I don't expect to get them for free (although it would be good of course) ;)
The point here is choosing some basic "framework" or "platform" or "library" so the things listed in the first post are less painful to implement.
The diagrams for this particular case are pretty simple. Therefore, I'm pretty optimistic and think it's doable in a browser.
The efforts required and the usability/user-friendliness of the result is the question...
Also, aren't EDraw and SmartDraw desktop applications? Then this is unfortunately out of the question for me...
I'm looking for a web-only thing.
BTW, updated the links in the starting post
Been playing with the same idea.
Why at all?
- Because I have no Visio licence on my private computer, but need some drawing tool
- Because it would be a real enrichment of the opensource ecosystem to have a real Visio alternative (focus on data and formulas, rather than the drawing itself)
Why Javascript (not java as Paul wrote)?
- Because imho Javascript has the best GUI libraries out there. Freely available via npm
- Browser based SW is in the trend
What free projects to pick up and reshape to you own needs?
- DrawIO looked quite promising - as finished project. Downside: It produces only SVG without JS smartness.
- Inkscape ??? Not a JS SW. Too big?
- FreeCad - written in C++ and Python. Drawback Drawing engine too focused on 3D-Modelling
JS-Graphics Libraries:
- P5.js good enough for drawing, can under certain circumstances handle SVG. You need separate libraries for serialization, GUI, etc.
- d3.js is certainly not suited. Too big, too fosused on complicated and code automated graphics
- If you want to have the app also as desktop SW, electron is a great solution (file handling, runs as native app in a chromium instance
What I opted for (because I'm still on my Python path) :Qt
- https://www.qt.io/ (https://www.qt.io/)
- https://doc.qt.io/Qt-5/examples-graphicsview.html (https://doc.qt.io/Qt-5/examples-graphicsview.html)
It comes in its original flavour as C++ library, and as Python adaptation called PyQt5.
Brings a lot of features:
- DOM - you can access your app from other software (.Net, VB, Python, ...)
- Editing history with undos
- Object oriented - you can subclass the original classes and add formula parsers to realize what really makes Visio special, user controlled data for graphics
How far am I right now?
- Wrote a GUI for single and multiple documents, with docking windows for properties display and so on
- Collected snippets for drawing, selecting and resizing
- Now struggling with setting up the DOM architecture, History management, Data structure for serialization. The parser is probably (hopefully) the easier part.
So far for my 2 cts.
Cheers,Y.
PS: Qt does also web stuff
Qt is a great choice, but IMHO, for desktop software ;) The thing is, for desktop we already have Visio, that can do everything in the list above, and so much more ;D
Not my case unfortunately. Only web. Something that runs in any (relatively modern) browser.