WP GraphViz

GraphViz is een krachtig tool voor de visualisatie van netwerk- en boomstructuren waarbij objecten met elkaar verbonden zijn.

Deze WordPress plug-in biedt een shortcode mechanisme om GraphViz afbeeldingen te tonen in blog berichten en pagina’s zonder de noodzaak van een lokale DOT installatie.

De werking is gebaseerd op de viz.js code zoals die ontwikkeld is door Mike Daines:

https://github.com/mdaines/viz.js

Ook gaat dank uit naar Chris Luke als de auteur van TFO Graphviz, bv. voor de inspiratie voor deze lees mij:

https://wordpress.org/plugins/tfo-graphviz/

Installatie

1. Upload wp-graphviz.zip in de /wp-content/plugins/ folder.
2. Activeer de plug-in via het Plugins menu in WordPress.
3. Gebruik de shortcode [wp_graphviz]<dot code>[/wp_graphviz] in berichten of pagina’s.

Frequently Asked Questions

1. Wat is GraphViz?
   GraphViz is een manier om visualisaties te genereren van gestructureerde relaties tussen objecten. Bijna ieder soort van diagram waarbij iets verbonden is met iets anders kan automatisch getekend worden met behulp van de DOT taal.
2. Hoe gebruik ik deze plug-in?
   Gebruik de [wp_graphviz]<dot code>[/wp_graphviz] shortcode. De sectie “Hoe te gebruiken” hieronder toont verschillende voorbeelden.
3. Hoe schrijf ik DOT?
   De online documentatie voor GraphViz is beperkt en niet echt duidelijk, de DOT taal pagina bijvoorbeeld is slechts bruikbaar als je in staat bent een vorm van BNF te lezen. 

   Er zijn echter verschillende andere introducties (in het Engels) voor Graphviz and DOT, inclusief een samenvatting op de O’Reilly LinuxDevCenter.com site. Je zou ook kunnen kijken naar de voorbeelden in de Graphviz galerij.

   Als je twijfelt, zoek een voorbeeld en speel daar mee.

Screenshots

1. Het resultaat van een test bericht met:
   [WP_GraphViz title="WP_GraphViz Title" type="digraph" id="testid" showdot="true"]
a1 -> a2 -> a3;
a3 -> a1;
a1 [style="rounded,filled", shape=box];
[/WP_GraphViz].

Changelog

• 0.1.0
  Eerste versie van de plug-in.

Upgrade Notice

• 0.1.0
  Omdat dit de eerste versie is, is er nog geen upgrade informatie.

Hoe WP GraphViz te gebruiken?

De shortcode syntax is:

[wp_graphviz <options>] <DOT code>[/wp_graphviz]

Hierbij is <options> een combinatie van de opties die hieronder gegeven zijn. Ze zijn allemaal optioneel:

• id="<id>"
  Geeft een identifier die gebruikt wordt om de gegenereerde afbeelding te identificeren. Als je de simple optie gebruikt, dan geeft het ook de naam van de gegeneerde DOT graph container. Als deze identifier niet gegeven is, wordt er een gegenereerd in de vorm wp_graphviz_N waarbij N een geheel getal is wat begint bij 1 en verhoogd wordt bij elk gebruik. 
• output="<png|gif|jpg|svg>"
  Specificeert het gewenste type van de afbeelding, default is svg. 
• simple="yes|no"
  De simple optie geeft een beperkte DOT wrapper om de code, zodanig dat de volgende syntax mogelijk is: 

  [wp_graphviz simple="yes"] a -> b -> c; [/wp_graphviz]

  De gegenereerde code wordt dan:

  digraph wp_graphviz_1 { a -> b -> c; }

  Zie de id optie voor een beschrijving van waar de naam van de digraph vandaan komt. De default voor simple is no.

  De gegenereerde afbeelding ziet er zo uit:

  wpg_div_wp_graphviz_1
• title="<title>"
  Geeft de titel van de afbeelding. Deze wordt gebruikt in de alt en title attributen van de afbeelding. De default is een lege string. 
• showdot="true|false"
  Als de waarde “true” is, toont deze optie de gegenereerde graph DOT code. De default is “false“. Dit kan gebruikt worden om de DOT code te debuggen, bijvoorbeeld als deze gegenereerd wordt door een andere plug-in.