Page last modified 13:56, 24 Feb 2011 by coreyg

MindTouch Community Portal > App Catalog > Graphviz Flowcharts & Graphs

Was this page helpful?

Graphviz Flowcharts & Graphs

1. Description
1. 1. 1.1.1. Installing on CentOS
2. graphviz.circo(graph : str) : uri
3. graphviz.dot(graph : str) : uri
4. graphviz.neato(graph : str) : uri
5. graphviz.twopi(graph : str) : uri

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

Description

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

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.).

Installing on CentOS

Add the following repo to your CentOS repos: http://www.graphviz.org/graphviz-rhel.repo

Then run: yum install graphviz

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:

graphviz.circo
graphviz.dot
graphviz.neato
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 }") }}

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)\" ];
}") }}

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];
}") }}

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 }") }}

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)\" ];
}") }}

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];
}") }}

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 }") }}

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)\" ];
}") }}

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];
}") }}

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 }") }}

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)\" ];
}") }}

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];
}") }}

Was this page helpful?: Yes No
Tag page
What links here

Files 14

Attach file or image

File	Version	Size	Modified
dotguide.pdf v1 208.68 kB 00:38, 9 Nov 2006
GraphvizCirco1.JPG v1 3.99 kB 14:29, 17 Oct 2007
GraphvizCirco2.JPG v1 21.88 kB 14:29, 17 Oct 2007
GraphvizCirco3.JPG v1 29.62 kB 14:29, 17 Oct 2007
GraphvizDot1.JPG v1 3.99 kB 14:40, 17 Oct 2007
GraphvizDot2.JPG v1 29.46 kB 14:40, 17 Oct 2007
GraphvizDot3.JPG v1 25.45 kB 14:40, 17 Oct 2007
GraphvizNeato1.JPG v1 3.78 kB 14:45, 17 Oct 2007
GraphvizNeato2.JPG v1 24.12 kB 14:45, 17 Oct 2007
GraphvizNeato3.JPG v1 20.48 kB 14:45, 17 Oct 2007
GraphvizTwopi1.JPG v1 3.82 kB 14:50, 17 Oct 2007
GraphvizTwopi2.JPG v1 27.89 kB 14:50, 17 Oct 2007
GraphvizTwopi3.JPG v1 26.54 kB 14:50, 17 Oct 2007
neatoguide.pdf v1 95.28 kB 00:41, 9 Nov 2006

Images 12
GraphvizCirco1.JPG	GraphvizCirco2.JPG	GraphvizCirco3.JPG
GraphvizDot1.JPG	GraphvizDot2.JPG	GraphvizDot3.JPG
GraphvizNeato1.JPG	GraphvizNeato2.JPG	GraphvizNeato3.JPG
GraphvizTwopi1.JPG	GraphvizTwopi2.JPG	GraphvizTwopi3.JPG

Viewing 11 of 11 comments: view all

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 14:05, 10 Jan 2008

coreyg says:

That is correct...verify that you have the application installed and confirm that the config values are accurate

Posted 13:54, 14 Jan 2008

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 01:45, 24 Jan 2008

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 07:33, 14 Mar 2008

dmorrow says:

Oops, it would have helped if I had it listed as an Extension instead of Authentication.

Posted 07:41, 14 Mar 2008

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 06:25, 20 Jun 2008

hoberion says:

URL= doesnt seem to work, anyone?

Posted 06:22, 7 Jan 2009

coreyg says:

What error is it giving you?

Posted 11:41, 9 Jan 2009

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 10: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 11:50, 11 Jan 2009

#12

ealves says:

When I copy & paste any of the examples I'm getting this:
HTTP Status: BadRequest(400) (click for details)

Callstack:
at User:ealves/Wiki_Scripts_Test/tests
at graphviz.Circo
at graphviz.Twopi

MindTouch.Dream.DreamResponseException: HTTP Status: BadRequest(400)
at MindTouch.Deki.Script.Runtime.TargetInvocation.DekiScriptRemoteInvocationTarget.InvokeList (MindTouch.Deki.Script.DekiScriptRuntime runtime, MindTouch.Deki.Script.Expr.DekiScriptList args) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.Runtime.TargetInvocation.ADekiScriptInvocationTarget.Invoke (MindTouch.Deki.Script.DekiScriptRuntime runtime, MindTouch.Deki.Script.Expr.DekiScriptLiteral args) [0x00000] in <filename unknown>:0
at MindTouch.Deki.Script.DekiScriptRuntime.Invoke (Location location, MindTouch.Dream.XUri uri, MindTouch.Deki.Script.Expr.DekiScriptLiteral args, MindTouch.Deki.Script.Runtime.DekiScriptEnv env) [0x00000] in <filename unknown>:0

Any ideas on what could be happening?

Posted 06:03, 28 Oct 2011

Viewing 11 of 11 comments: view all

You must login to post a comment.

MindTouch Social Knowledge Base

Graphviz Flowcharts & Graphs

Table of contents

Description

Installing on CentOS

graphviz.circo(graph : str) : uri

graphviz.dot(graph : str) : uri

graphviz.neato(graph : str) : uri

graphviz.twopi(graph : str) : uri

Files 14

Table of contents

Login or Join Community

Graphviz Flowcharts & Graphs

Table of contents

Description

Installing on CentOS

graphviz.circo(graph : str) : uri

graphviz.dot(graph : str) : uri

graphviz.neato(graph : str) : uri

graphviz.twopi(graph : str) : uri

Files 14

Table of contents