Graphviz

Le site de graphviz

Les diagrammes GraphViz

• Graphviz permet de réaliser des organigrammes facilement, utilisables en ligne de commandes il peut-être scripter, utilisé en PHP, ...
• L'installation se fait via un apt-get -y install graphviz ou yum -y install graphviz
  • Graphviz est composé des programmes principaux suivants :
    • dotty : gui pour la réalisation et/ou l'affichage de fichier .dot (mode graphique)
    • lefty : gui pour la réalisation et/ou l'affichage de fichier .dot (mode texte)
    • dot : conversion de fichier .dot hiérarchique standard
    • neato : conversion de fichier .dot complexe en trame symetrique
    • fdp : conversion de fichier .dot complexe en trame symetrique (plus complet que neato)
    • twopi : conversion de fichier .dot complexe en trame circulaire
    • circo : conversion de fichier .dot complexe en trame circulaire

• Pour plus de détails : le site de Graphviz, la documentation en ligne est très complète.
• L'extension pour mediawiki a été réalisé par CoffMan
• Une alternative permettant d'utiliser les moteurs neato, fdp, ... est disponible ici.
• Vous pouvez télécharger ici ce script php modifié par mes soins.

diagramme simple

explications :

 # prgm dot
 # dot fichier.dot -Tsvg -o fichier.svg
 digraph G{
   A -> B
 }
 

diagramme interactif

explications :

 # prgm dot
 # dot fichier.dot -Tsvg -o fichier.svg
 digraph G3 {
 	graph [URL="[[Graphviz#diagramme_interactif]]"]
 	a [URL="[[a]]"]
	b [URL="[[b]]"]
	c [URL="[[c]]"]
 	a -> b -> c
 	a -> c
 }

Les options principales

• Voici quelques unes des options de graphviz

• Déclaration graph

digraph G {

• Orientation du graph (LR, RL, BT, TB)

rankdir="LR"

• Espacement entre les éléments

ranksep="2"

• taille="largeur,hauteur"

size="12,9"

• couleur du fond

bgcolor="lightblue2"

• couleur - type - taille bordure - type de font - couleur de font - taille de font

node [color="green4", shape=box, style="setlinewidth(1)", fontname=schlbk, fontcolor="lightblue4", fontsize="16"]

• couleur du lien - tête du lien

Accueil -> Cuisine [color="#7D8519" arrowhead="dot"]

• couleur du lien - base du lien

Cuisine -> Accueil [color="#666666" arrowtail="ediamond"]
Accueil -> Linux

• lien vers la page Cuisine - type

Cuisine [URL="Cuisine" shape="triangle" ]
Accueil [URL="Accueil" shape="Mcircle"]
Linux [URL="Linux"]
}

Clusters

• Graphviz permet de faire des grappes grâce au préfixe cluster_ et au programme fdp :

• syntaxe :

 # prgm fdp
 # fdp fichier.dot -Tsvg -o fichier.svg
 graph G {
  subgraph cluster_A {
    label="cluster_A"
    a -- b
  }
  subgraph cluster_B {
    label="cluster_B"
    c -- d
  }
  c -- cluster_A
  a -- d
  cluster_A -- cluster_B
 }

custom shapes

Il peut-être sympathique de créer des shapes personnalisée à partir de fichier png ou gif.

• Allez, un petit exemple :

• syntaxe :

 digraph graph_dot {
  bgcolor="#F5F7D4"
  A [shape=none image="/chemin/vers/mynode.png"]
  B [shape=none image="/chemin/vers/mynode.png"]
  C [shape=none image="/chemin/vers/mynode.png"]
  A -> B
  A -> C
 }

record and html nodes

• Record-based nodes
• HTML-based nodes

• exemple :

• syntaxe :

digraph recordgraph {
  node [shape=record];
  subgraph1 [label=" <s1f1> A| { <s1f2s1> K| { <s1f2s2> N| <s1f2s2> O } | <s1f2s3> M} | <s1f3> C"];
  subgraph2 [label=" <s2f1> D| <s2f2> E"];
  subgraph3 [label="<s3f1> F| { <s3f2s1> G| <s3f2s2> H} | <s3f3> I"];
  subgraph1:s1f1 -> subgraph2:s2f1;
  subgraph1:s1f3 -> subgraph3:s3f2s2;
  subgraph1:s1f2s2 -> subgraph3:s3f2s1;
 }

Scripts autour de graphviz

Petit script pour mediawiki

Ce petit script utilise gawk, il permet de réaliser pour une wiki basée sur mediawiki, la représentation graphique de votre wiki.

wiki_graphviz.awk

BEGIN {
        print "<graphviz>digraph G {\nsize=\"10,10\"\nnode [color=lightblue3, style=\"setlinewidth(3)\", shape=box]"
}

FNR != 1 {
        print $1 " -> " $2;
        print $2 " [URL=\"" $2 "\"]"
}

END {
        print "}</graphviz>"
}

wiki_graphviz.sh

#!/bin/bash
# script automatisant la réalisation du graph de la wiki sur sa page d'accueil

# déclaration des variables
wiki_data=/tmp/wiki_data.tmp
wiki_graphviz=/tmp/wiki_graphviz.tmp
wiki_awk=/opt/shell/wiki/wiki_graphviz.awk

# recupération des données
echo "SELECT page_title,pl_title FROM wiki_page INNER JOIN wiki_pagelinks \
 ON wiki_page.page_id = wiki_pagelinks.pl_from WHERE wiki_page.page_namespace = '0' \
 AND  wiki_pagelinks.pl_namespace = '0' ORDER BY pl_from;" \
 | mysql -uwikiuser -pwikipassword -Dwikidatabase > $wiki_data

# traitement des données récupérées
gawk -f "$wiki_awk" "$wiki_data" > "$wiki_graphviz"

# on affiche les données
echo "$wiki_graphviz :"
echo ""
cat "$wiki_graphviz"

Utilisation :

./wiki_graphviz.sh

Copier-coller le code généré dans votre wiki, Vous pouvez cliquer sur le graph il vous enverra où vous souhaitez.

Petit script pour mediawiki (alternative python)

Idem que le script précédent mais avec le choix de deux modes : catégories ou pages, il est disponible ici

Script PHP pour utiliser Graphviz via une page web

<?php

$prgmDOT = "/usr/bin/dot";
$fdot = "graph/hello.dot";
$fpng = "graph/hello.png";

$dot_data = "digraph G {
	node [ style=filled shape=box color=\"lightblue\" fontcolor=\"#FFF000\"]
	essai->ooo
	bidule->ooo
	test->ooo
	}";

$handle = fopen($fdot, "w");
fwrite($handle, $dot_data);
fclose($handle);

$cmdline = exec($prgmDOT . " -Tpng -o " . $fpng . " " . $fdot);

echo '<img src="' . $fpng . '" alt="graphviz" />';

?>

Script python pour générer un SiteMap

• tree_graphviz_dir.py

Applications utilisant graphviz

visitors

Visitors vous permet de réaliser rapidement une page html ou de texte brut afin d'analyser les visites d'un site web. Sur le site officiel vous pourrez trouver des informations complémentaires. Il peut utiliser graphviz aussi.

$ visitors -A --exclude "site1" --exclude "10.0.0.[0-9]*" /tmp/site.log > /tmp/site.html

Autres

• GRAMPS
• ntop
• pimki
• gressgraph