Difference between revisions of "Wgraph"

Revision as of 10:58, 21 July 2007

Wgraph -- the mediawiki graph definition tool

Wgraph is a mediawiki extension which supports graph drawing. With Wgraph you define the semantics of a graph in an abstract textual notation called WGL (Wiki Graph Language). You may add hints for layout, but the graph itself is being produced automatically. Wgraph is a powerful visualisation instrument for objects and their relations. It is NOT a 'wysiwyg' drawing tool.

 node wgl         { type data     label "text notation\n-- WGL --" }
 edge wgl wgraph  { kind rightnear color red }
 node wgraph      { type process  label "Wgraph\nmediawiki extension" }
 edge wgraph gdl  { }
 node gdl         { type data     label "graph definition\n-- GDL --" }
 edge gdl aisee   { }
 node aisee       { type process  label "aiSee\nlayout generator" 
                    href aiSee } // hyperlink to article (only svg)
 edge aisee img   { kind leftnear }
 node img         { type data     label "image\n-- png, svg --" 
                    shape hexagon }
 nodetype data    { shape ellipse, color lightyellow,
                    bordercolor khaki, height 60 }
 nodetype process { shape box color lightmagenta 
                    bordercolor magenta height 60 }
 xspace=70, yspace=100

{{#wgraph: svg | thumb = 40 |
  node wgl         { type data     label "text notation\n-- WGL --" }
  edge wgl wgraph  { kind rightnear color red }
  node wgraph      { type process  label "Wgraph\nmediawiki extension" }
  edge wgraph gdl  { }
  node gdl         { type data     label "graph definition\n-- GDL --" }
  edge gdl aisee   { }
  node aisee       { type process  label "aiSee\nlayout generator" }
  edge aisee img   { kind leftnear }
  node img         { type data     label "image\n-- png, svg --" 
                     shape hexagon }
  nodetype data    { shape ellipse, color lightyellow,
                     bordercolor khaki, height 60 }
  nodetype process { shape box color lightmagenta 
                     bordercolor magenta height 60 }
  xspace=70, yspace=100
}}

Graph layout is a very challenging task. Wgraph delegates most of this task to a brilliant product called aiSee. aiSee came out of the German university area one decade ago and is now being marketed commercially by AbsInt - Angewandte Informatik, Saarbrücken, Germany. You can download a free 30-day trial license. aiSee can be registered for free for non-commercial use. Non-commercial use is educational, academic research and private use. Non-commercial users can get a license key that extends the usage period of the trial version until February 14, 2008. After that you will have to download aiSee again (and the usage period will be extended for another year, provided the usage is still non-commercial).

The two modes to use Wgraph

Wgraph is an interface between mediawiki and aiSee. It hides aiSee completely from the eyes of the user and adds a small additional abstraction layer to make graph definitions even more comfortable than with native aiSee.

• The direct way to use wgraph is to invoke the parser function #wgraph with your WGL code as a parameter.
• In combination with another mediawiki extension (called DPL: Dynamic Page List) you can even visualize structural aspects of your wiki as a wikigraph. In a wikigraph articles map to nodes, categories to nodetypes and relations are deduced from template calls.

With wgraph you can view a graph definition from different angles. You can hide certain nodes / edges and emphasize others. You can group nodes to subgraphs and show them in a special surrounding box. There are several layout strategies to choose from. You control the graphical representation of nodes and edges using shapes, colors, linestyles, arrows and even bitmap images. To avoid redundancy and reach a higher level of abstraction you can take advantage of the built-in WGL type concept.

Graphs are produced in png and svg format. In addition there is a png thumb image. Apart from viewing the generated graph in the browser, aiSee can be used as a local client application. This gives enhanced possibilities of edge concentration, subgraph folding etc. Make sure that you comply to the licensing terms of [1].

A first example

node B {}
node C {}
node D {}
node E {}

edge A D {}
edge A B {}
edge A C {}
edge B C {}
edge B E {}

  node A {} 
node B {}
node C {}
node D {}
node E {}

edge A D {}
edge A B {}
edge A C {}
edge B C {}
edge B E {}
   node.color = lightyellow
 }}

  node A {} 
node B {}
node C {}
node D {}
node E {}

edge A D {}
edge A B {}
edge A C {}
edge B C {}
edge B E {} 
   orientation = left_to_right
   node.color = lightmagenta
   node.shape = hexagon
   node.width = 30
   edge.color = red
 }}