Test:Graphviz

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 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 = hot_pink or style = "dashed" for embellishing things.

<graphviz>
digraph F {
    subgraph cluster_0 {
        label = "hello world";
	a -> b;
	a -> c;
	color = hot_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>

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>

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)

    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>