6

I'm searching for a framework to create and edit flow-like diagrams, as done in sites like Google Drawings, www.draw.io (open source), Gliffy, and LucidChart

Most important features required:

  1. Draw simple elements (rectangles, ellipses)
  2. Create connections between the elements
  3. Being able to change how connections look, and add decorators to the connections
  4. Easy editing, moving, resize of the elements, change connection start/end point, etc.
7

Have a look at GoJS

It's a JavaScript library that ought to be able to do everything you expect with Diagrams:

  • Use templates for Nodes, Links, and Groups, can be arbitrarily complex and include custom shapes/geometres
  • Support for user-created links with arbitrary link validation
  • With links, Orthogonal and Bezier link routing with "Avoids Nodes" and "Jump Over" options
  • Data binding with JSON data
  • Intuitive Drag-and-Drop & Copy-Paste functionality
  • Unlimited extensible Undo and Redo
  • Mouse and touch support with customizable tools
  • Automatic layout of graphs
  • Palettes and Overviews

GoJS doesn't have a drawing tool built-in, but it is easy to create one, and there's a showcase of a few possibilities here.

  • Does it allow to "add decorators to the connections"? A screenshot of that would be great :-) Please similarly address every bullet point of the question. Also, as required by meta.softwarerecs.stackexchange.com/questions/356/… would you mind disclosing your affiliation, and stating what is the license of this solution? Thanks! – Nicolas Raoul Oct 4 '18 at 3:31
0

I recommend you a D3.js. It uses HTML and SVG - API is reach.

Another recommendation is Raphael. It also works with HTML and SVG

In both you can create primitives, connect them. They can also handle interactive.

0

Essential Diagram for JavaScript supports creating any kind of diagram.

  • Draw simple elements (rectangles, ellipses): Supported
  • Create connections between the elements: Supported
  • Being able to change how connections look, and add decorators to the connections: Supported
  • Easy editing, moving, resize of the elements, change connection start/end point, etc.: Supported.

The whole product is available for free through the community license if you qualify.

I work for Syncfusion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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