discourse-d3-graphviz

A Discourse theme component for rendering animated Graphviz graphs using DOT source code. Based on d3-graphviz.

Usage

Basic

See the Graphviz site for documentation and examples.

To use with a discourse post, wrap the graph defintion in dot tags like this:

[dot] digraph {a -> b} [/dot]

Multi-line is also supported:

[dot]
digraph {
  a -> b
}
[/dot]

Animated transition

An animated transition between multiple graphs is shown when more than one graph is added to the same paragraph of a post like so:

[dot] digraph {bgcolor=lightblue a -> b} [/dot]
[dot] digraph {bgcolor=lightblue a -> b; a -> c} [/dot]
[dot] digraph {bgcolor=lightblue a -> b; a -> c; b -> c} [/dot]

or

[dot]
digraph {
a -> b
}
[/dot]
[dot]
digraph {
a -> b
a -> c
}
[/dot]
[dot]
digraph {
a -> b
a -> c
b -> c
}
[/dot]

Paragraphs are separated by blank lines, so this will generate three separate graphs:

[dot] digraph {bgcolor=lightblue a -> b} [/dot]

[dot] digraph {bgcolor=lightblue a -> b; a -> c} [/dot]

[dot] digraph {bgcolor=lightblue a -> b; a -> c; b -> c} [/dot]

Installation

See How do I install a Theme or Theme Component?