Is there any good IDE or WYSIWYG editor for graphviz?

Question

Actually I had downloaded an GUI for graphviz (dont remember the site), which said that they had won an Apple Design Award. But that tool really only displays an *.dot file I created. That's it. It's just called "Graphviz"... I guess that there are better tools around for using the Graphviz technology.

I tried this one: link text

Although they say that they won an Apple Design Award, I really can't see any special GUI there. Very poor interface.

Solution 1

The current version of Graphviz.app does not contain the "external editor" button shown in rampion's screenshot above - Or the Render/Stop buttons, and it has replaced the "settings" button with "attributes". However, it can be used as described.

I downloaded 'graphviz-2.27.20101110.0545.pkg' from http://graphviz.org/Download_macos.php. Note that there are several places to download various things which call themselves Graphviz:

• http://graphviz.org/Download_macos.php
• http://graphviz.org/Download..php
• http://www.pixelglow.com/graphviz/download/

Use the first one, I chose the most recent development snapshot - A glance at the mailing lists (interest and devel) reveal that it's still pretty active, which you wouldn't know from the pixelglow sites that still have "Content coming soon" messages from 2004.

Anyways, when 2.27 is started, it throws up an "Open" dialog. Opening a .dot file will show a graph, but cancelling reduces you to nothing but a menu bar. Don't be dismayed, create a file with the text

graph graphname {
}

and call it something.dot.

Open that in Graphviz, and you get a GUI with an empty graph:

Type in some more text into the file, like this:

graph graphname {
  a -- b -- c -- d -- a;
  a -- c;
  b -- d;
}

The Graphviz window automatically updates when you save to show this:

There are a plethora of options in the "Attributes" toolbox, but it looks like they want you to edit the source by hand. I kind of expected "Add vertex" and "Add edge" buttons, and the ability to move vertices around, but that's not what it's about, apparently.

So, apparently, the WYSIWYG editor is your favorite text editor on one side of the screen, and Graphviz on the other. As far as an IDE goes, it looks like the best thing available right now is a printout of the documentation for the DOT format. Not everybody's idea of a WYSIWYG editor or IDE, but it probably works for active users.

Solution 2

Graphviz.app has a command to open the current dot file in an external editor. If you use that, it will monitor the file handle for changes, and update the graph after each time you save in the external editor. That's how you can get it to work as a WYSIWYG interface.

The 'Edit' button's in the upper left hand corner, next to 'Settings'.

Actually it monitors the file handle continally anyway, so what I do is open the dot file in Graphviz.app, fire up vim and edit the dotfile (with set backupcopy=yes) and watch the graph update after each :w.

Solution 3

Not exactly what you're asking for - but the potential of the projects I'm going to mention is pretty huge - as a graphviz fan I've been really amazed at what is now possible.

The short history:

• http://ushiroad.com/jsviz/ - ushiroad cooked up this lil guy. Using the Emscripten project he cross-compiled enough of graphviz to get layout and basic node stuff as a pure javascript app. You have to click the little round-arrow button on the bottom-right of the DOT src frame.

The only down-side (which in no way diminishes the awesomeness of porting graphviz to javascript) is the limitation on what you can do with it. it's basically just dot layout with a couple primary shaped nodes - doesn't support color. etc.

The author was awesome enough to upload his work to github, https://github.com/gyuque/livizjs

• https://github.com/mdaines/viz.js - looks like it took it to the next level, from the demo page it looks as though vis.js can do everything the standard build of graphviz can do, but all in your browser.

So, if you were so inclined - you could pretty easily take one of the lightweight (but pro!) in-browser editors like CodeMirror (it has vi key support) - and rig up a 'render' button like jsviz.

So.. not exactly what you were looking for. But holy moly for the person who spends a little time on this problem - a bounty of web based client-side graphing tools await.

Solution 4

There was a UI called dotty. I don't remember it being very nice to use.

http://linux.die.net/man/1/dotty

Solution 5

Pixelglow looks like the site you're referring to.

I note they now offer an IPhone-enabled solution (!)

View more solutions