graphgear plugin by Andreas Gohr
Visualize directed and undirected graphs in flash using Graphviz notation. Graphviz not required.
Last updated on 2009-01-11. Provides Syntax.
Compatible with DokuWiki 2008-05-05.
Similar to graphviz.
This plugin uses the Graph Gear flash to display directed or undirected graphs using the popular Graphviz syntax. Images and Links can be attached to the nodes of the graph. An example of the plugin in use can be seen here.
Download and install the plugin using the Plugin Manager using the following URL. Refer to Plugins on how to install plugins manually.
Graphs are defined by the <graphgear></graphgear> tags. The body contains the nodes and edges as explained below. The opening tag can contain optional comma separated parameters.
Complete Example:
<graphgear width=500,height=300,label="My first Graph"> node1 [label="My first node", fillcolor="lightblue"] node2 [label="My second node"] node1 -> node2 [label="An edge from node1 to node2", fontcolor="red"] </graphgear>
The following parameters are supported:
| Parameter | Value | Default | Description |
|---|---|---|---|
| label | any text | A title for the graph | |
| width | a number | 725 | The width of the graph in pixels |
| height | a number | 400 | The height of the graph in pixels |
| bgcolor | a color | ffffff (white) | The background color of the whole canvas |
| linecolor | a color | cccccc (gray) | The color of the edge lines |
| mode | undirected or directed | undirected | Have the edges of the graph a direction? |
| viewmode | explore or display | explore | In explore mode only the first node and it's children is shown initially, in display mode all nodes are shown. The latter is very CPU intensive |
A node is defined by its name, optionally followed by a parameter list in square brackets.
Example:
node1 [label="My first node", fillcolor="lightblue"]
Only the following graphviz parameters are supported:
| Parameter | Value | Default | Description |
|---|---|---|---|
| label | any text | The node name | A label, describing the node |
| fillcolor | a color | cccccc (gray) | The background color of the node and its label |
| fontcolor | a color | 000000 (black) | The color of the label text |
| url | a link | Clicking the label will open the given page, can be external or a wiki page | |
| image | a image | The image will be shown inside the node bubble, can be external or internal | |
| shape | circle or box | circle | The shape of the node. Only circles and squares are supported. A few more graphviz shapes will be recognized as box |
An edge is defined by giving two node names separated by a ->, optionally followed by a parameter list in square brackets.
Example:
node1 -> node2 [label="An edge from node1 to node2", fontcolor="red"]
Only the following graphviz parameters are supported:
| Parameter | Value | Default | Description |
|---|---|---|---|
| label | any text | A label, describing the edge | |
| fontcolor | a color | 000000 (black) | The color of the label text |
All colors can be defined as HTML hex codes or as X11 Graphviz color names.