Test:Graphviz

From MediaWiki

Jump to: navigation, search

Graphviz is a MediaWiki extension that allows you to embed graphs in any Wiki page, such as the page on the biofuel.

Simple graphs are simple to create, and unlike embedded images, others can come along and refine previously entered graphs.

Graphs can also be arbitrarily complex! It is easy to get carried away with colors, arrow styles, etc., but simpler generally communicates better.

Graphs are described in a simple textual language. Why do this instead of using some graphic program, and producing and uploading a .JPG image? Well, it can be a lot easier to type in a few simple lines to create simple graphs, for one thing. But more importantly, a Graphviz graph on a Wiki page is editable by anyone -- this means you can make collaborative graphs!

Contents

Simple Example

A simple directed graph requires use of a simple description language:

<graphviz>
digraph NAME {
# A simple cyclic directed graph.
  node1 -> "node 2"
  "node 2" -> node3;
  node3 -> node1
}
</graphviz>
  • Anything following a pound sign (#) is ignored, and can be used to document your diagram.
  • NAME is a name you give your graph. This is not very important, but it should be unique for any given web page.
  • node1 is the name of a shape in your graph, with only alphanumeric characters, or
  • if you want spaces in the name, you must put the name in double quotes, as in "node 2",
  • -> represents a line between nodes with an arrow at one end.
  • Each relationship between nodes is on a separate line, optionally terminated with a semicolon (;).

This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.

This is what the code to the left generates.

With Subgraphs

This is an example of a directed graph with subgraphs.

This can be useful for describing a system that has subparts, for example.

Note the use of attributes, such as color = pink or style = "dashed" for embellishing things.

<graphviz>
digraph F {
    subgraph cluster_0 {
        label = "hello world";
	a -> b;
	a -> c;
	color = pink;
    }
    subgraph cluster_1 {
	label = "MSDOT";
	style= "dashed";
	color=purple;
	x -> y;
	x -> z;
	y -> z;
	y -> q;
    }
    top -> a;
    top -> y;
    y -> b;
}
</graphviz>

This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.

This is what the code to the left generates.


With colors

Here is an example with numerous formatting options, including using color names.

Note that if you want a line break in between words, you must put \n where you want the line break.

<graphviz>
digraph G {
    xyz [label = "hello\nworld",
        color="blue",
        fontsize=24,
        fontname="Palatino-Italic",
        style=filled,
        fontcolor="hot pink"];
    node [style=filled];
# Colors can be hue, saturation, brightness,
    red [color="0.0 1.0 1.0"];
# or colors can be red green blue,
    green [color="#00FF00"];
# or colors can be named.
    blue [color=blue, fontcolor=black];
    cyan [color=cyan];
    magenta [color=magenta];
    yellow [color=yellow];
    orange [color=orange];
    red -> green;
    red -> blue;
    blue -> cyan;
    blue -> magenta;
    green -> yellow;
    green -> orange;
}
</graphviz>

This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.

This is what the code to the left generates.

Using other rendering engines

The default rendering engine is dot, which generates hierarchical graphs. Other Graphviz rendering engines are available: fdp, circo, neato, and twopi. To use one of these engines, use the named parameter "renderer" with one of "dot," "neato," "fdp," "sfdp," "circo," or "twopi". Documentation on these rendering engines is available below.

This example also illustrates use of an image map, which allows you to associate a URL with objects in the graph so clicking on the object will take you to the linked URL. Put node [URL="/wiki/\N"] right inside the curly braces, and each node in the graph will link to a page of the same name. If a page needs a different name -- for example, if the page name needs to be shortened to go in the graph -- you can explicitly give that node a different name, as shown.

<graphviz renderer='neato'>digraph Components {
# Cause each node to link to a page of the same name:
    node [URL="/wiki/\N"]
#    size="3.5, 3.5"
    Ecovillage -> Infrastructure
    Ecovillage -> Energy
    Ecovillage -> Agriculture
    Ecovillage -> Buildings
    Ecovillage -> Transportation
    Ecovillage -> Business
    Infrastructure -> Water
    Infrastructure -> Waste
    Infrastructure -> Composting
    Energy -> Solar
    Energy -> Wind
    Energy -> Methane
    Energy -> Biofuel
    Agriculture -> Farming
    Agriculture -> Gardening
    Agriculture -> "Seed saving"
    Agriculture -> Processing
    Buildings -> Common
    Buildings -> Family
    Buildings -> Bedroom
# (continued in next column)

This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.

This is what the code to the left and below generates, using the neato rendering engine. Click on an object to go to its linked page.
    Transportation -> Human
    Transportation -> Biofuel
    Transportation -> Electric
    Business -> Ecotourism
    Business -> Accounting
    Business -> Administration
    Business -> Trade
# Make links to pages with different names:
    Bedroom [URL="Bedroom house"]
    Buildings [URL="Buildings and housing"]
    Common [URL="Common buildings"]
    Electric [URL="Electric vehicle"]
    Family [URL="Family house"]
    Human [URL="Human powered"]
    Methane [URL="Methane digestor"]
    Water [URL="Water supply"]
    Waste [URL="Waste management system"]
}
</graphviz>

Text flowing

This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.

Up until now, the examples on this page used tables to make the graph appear to the right of the text. But making and maintaining tables is tedious, and not very wiki-like. If you change the amount of text, it no longer flows properly. So you can specify the named parameter "location" to place your graph on the left, middle, center, or right.

<graphviz location='right'>
digraph right {
    label="This is what the code\nto the left generates."
    Sky -> Water
    Water -> Earth
    Earth -> Sky
}
</graphviz>

A significant disadvantage of this approach (compared to using tables) is that you cannot simply put captions under your diagram if you are using text flowing. Even if you think you've labeled your diagram, a different font in a different browser, or even re-sizing the window in the same browser, will likely make the text flow completely differently.

But you can label your graph within the graph itself, using the label="text" attribute of the graph, as is done here. The disadvantage of this technique is that text does not wrap to the width of the graph, and you will have to embedd newline symbols (\n) where you want line breaks. Since these line breaks are embedded in the graph picture, they will not change with different browsers, fonts, or window widths.

For more information

Here are some links for more Graphviz information. This includes full documentation, as well as where to get Graphviz for Windows, Linux, or MacOS X so you can build your graphs off-line if you prefer, then paste them into the wiki later.

Share your opinion


blog comments powered by Disqus
Personal tools
Get our newsletter!
Name:
Email Address:

disturbance
entry points
help (off site)
Environmental jobs, green volunteering, good work! Powered by the wind! This server and other
EcoReality operations
are 100% wind powered.
Powered by Mac OS X Powered by Mac MediaWiki Powered by MariaDB Powered by Valentina Studio Pro