Description
GraphViz is a powerful tool for visualising network and tree structures that connect objects.
This WordPress plugin provides a shortcode mechanism to create GraphViz graphics within blogs, using the shortcode mechanism.
It’s working is based on the viz.js code as provided by Mike Daines:
https://github.com/mdaines/viz.js
Special thanks goes to chrisy as author of TFO Graphviz, e.g. for providing the inspiration for this readme:
https://wordpress.org/plugins/tfo-graphviz/
How to use WP GraphViz
The shortcode syntax is:
[wp_graphviz <options>]
<DOT code>
[/wp_graphviz]
Where <options>
is anything from this list. All are entirely optional:
-
id="
<id>"
Provides the identifier used to link the generated image to an image map. If you use the
simple
option then it also provides the name of the generated DOT graph container (since GraphViz uses this to generate the image map). If not given then an identifier is generated with the formwp_graphviz_N
where N is an integer that starts at one when the plugin is loaded and is incremented with use. -
output="<png|gif|jpg|svg>"
Indicates the desired image format. Defaults to
png
. -
simple="yes|no"
The
simple
option provides a very basic DOT wrapper around your code such that the following is possible:[wp_graphviz simple="yes"] a -> b -> c; [/wp_graphviz]
The generated code would look like:
digraph wp_graphviz_1 { a -> b -> c; }
See the
id
option for a description of where the name of thedigraph
comes from.simple
defaults tono
. -
title="
<title>"
Indicates the title of the image. This is used in the
alt
andtitle
attributes of the image reference. This defaults to an empty string. Note that image maps may indicate atitle
string which will appear in tool-tips.
Screenshots
Installation
- Upload
wp-graphviz.php
to the/wp-content/plugins/
directory - Activate the plugin through the βPluginsβ menu in WordPress
- Use shortcode
[wp_graphviz]<dot code>[/wp_graphviz]
in your posts or pages
FAQ
-
What is GraphViz?
-
GraphViz is a way of generating visualisations of structural relationships between objects.
Almost any kind of diagram where something connects to something else can be drawn and automatically laid out using the DOT language. -
How do I use this plugin?
-
Use the
[wp_graphviz]
shortcode. Various uses are explained in the βHow to useβ section. -
How do I write DOT?
-
The online documentation for GraphViz is terse and not especially helpful, in particular the DOT language page is only helpful if you happen to be able to read an approximation of BNF.
There are however several other introductions to Graphviz and DOT, including an excerpt on the O’Reilly LinuxDevCenter.com site.
Another approach would be to look at the examples in the Graphviz gallery.If in doubt, find an example and experiment with it.
Reviews
Contributors & Developers
“WP-GraphViz” is open source software. The following people have contributed to this plugin.
Contributors“WP-GraphViz” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “WP-GraphViz” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.5.1
- Tested for WordPress 6.2.2.
1.5.0
- Tested for WordPress 5.4.
1.4.0
- Tested for WordPress 5.0.
1.3.0
- Replaced viz.js with viz-lite.js to reduce footprint only supporting dot and svg options.
- Fixed shortcode handling keeping only those that work with viz-lite.
- Disabled wptexturize for WP_GraphViz shortcode.
- Formal version, tested for WP 4.7.4.
- Fixed translations.
1.2.1
- Fixed translation handling using localization functions.
1.2.0
- Formal version, tested for WP 4.6.1.
- Added shortcode parameters.
1.1.0
- Formal version, tested for WP 4.0.
- Added icon-128×128.png to support plugin icons.
1.0.0
- First formal version, improved reference data.
- Updated the viz.js library to latest version.
0.1.0
- First version starting the plugin.