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.

up vote 0 down vote accepted

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.