Web-based mimic drag-n-drop diagram editor&viewer

Question

I'm looking for a modern open-source tool, that provide web-based interface to create diagrams. Diagram editor implemented with drag&drop.

Requirements:

• viewer & editor interface,
• editor should implement drag&drop interface,
• shapes should implement states and allow to attach behavior to it - like run/stop animation or change color on state change,
• shapes should provide interface to attach custom user data, like another tag attribute and set it's value,
• import new SVG-shapes made with popular editors like Inkscape, CorelDRAW etc. This is the major requirement!

I've found mxGraph, specifically this example: https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html

And I'm stuck with importing custom SVG shapes. The problem is mxGraph uses it's own XML-like format and provide very basic SVG->XML converter. This converter support very limited list of SVG tags.

For example it can't convert Lamp symbol from Wikipedia properly, nor my own Inkscape sketches: https://commons.wikimedia.org/wiki/File:Lamp_symbol.svg

Besides, despite the fact mxGraph's implementation level is very high, it would be better to have a tool that based on something more present day and popular like node.js or something. But it's just an opinion, not a requirement.

I have same problem with pretty new and shiny draw2d library from FreeGroup: https://github.com/freegroup/draw2d_js.shapes

It uses Raphael.js, so I've tried to use several SVG->Raphael.js converters, but faced exactly the same problem.

So I'm looking for a tool that can use present days SVGs. Or a proper SVG->mxGraph/raphaeljs/draw2d converter.

UPD1: I had an idea to check: Simple SVG easy to convert. So I've found several SVG optimizators/concatenators at github.com: https://github.com/svg/svgo https://github.com/LinePod/SvgConverter https://github.com/icons8/svg-simplify https://github.com/perplexed/SVGsimplify

Non of them made SVG, that could be easily converted to mxGraph/Draw2d.

UPD2 I've tried fabric.js for the same purpose. It can easily use and animate simple SVGs. It can use complex SVG. But animation available only for single-color SVG. By default fabric.js doesn't work with 'filter' tag from 'defs' section which implements all animation in my case.

Answer 1

Best fit for this task is joint.js. It can successfully load SVG images and manage filters. Animation and events can be attached by simple javascript. This package is free.

Commercial Rappid, which based on joint.js, can provide you d&d editor and a lot of other features.

Answer 2

Essential Diagram EJ 2 for JavaScript supports creating any kind of diagram with SVG nodes and connectors. The library is open source, but not free. A community license is available (details below)

Example

• viewer & editor interface: Yes. Diagram can serve as Editor and Viewer.
• editor should implement drag&drop interface: Yes. Drag and drop is supported from Symbol Palette and also within Diagram.

• shapes should implement states and allow to attach behavior to it -There isn't a separate property for maintaining the state for the node . The object property addInfo can be used to save the data/state about the node. Diagram events can be used to capture the node properties , from which we can use the data/state which we saved in addInfo of the node . Documentation link for connector

• import new SVG-shapes made with popular editors like Inkscape, CorelDRAW etc. This is the major requirement! Yes. Import of SVG into Diagram or through the Symbol Palette is possible. The above example allows for loading any SVG.

• It can use complex SVG with animation: Yes. Animation works with this svg for example.

The whole product is available for free through the community license if you qualify (less than 1 million USD in revenue).

Note: I work for Syncfusion.