====== Graph Gear Plugin ======

---- plugin ----
description: Visualize directed and undirected graphs in flash using Graphviz notation. Graphviz not required.
author     : Andreas Gohr
email      : andi@splitbrain.org
type       : syntax
lastupdate : 2016-02-03
compatible : Lemming+
depends    : 
conflicts  : 
similar    : graphviz
tags       : !obsolete, media, images, diagram, flash, graphviz

downloadurl: https://github.com/splitbrain/dokuwiki-plugin-graphgear/zipball/master
sourcerepo : https://github.com/splitbrain/dokuwiki-plugin-graphgear
bugtracker : https://github.com/splitbrain/dokuwiki-plugin-graphgear/issues
donationurl: http://donate.dokuwiki.org/graphgear
----

Flash is not available anymore in browsers.

This plugin uses the [[http://www.creativesynthesis.net/blog/?page_id=60|Graph Gear]] flash to display directed or undirected graphs using the popular [[http://www.graphviz.org|Graphviz]] syntax. Images and Links can be attached to the nodes of the graph. An example of the plugin in use can be seen [[http://foosel.org/stuff/bunnymeme|here]]FIXME.

===== Download and Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

==== Changes ====

{{rss>https://github.com/splitbrain/dokuwiki-plugin-graphgear/commits/master.atom date}}

===== Syntax and Usage =====

==== Graphs ====

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'' (grey)  | 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 |


==== Nodes ====

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'' (grey)  | 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'' |

==== Edges ====

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 |

==== Colors ====

All colors can be defined as HTML hex codes or as [[http://www.graphviz.org/doc/info/colors.html|X11 Graphviz color names]].


===== Limitations =====

  * The SWF currently contains a [[http://www.mochibot.com/|MochiBot tracking code]] -- the software is GPL, shouldn't be a problem to remove the code, but Flash might be needed to do so
  * Certain Graphviz syntax features are not supported yet (comments, multiline data, possibly more)
  * Only a subset of the Graphviz syntax for nodes and edges is supported (see above for a list), everything else is ignored