DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:graphviz

Graphviz Plugin

Compatible with DokuWiki

  • 2017-02-19 "Frusterick Manners" unknown
  • 2016-06-26 "Elenor Of Tsort" unknown
  • 2015-08-10 "Detritus" yes
  • 2014-09-29 "Hrun" yes

plugin Graph Visualization (from text with links between objects to image)

Last updated on
2016-02-03
Provides
Syntax
Repository
Source

Similar to ditaa, gnuplot, seqdia, svgedit

Tagged with diagram, graphviz, images, media

This plugin can create directed and non-directed graph images from a textual description language called “dot” using the Graphviz program. It can use a locally installed graphviz or use Google's chart API for rendering.

The plugin supports exporting to OpenOffice through the ODT Plugin (only with a local graphviz install).

For more information on Graphviz and the dot language refer to the Graphviz documentation

This plugin was originally written by Carl-Christian Salvesen. The current plugin is a nearly complete rewrite and differs on how it works internally and where graphs are stored.

Download and Installation

Download and install the plugin using the Plugin Manager using the URL given above. Refer to Plugins on how to install plugins manually.

Changes

Configuration

The full path to your graphviz' dot binary can be configured in the config manager. When it isn't configured, remote rendering at Google is used.

Syntax and Usage

Any Graphviz compatible graph definition can be given with graphviz tags.

The rendering engine can optionally be given as argument in the opening tag. Supported are dot, neato, twopi, circo and fdp with dot being the default:

  • dot – “hierarchical” or layered drawings of directed graphs. This is the best tool to use if edges have directionality.
  • neato – “spring model” layouts. This is the best tool to use if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
  • fdp – “spring model” layouts similar to those of neato, but does this by reducing forces rather than working with energy.
  • twopi – radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.
  • circo – circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

You can also specify left, center or right to align the resulting image.

A parameter in the form of <number>x<number> is interpreted as wanted output size. To only specify width width=<number> or <number>x0 can be used, for height height=<number> or 0x<number>.

Example

<graphviz dot right 800x400>
digraph ATN {
rankdir=LR;
s25[fontsize=11, label="25", shape=doublecircle, fixedsize=true, width=.6];
s239[fontsize=24,label="239", shape=circle, fixedsize=true, width=.55, peripheries=1];
s240[fontsize=11,label="240", shape=circle, fixedsize=true, width=.55, peripheries=1];
s241[fontsize=11,label="241", shape=circle, fixedsize=true, width=.55, peripheries=1];
s242[fontsize=11,label="242", shape=circle, fixedsize=true, width=.55, peripheries=1];
s243[fontsize=11,label="{&rarr;\n243\nd=24|{<p0>|<p1>}}", shape=record, fixedsize=false, peripheries=1];
s244[fontsize=11,label="&larr;\n244", shape=circle, fixedsize=true, width=.55, peripheries=1];
s245[fontsize=11,label="245", shape=circle, fixedsize=true, width=.55, peripheries=1];
s246[fontsize=11,label="246", shape=circle, fixedsize=true, width=.55, peripheries=1];
s247[fontsize=11,label="&rarr;\n247+", shape=circle, fixedsize=true, width=.55, peripheries=1];
s24[fontsize=11,label="24", shape=circle, fixedsize=true, width=.55, peripheries=1];
s248[fontsize=11,label="&larr;\n248", shape=circle, fixedsize=true, width=.55, peripheries=1];
s249[fontsize=11,label="{249+\nd=25|{<p0>|<p1>}}", shape=record, fixedsize=false, peripheries=1];
s250[fontsize=11,label="250", shape=circle, fixedsize=true, width=.55, peripheries=1];
s251[fontsize=11,label="251", shape=circle, fixedsize=true, width=.55, peripheries=1];
s252[fontsize=11,label="252", shape=circle, fixedsize=true, width=.55, peripheries=1];
s24 -> s239 [fontname="Times-Italic", label="&epsilon;"];
s239 -> s247 [fontsize=11, fontname="Courier", arrowsize=.7, label = "'{'", arrowhead = normal];
s247 -> s240 [fontname="Times-Italic", label="&epsilon;"];
s240 -> s243 [fontsize=11, fontname="Courier", arrowsize=.7, label = "'case'", arrowhead = normal];
s243:p0 -> s241 [fontname="Times-Italic", label="&epsilon;"];
s243:p1 -> s242 [fontname="Times-Italic", label="&epsilon;"];
s241 -> s244 [fontsize=11, fontname="Courier", arrowsize=.7, label = "'null'", arrowhead = normal];
s242 -> s244 [fontsize=11, fontname="Courier", arrowsize=.7, label = "<element>", arrowhead = normal];
s244 -> s245 [fontname="Times-Italic", label="&epsilon;"];
s245 -> s246 [fontsize=11, fontname="Courier", arrowsize=.7, label = "'=>'", arrowhead = normal];
s246 -> s248 [fontsize=11, fontname="Courier", arrowsize=.7, label = "<block>", arrowhead = normal];
s248 -> s249 [fontname="Times-Italic", label="&epsilon;"];
s249:p0 -> s247 [fontname="Times-Italic", label="&epsilon;", style="dashed"];
s249:p1 -> s250 [fontname="Times-Italic", label="&epsilon;"];
s250 -> s251 [fontname="Times-Italic", label="&epsilon;"];
s251 -> s252 [fontsize=11, fontname="Courier", arrowsize=.7, label = "'}'", arrowhead = normal];
s252 -> s25 [fontname="Times-Italic", label="&epsilon;"];
}
</graphviz>

how to display dot MAPs

  • For UNIX users ( since assumes a PATH of /usr/bin/dot )

Using an old version of Graphviz I fixed to display dot maps (nodes that when you click on them link to a URL ie another page in your wiki or an external link.)

This is a fragment of the render section of the syntax file ie ( I replaced my render function with this ):

r.php
  /**
   * Create output
   */
  function render($mode, &$renderer, $data) {
    global $conf;
    global $gr_ext;
    $gr_ext='png';
    $grf_ext='.'.$gr_ext;
    if($data[1] == 'map' && strlen($data[0]) > 1) {
      if ( !is_dir($conf['mediadir'] . '/graphviz') ) 
	io_mkdir_p($conf['mediadir'] . '/graphviz'); //Using dokuwiki framework
      $hash = md5(serialize($data));
      $filename = $conf['mediadir'] . '/graphviz/'.$hash.$grf_ext;
      $url = ml('graphviz:'.$hash.$grf_ext); //Using dokuwiki framework
 
      //$renderer->doc .= '<p> valor filename=['.$filename.']</p>';
      //$renderer->doc .= '<p> valor url=['.$url .']</p>';
 
      // if already exist render
      if ( is_readable($filename) ) {
	// cached.
 
        // generate the map to variable
        $kk1 = "sed '1d'|sed '\$d'";
        $cmd = "echo '$data[0]' | /usr/bin/dot -Tcmapx | ".$kk1;
 	//$renderer->doc .= '<p> DSP-graph value cmd=>['.$cmd.']</p>'; //Debug cmd
        exec( $cmd, $map);
        //$renderer->doc .= '<p> valor map=['.$map .']</p>';
        $maphtml = implode("\n",$map);
        // add the target - cant do this with DOT
        $maphtml = str_replace("<area ", "<area target=\"".$hash."\" ",$maphtml);
 
        // Include Map in the page
	$renderer->doc .= '<map id="'.$hash.'" name="'.$hash.'">';
 	$renderer->doc .= $maphtml;
 	$renderer->doc .= '</map>';
 
        // Link the Image below with the map above by hash
	$renderer->doc .= '<img src="'.$url.'" border="0" usemap="#'.$hash.'" Ismap>';
 
	return true;
      }
 
      if (!$this->createImageMap($filename, $data[0], $data[1])) {
 
        // generate the map 
        $kk1 = "sed '1d'|sed '\$d'";
        $cmd = "echo '$data[0]' | /usr/bin/dot -Tcmapx | ".$kk1;
 	//$renderer->doc .= '<p> CR-graph value cmd=>['.$cmd.']</p>'; //Debug cmd
        exec( $cmd, $map);
        $maphtml= implode("\n",$map);
        // add the target - cant do this with DOT
        $maphtml=str_replace("<area ", "<area target=\"".$hash."\"",$maphtml);
 
        // Include Map in the page
	$renderer->doc .= '<map id="'.$hash.'" name="'.$hash.'">';
 	$renderer->doc .= $maphtml;
 	$renderer->doc .= '</map>';
 
        // Link the Image below with the map above by hash
	$renderer->doc .= '<img src="'.$url.'" border="0" usemap="#'.$hash.'" Ismap>';
 
      } else {
	$renderer->doc .= '**ERROR RENDERING GRAPHVIZ**';
      }
      return true;
   }

My 2 cents to this wonderful dokuwiki community that has given me so much through the years.

Regards,
Enrique M

Sign update: “UnUZYQK2Yh4qWKI4U5rMjU9IdfGvDSWWQP+rVbQA/oo=”

Compatibility

Not working after upgrade to [2016-06-26a] “Elenor of Tsort”. Would be great to see a fix. We use this heavily. The upgrade fixed the slow LDAP performance, but we lost all our graphs :-( .

Fabio.


It seems to be compatible with “Rincewind”, but I don't dare to list it as compatible based on only my test.

I use it in Rincewind, it seems to work fine for me! Thanks for this great plugin! jdt

I use it in Rincewind but it did not work as all my graphics disapeared (see issue 4. But I seem to have found a workaround since my problem seemed to be a cache problem:

syntax.php
 
    /**
     * Return path to the rendered image on our local system
     */
    function _imgfile($data){
        if($conf['debug']){
            dbglog($cache, 'image file cache');
        }
        $cache  = $this->_cachename($data,'png');
                // create the file if needed
+++        /*******************************************************
+++        ****  CSJ added line ****/
+++        clearstatcache();
+++        /*******************************************************/
 
 
        if(!file_exists($cache)){
            $in = $this->_cachename($data,'txt');
            if($this->getConf('path')){
                $ok = $this->_run($data,$in,$cache);
            }else{
                $ok = $this->_remote($data,$in,$cache);
            }
            if(!$ok) return false;
            clearstatcache();
        }
 
        // resized version
        if($data['width']){
            $cache = media_resize_image($cache,'png',$data['width'],$data['height']);
        }
 
        // something went wrong, we're missing the file
        if(!file_exists($cache)) return false;
        //print $cache;
        return $cache;
    }



So there you go!

Enjoy.
Claude

—-

Dokuwiki Farmer issue

It did not work for our wiki which makes use of dokuwiki-farmer. Adding unset($data['animal']); in syntax.php in the function _cachename solved the problem.:

function _cachename($data,$ext){
        unset($data['width']);
        unset($data['height']);
        unset($data['align']);
+++	unset($data['animal']);
        return getcachename(join('x',array_values($data)),'.graphviz.'.$ext);
    }

When trying to debug I also realized that $conf['debug'] is never set but i guess it is $conf['allowdebug'].

FAQ

How do I get anti-aliased images ?

Make sure you have a Graphviz version compiled against Cairo, this will cause it to use it by default, and results in anti-aliased images.

Does the server need an access to Internet ?

Yes, it uses Google API to generate graphs.

How to read external dot File?

How can i render an external (autogenerated) dot file?

plugin/graphviz.txt · Last modified: 2017-04-01 18:26 by 184.89.15.151