block by StewartNoyce 9962365

Network Diagram Editor

A small group met in the second period of the D3.unconf to discus Sankey/Alluvial Charts and Circuit Diagrams. They identified a shared interest in the editing and semi-automated layout of network diagrams, with arbitrarily complex nodes that could be arranged along edges with potentially cyclical paths. This gist captures features and requirements as discussed.

Later in the day, a few of us heard a session led by Anders Riutta on pathvisiojs, a JavaScript-based diagram viewer and editor for the WikiPathways project. It became clear that he might have already finished some of the features or have them under development. Anders will respond to the needs represented here, and projects can spin off as necessary to satisfy each person’s goals.

This is a gist that captures a moment in time. It is not intended to be a formal requirements document for an ongoing project. If you were there and want to clarify any part of this description, please send a change request to Stewart Noyce.

If you have an openly collaborative project that builds on the desires and needs represented here, send me the link to your repository and I will add it.

If you need a diagram editor immediately, try yFiles for HTML. It’s commercial software built for modern browsers with SVG and HTML5 and Canvas.

Finally, a short discussion took place on Google Groups in Sep 2012 on this very subject. Frank requested a complex network diagram example to satisfy five requirements (a subset of the list here). Worthy examples from Ger Hobbelt were provided in response. Check it out.

Typical Goals

Five different application goals influenced the conversation:

Product Vision

In order to create diagrams that meet our application goals, we want to display and manipulate complex network diagrams in JavaScript using D3 as a foundation. The required advance over present capability is the addition of specialized network layout algorithms and the ability to WYSIWYG edit the diagrams. The problem appears to break nicely into object primitive, automated layout, and WYSIWYG editor feature groups. Each feature group lists features with requirements in parentheses separated by commas.

Object Primitives

Automated Layouts

WYSIWYG Editor

Editor Usage Scenario

Participants: