MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 23:23, 28 Jul 2009 by RickyN
MindTouch Community Portal > App Catalog > Graphviz Flowcharts & Graphs
Page Notifications Off

Graphviz Flowcharts & Graphs

Vendor MindTouch
Type Native
Categories Graphs
Requires MindTouch 1.8.2 or later
OS Restriction None
Status Stable
License Free/Open Source
SID (service id) sid://mindtouch.com/2007/06/graphviz
Assembly mindtouch.deki.services

Install Extension
URL of your MindTouch install (ex: http://www.mindtouch.com)
    

 

Description

This extension contains functions for generating graphs. See attached files for documentation on the graph notation.

See also How to add an extension, Using the Extension Dialog, Learn about DekiScript, Extensions Directory.

Configuration:

Before the Graphviz service can be used, it must be configured with the locations of the required Graphviz applications.  Graphviz applications can be downloaded here.  VM users with SSH access can simply type apt-get install graphviz (paths are all prefixed with /usr/bin/: e.g., /usr/bin/dot, /usr/bin/neato, etc.).

Config Key Description
dot-path Path to dot application.
neato-path Path to neato application.
twopi-path Path to twopi application
circo-path Path to circo application.


Functions:

  1. graphviz.circo
  2. graphviz.dot
  3. graphviz.neato
  4. graphviz.twopi

graphviz.circo(graph : str) : uri

Generate graph using CIRCO layout.

Parameters:

Name Type Description
graph str Graph description.
format str Optional. Output format (8.08 or later)
One of "png", "png+map", "svg", or "xdot".  Default is "png".
- "png" produces a PNG image.  The return type is URI.
- "png+map" produces a PNG image and a <usemap> element describing the clickable areas.  The return type is XML.
- "svg" produces an SVG image and the corresponding <embed> element to visualize it.  The return type is XML.
- "xdot" produces an annotated text representation of the input.  The return type is STR.

Samples:

  Output

To generate a simple "Hello World" graph using CIRCO layout:

{{ graphviz.circo("digraph G { Hello -> World }") }}
./GraphvizCirco1.JPG

To generate a state-transition diagram using CIRCO layout:

{{graphviz.circo("digraph finite_state_machine {
	rankdir=LR;
	size=\"8,5\"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = \"SS(B)\" ];
	LR_0 -> LR_1 [ label = \"SS(S)\" ];
	LR_1 -> LR_3 [ label = \"S($end)\" ];
	LR_2 -> LR_6 [ label = \"SS(b)\" ];
	LR_2 -> LR_5 [ label = \"SS(a)\" ];
	LR_2 -> LR_4 [ label = \"S(A)\" ];
	LR_5 -> LR_7 [ label = \"S(b)\" ];
	LR_5 -> LR_5 [ label = \"S(a)\" ];
	LR_6 -> LR_6 [ label = \"S(b)\" ];
	LR_6 -> LR_5 [ label = \"S(a)\" ];
	LR_7 -> LR_8 [ label = \"S(b)\" ];
	LR_7 -> LR_5 [ label = \"S(a)\" ];
	LR_8 -> LR_6 [ label = \"S(b)\" ];
	LR_8 -> LR_5 [ label = \"S(a)\" ];
}") }}
./GraphvizCirco2.JPG

To an entity-relation diagram using CIRCO layout:

­{{graphviz.circo("graph ER {
	node [shape=box]; course; institute; student;
	node [shape=ellipse]; {node [label=\"name\"] name0; name1; name2;}
		code; grade; number;
	node [shape=diamond,style=filled,color=lightgrey]; \"C-I\"; \"S-C\"; \"S-I\";
	name0 -- course;
	code -- course;
	course -- \"C-I\" [label=\"n\",len=1.00];
	\"C-I\" -- institute [label=\"1\",len=1.00];
	institute -- name1;
	institute -- \"S-I\" [label=\"1\",len=1.00];
	\"S-I\" -- student [label=\"n\",len=1.00];
	student -- grade;
	student -- name2;
	student -- number;
	student -- \"S-C\" [label=\"m\",len=1.00];
	\"S-C\" -- course [label=\"n\",len=1.00];
}") }}
./GraphvizCirco3.JPG

 

graphviz.dot(graph : str) : uri

Generate graph using DOT layout.

Parameters:

Name Type Description
graph str Graph description.
format str Optional. Output format (8.08 or later)
One of "png", "png+map", "svg", or "xdot".  Default is "png".
- "png" produces a PNG image.  The return type is URI.
- "png+map" produces a PNG image and a <usemap> element describing the clickable areas.  The return type is XML.
- "svg" produces an SVG image and the corresponding <embed> element to visualize it.  The return type is XML.
- "xdot" produces an annotated text representation of the input.  The return type is STR.

Samples:

  Output

To generate a simple "Hello World" graph using DOT layout:

{{ graphviz.dot("digraph G { Hello -> World }") }}
./GraphvizDot1.JPG

To generate a state-transition diagram using DOT layout:

{{graphviz.dot("digraph finite_state_machine {
	rankdir=LR;
	size=\"8,5\"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = \"SS(B)\" ];
	LR_0 -> LR_1 [ label = \"SS(S)\" ];
	LR_1 -> LR_3 [ label = \"S($end)\" ];
	LR_2 -> LR_6 [ label = \"SS(b)\" ];
	LR_2 -> LR_5 [ label = \"SS(a)\" ];
	LR_2 -> LR_4 [ label = \"S(A)\" ];
	LR_5 -> LR_7 [ label = \"S(b)\" ];
	LR_5 -> LR_5 [ label = \"S(a)\" ];
	LR_6 -> LR_6 [ label = \"S(b)\" ];
	LR_6 -> LR_5 [ label = \"S(a)\" ];
	LR_7 -> LR_8 [ label = \"S(b)\" ];
	LR_7 -> LR_5 [ label = \"S(a)\" ];
	LR_8 -> LR_6 [ label = \"S(b)\" ];
	LR_8 -> LR_5 [ label = \"S(a)\" ];
}") }}
./GraphvizDot2.JPG

To an entity-relation diagram using DOT layout:

 ­{{graphviz.dot("graph ER {
	node [shape=box]; course; institute; student;
	node [shape=ellipse]; {node [label=\"name\"] name0; name1; name2;}
		code; grade; number;
	node [shape=diamond,style=filled,color=lightgrey]; \"C-I\"; \"S-C\"; \"S-I\";
	name0 -- course;
	code -- course;
	course -- \"C-I\" [label=\"n\",len=1.00];
	\"C-I\" -- institute [label=\"1\",len=1.00];
	institute -- name1;
	institute -- \"S-I\" [label=\"1\",len=1.00];
	\"S-I\" -- student [label=\"n\",len=1.00];
	student -- grade;
	student -- name2;
	student -- number;
	student -- \"S-C\" [label=\"m\",len=1.00];
	\"S-C\" -- course [label=\"n\",len=1.00];
}") }}
./GraphvizDot3.JPG

 

graphviz.neato(graph : str) : uri

Generate graph using NEATO layout.

Parameters:

Name Type Description
graph str Graph description.
format str Optional. Output format (8.08 or later)
One of "png", "png+map", "svg", or "xdot".  Default is "png".
- "png" produces a PNG image.  The return type is URI.
- "png+map" produces a PNG image and a <usemap> element describing the clickable areas.  The return type is XML.
- "svg" produces an SVG image and the corresponding <embed> element to visualize it.  The return type is XML.
- "xdot" produces an annotated text representation of the input.  The return type is STR.

Samples:

  Output

To generate a simple "Hello World" graph using NEATO layout:

{{ graphviz.neato("digraph G { Hello -> World }") }}
./GraphvizNeato1.JPG

To generate a state-transition diagram using NEATO layout:

{{graphviz.neato("digraph finite_state_machine {
	rankdir=LR;
	size=\"8,5\"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = \"SS(B)\" ];
	LR_0 -> LR_1 [ label = \"SS(S)\" ];
	LR_1 -> LR_3 [ label = \"S($end)\" ];
	LR_2 -> LR_6 [ label = \"SS(b)\" ];
	LR_2 -> LR_5 [ label = \"SS(a)\" ];
	LR_2 -> LR_4 [ label = \"S(A)\" ];
	LR_5 -> LR_7 [ label = \"S(b)\" ];
	LR_5 -> LR_5 [ label = \"S(a)\" ];
	LR_6 -> LR_6 [ label = \"S(b)\" ];
	LR_6 -> LR_5 [ label = \"S(a)\" ];
	LR_7 -> LR_8 [ label = \"S(b)\" ];
	LR_7 -> LR_5 [ label = \"S(a)\" ];
	LR_8 -> LR_6 [ label = \"S(b)\" ];
	LR_8 -> LR_5 [ label = \"S(a)\" ];
}") }}
./GraphvizNeato2.JPG

To an entity-relation diagram using NEATO layout:

­{{graphviz.neato("graph ER {
	node [shape=box]; course; institute; student;
	node [shape=ellipse]; {node [label=\"name\"] name0; name1; name2;}
		code; grade; number;
	node [shape=diamond,style=filled,color=lightgrey]; \"C-I\"; \"S-C\"; \"S-I\";
	name0 -- course;
	code -- course;
	course -- \"C-I\" [label=\"n\",len=1.00];
	\"C-I\" -- institute [label=\"1\",len=1.00];
	institute -- name1;
	institute -- \"S-I\" [label=\"1\",len=1.00];
	\"S-I\" -- student [label=\"n\",len=1.00];
	student -- grade;
	student -- name2;
	student -- number;
	student -- \"S-C\" [label=\"m\",len=1.00];
	\"S-C\" -- course [label=\"n\",len=1.00];
}") }}
./GraphvizNeato3.JPG

 

graphviz.twopi(graph : str) : uri

Generate graph using TWOPI layout.

Parameters:

Name Type Description
graph str Graph description.
format str Optional. Output format (8.08 or later)
One of "png", "png+map", "svg", or "xdot".  Default is "png".
- "png" produces a PNG image.  The return type is URI.
- "png+map" produces a PNG image and a <usemap> element describing the clickable areas.  The return type is XML.
- "svg" produces an SVG image and the corresponding <embed> element to visualize it.  The return type is XML.
- "xdot" produces an annotated text representation of the input.  The return type is STR.

Samples:

  Output

To generate a simple "Hello World" graph using TWOPI layout:

{{ graphviz.twopi("digraph G { Hello -> World }") }}
./GraphvizTwopi1.JPG

To generate a state-transition diagram using TWOPI layout:

{{graphviz.twopi("digraph finite_state_machine {
	rankdir=LR;
	size=\"8,5\"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = \"SS(B)\" ];
	LR_0 -> LR_1 [ label = \"SS(S)\" ];
	LR_1 -> LR_3 [ label = \"S($end)\" ];
	LR_2 -> LR_6 [ label = \"SS(b)\" ];
	LR_2 -> LR_5 [ label = \"SS(a)\" ];
	LR_2 -> LR_4 [ label = \"S(A)\" ];
	LR_5 -> LR_7 [ label = \"S(b)\" ];
	LR_5 -> LR_5 [ label = \"S(a)\" ];
	LR_6 -> LR_6 [ label = \"S(b)\" ];
	LR_6 -> LR_5 [ label = \"S(a)\" ];
	LR_7 -> LR_8 [ label = \"S(b)\" ];
	LR_7 -> LR_5 [ label = \"S(a)\" ];
	LR_8 -> LR_6 [ label = \"S(b)\" ];
	LR_8 -> LR_5 [ label = \"S(a)\" ];
}") }}
./GraphvizTwopi2.JPG

To an entity-relation diagram using TWOPI layout:

­{{graphviz.twopi("graph ER {
	node [shape=box]; course; institute; student;
	node [shape=ellipse]; {node [label=\"name\"] name0; name1; name2;}
		code; grade; number;
	node [shape=diamond,style=filled,color=lightgrey]; \"C-I\"; \"S-C\"; \"S-I\";
	name0 -- course;
	code -- course;
	course -- \"C-I\" [label=\"n\",len=1.00];
	\"C-I\" -- institute [label=\"1\",len=1.00];
	institute -- name1;
	institute -- \"S-I\" [label=\"1\",len=1.00];
	\"S-I\" -- student [label=\"n\",len=1.00];
	student -- grade;
	student -- name2;
	student -- number;
	student -- \"S-C\" [label=\"m\",len=1.00];
	\"S-C\" -- course [label=\"n\",len=1.00];
}") }}
./GraphvizTwopi3.JPG
Tag page (Edit tags)
What links here

Files 14

Attach file or image
FileSizeDateAttached by 
 dotguide.pdf
Guide to using Dot's native notation
208.68 kB08:38, 9 Nov 2006SteveBActions
 GraphvizCirco1.JPG
No description
3.99 kB22:29, 17 Oct 2007BrigetteKActions
 GraphvizCirco2.JPG
No description
21.88 kB22:29, 17 Oct 2007BrigetteKActions
 GraphvizCirco3.JPG
No description
29.62 kB22:29, 17 Oct 2007BrigetteKActions
 GraphvizDot1.JPG
No description
3.99 kB22:40, 17 Oct 2007BrigetteKActions
 GraphvizDot2.JPG
No description
29.46 kB22:40, 17 Oct 2007BrigetteKActions
 GraphvizDot3.JPG
No description
25.45 kB22:40, 17 Oct 2007BrigetteKActions
 GraphvizNeato1.JPG
No description
3.78 kB22:45, 17 Oct 2007BrigetteKActions
 GraphvizNeato2.JPG
No description
24.12 kB22:45, 17 Oct 2007BrigetteKActions
 GraphvizNeato3.JPG
No description
20.48 kB22:45, 17 Oct 2007BrigetteKActions
 GraphvizTwopi1.JPG
No description
3.82 kB22:50, 17 Oct 2007BrigetteKActions
 GraphvizTwopi2.JPG
No description
27.89 kB22:50, 17 Oct 2007BrigetteKActions
 GraphvizTwopi3.JPG
No description
26.54 kB22:50, 17 Oct 2007BrigetteKActions
 neatoguide.pdf
Guide to using Neato's native notation
95.28 kB08:41, 9 Nov 2006SteveBActions
Viewing 10 of 10 comments: view all
#1
nell says:
I have DekiWiki 1.8.2. so I should be able to use Graphviz, but it keeps saying that my application is misconfigured. I looked up the config keys on your website and I need to know the correct paths to type in. You make it seem like for config key: dot, the path would be: /usr/bin/dot. Is that correct? If it is, why is Graphviz the only extension I cannot get to work on my Wiki??
Posted 22:05, 10 Jan 2008
#2
coreyg says:
That is correct...verify that you have the application installed and confirm that the config values are accurate
Posted 21:54, 14 Jan 2008
#3
abuckton says:
Hi nell,
I've been through a bit of a loop on this one: you need to add the config settings to the service - not to the control-panel->configuration page. It works well once you've done that :)
Posted 09:45, 24 Jan 2008
#4
dmorrow says:
I can't get graphviz to work at all. I'm a VM user. I did the "apt-get install graphviz" step. and I went into the service, and added the keys, and (dot-path, neato-path, etc) and their values (/usr/bin/dot, usr/bin/neato, etc). I checked that these directories are valid. I don't know what else to do here. I typed in "{{ graphviz.circo("digraph G { Hello -> World }") }} " (as is shown on the sample page, and my result is "reference to undefined name 'graphviz' "

In other notes, the "graphviz" stuff does NOT show up on the Extensions list. I don't know if this means anything, but I thought I'd point it out. Any help in this is greatly appreciated.
Posted 15:33, 14 Mar 2008
#5
dmorrow says:
Oops, it would have helped if I had it listed as an Extension instead of Authentication.
Posted 15:41, 14 Mar 2008
#6
bobdvb says:
I think this will only be of real use when there is a usable editor or converter for these graphs. I just tried to download some tools but I didn't find anything useful and friendly enough for general users. Perhaps an embedded java editor or converter from visio?
Posted 14:25, 20 Jun 2008
#7
hoberion says:
URL= doesnt seem to work, anyone?
Posted 14:22, 7 Jan 2009
#8
coreyg says:
What error is it giving you?
Posted 19:41, 9 Jan 2009
#9
jf03cg says:
How do you size the resultant image? I am creating state diagrams and they are rather large and cause viewers to have to scroll horizontally. Is there any way to resize the image? Or will I need to add some javascript to do this?
Posted 18:19, 11 Jan 2009
#10
SteveB says:
The input notation allows you to specify the desired size. Graphviz then scales everything down to fit. Read the manual (oh, the horror! ;) ).
Posted 19:50, 11 Jan 2009
Viewing 10 of 10 comments: view all
You must login to post a comment.
Powered by MindTouch Enterprise 2010
Are you running the latest version of MindTouch?
Download MindTouch

More Downloads

MindTouch Community Portal

MindTouch

MindTouch DekiScript

Others

Contribute

Forums

Blog

mindtouch.com

Products

Customers

Support

Partners

Company

Corporate Blog

Powered by MindTouch Enterprise 2009
© Copyright 2009 MindTouch, Inc. | Privacy Policy