WP GraphViz

GraphViz is a powerful tool for visualising network and tree structures that connect objects.

This WP GraphViz WordPress plugin provides a shortcode mechanism to create GraphViz graphics within blogs, using the shortcode mechanism and without the need to install a local DOT engine.

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 Chris Luke as author of TFO Graphviz, e.g. for providing the inspiration for this readme:

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

Installation

  1. Upload wp-graphviz.zip to the /wp-content/plugins/ directory.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Use shortcode [wp_graphviz]<dot code>[/wp_graphviz] in your posts or pages.

Frequently Asked Questions

  1. 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.
  2. How do I use this plugin?
    Use the [wp_graphviz]<dot code>[/wp_graphviz] shortcode. Various uses are explained in the “How to use” section below.
  3. 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.

Screenshots

  1. Test WP_GraphVizThe result of a test post using:
    [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
    First version starting the plugin.

Upgrade Notice

  • 0.1.0
    As this is the first version, there is no upgrade info yet.

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 form wp_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 `svg`. 
  • 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 the digraph comes from. simple defaults to no.

    The generated image would look like:

    wpg_div_wp_graphviz_1
  • title="<title>"
    Indicates the title of the image. This is used in the alt and title attributes of the image reference. This defaults to an empty string. Note that image maps may indicate a title string which will appear in tool-tips. 
  • showdot="true|false"
    If set to “true“, this option will show the graph DOT code used to generate the graph itself. The default is “false“. It can be used to debug the DOT code e.g. when it is generated by another plugin. 
Posted in Plugins.

16 Comments

  1. Is this plugin used to generate an interactive output? that is to say, I do not want an image to the exit, but an interactive diagram sensitive to redirect me to other pages. This plugin serves me for that?

  2. Hi
    How could I make the rendered image responsive in wordpress blog? It extends beyond screen in mobile

  3. Hmm is anyone else experiencing problems with the pictures on this
    blog loading? I’m trying to find out if its a problem on my end or if
    it’s the blog. Any responses would be greatly appreciated.

  4. I do agree with all of the ideas you’ve introduced for your post.

    They are very convincing and will certainly work.
    Still, the posts are too short for newbies. Could you please prolong them a bit from
    next time? Thanks for the post.

    • Thanks for the compliment.
      And I agree with you that the information on this post is limited.
      However, instead of replicating, I would like to point you to the GraphViz site with examples in the gallery.

  5. I have been surfing online more than three hours today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    Personally, if all webmasters and bloggers made good content
    as you did, the internet will be a lot more useful
    than ever before.

  6. Thanks for the plugin.

    Can you make the window in which the graph is drawn scrollable please ? My graphs are big and so the diagram spills to right side on top of the widgets in the right sidebar

    • Sorry, making a scrollable image is part of the css used on the image.
      You could do this yourself, e.g. by surrounding the image in a <div> or <iframe>.

      Another option would be to rescale the image itself using the size parameter of the graphviz language.
      The page Test WP GraphViz Size shows an example on how to use this.

  7. I wants to create user connection tree where once you click on UserABC, you can find it in graphical way if any connections to this user. I mean i wish to see any possible connection with this user. Please help.

    • Unfortunately, this is not (yet) supported by this plugin. It may however be a nice additional feature for a next version. Thanks for the suggestion.

      Any other remarks are also very welcome to improve this plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *