Graph Editor

For some time, I have wanted to have a visual graph editor, somewhat along the lines of OmniGraffle, that I could use to generate graph descriptions (eg, CG, ORM, RDF). It would also be useful for the editor to be embeddable in apps, etc.

I've considered hacking something up in SVG, but that always seemed rather painful. However, D3 removes much of the pain of dealing with SVG. Also, conveniently, a client has asked me to look into prototyping a minimal graph editor for use in their app.

So, I'm thinking about getting started. Any and all clues, ideas, or notions are welcome!

Diagram Editors

A Customizable SVG Graph Visualization Engine (web-based; unknown)

This is a paper on a student project.

Cytoscape Web (web-based; Lesser GPL)

Cytoscape Web is a network visualisation library that you can use to embed networks onto a webpage. It is not a stand alone application for users; it is a tool for developers to display networks on the web.

Cytoscape Web uses a Flash library via a JavaScript API.

Dia (desktop; GPLv2)

Dia is a GTK+ based diagram creation program for GNU/Linux, MacOS X, Unix, and Windows, and is released under the GPL license.

Dia is roughly inspired by the commercial Windows program 'Visio,' though more geared towards informal diagrams for casual use. It can be used to draw many different kinds of diagrams. It currently has special objects to help draw entity relationship diagrams, UML diagrams, flowcharts, network diagrams, and many other diagrams. It is also possible to add support for new shapes by writing simple XML files, using a subset of SVG to draw the shape.

Diagramo (web-based; mixed)

Diagramo is based on HTML, JavaScript, MySQL, and PHP.

Diasketch (web-based; unknown)

Create astonishing diagrams right in your browser; let others view or change them without any need for a special tooling. Access your diagrams even from your mobile device.

This seems to be an unreleased product or service by the author of JointJS.

Gliffy (web-based; proprietary)

Easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, and more!

GoVisual Diagram Editor (desktop; proprietary)

The GoVisual Diagram editor (GDE) provides powerful functionality for editing and automatic layout of diagrams. Diagrams are represented in form of graphs and cluster graphs. GDE contains all the layout styles available in the GoVisual libraries.

Graphity (web-based; proprietary)

Graphity is a diagram editor that can be used to quickly and effectively generate drawings and to apply automatic layouts to a range of different diagrams and networks ...

OmniGraffle for Mac (desktop; proprietary)

Need a diagram, process chart, quick page-layout, website wireframe or graphic design? OmniGraffle can help you ...

Online Diagram Editor (web-based; proprietary)

This is a lightweight diagram editor that can work within a browser. It can be embedded in a web page and communicate with the surrounding application code.

The user can create Objects and their Relations, and associate with them custom application properties. The resulting diagram can be saved for further editing or exported in PNG format for presentation.

The developer can request the diagram structure in JavaScript to analyze it instantly, or save it on the server in a file or database. The diagram image can also be requested in JavaScript and saved on the server.

The editor uses a Java applet, controlled by a JavaScript API.

Sketsa SVG Editor (web-based; proprietary)

Sketsa SVG Editor is a cross platform SVG vector drawing application. With Sketsa, you can easily draw SVG vector graphics that can be scaled and printed at any resolution, without losing detail or clarity.

Visio (desktop; proprietary)

The advanced diagramming tools of Visio 2010 help you simplify complexity with dynamic, data-driven visuals and new ways to share on the Web in real time.

Start by building your diagram with professional-looking templates and modern, pre-drawn shapes.

yEd Graph Editor (desktop; proprietary)

yEd is a powerful desktop application that can be used to quickly and effectively generate high-quality diagrams. Create diagrams manually, or import your external data for analysis. Our automatic layout algorithms arrange even large data sets with just the press of a button.

JavaScript Libraries

JointJS (web-based; MIT)

JointJS is a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams.

JointJS is based on Raphael.

jsPlumb (web-based; MIT, GPLv2)

jsPlumb allows you to connect elements on the screen using SVG, Canvas or VML, depending on the capabilities of the browser. It can be used with jQuery, MooTools or YUI3 (or another library of your choice if you feel like implementing an adapter for it).


This wiki page is maintained by Rich Morin, an independent consultant specializing in software design, development, and documentation. Please feel free to email comments, inquiries, suggestions, etc!

Topic revision: r2 - 25 Apr 2012, RichMorin
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email