[ACCEPTED]-Is there any good IDE or WYSIWYG editor for graphviz?-graphviz

Accepted answer
Score: 21

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

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

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

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

graph graphname {

and call it something.dot.

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

alt text

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

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

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

alt text

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

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

Score: 9

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


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

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

Score: 8

Not exactly what you're asking for - but 19 the potential of the projects I'm going 18 to mention is pretty huge - as a graphviz 17 fan I've been really amazed at what is now 16 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 15 (which in no way diminishes the awesomeness 14 of porting graphviz to javascript) is the 13 limitation on what you can do with it. it's 12 basically just dot layout with a couple 11 primary shaped nodes - doesn't support color. etc.

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

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

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

Score: 3

The excellent OmniGraffle can import *.dot files, but 3 sadly I don't think you can round-trip it 2 back and export the edited results as a 1 dot file natively.

Score: 3

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


Score: 2

Pixelglow looks like the site you're referring to.

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

Score: 0

Another solution might be tintfu. Unfortunately 2 it does not let you edit the source-code 1 directly.

More Related questions