D3 Graphviz Theme Component

theme-component
1

The D3 Graphviz Theme Component allows you to add animated Graphviz graphs to your post using the DOT language. Based on d3-graphviz.

Repository: GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code

Installation

See How do I install a Theme or Theme Component?

Usage

Static graphs

This is just a brief introduction. You may want to read the detailed Render Graphviz graphs directly in your posts - Announcements - Graphviz which shows the theme component in action or join the Graphviz fourm where you can use it yourself.

To render a graph inline in your post, wrap the graph definition in dot tags like this:

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

The block form is also supported:

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

Animated transitions between graphs

An animated transition between multiple graphs is shown when more than one graph is added to the same paragraph of a post and there is only whitespace between them:

[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]

Options

The graphs and the animated transitions are highly customizable by options that you can add to the dot tag. See Render Graphviz graphs directly in your posts - Announcements - Graphviz.

6 Likes
2

A client yesterday reported that all of the content of their posts was missing. I disabled this theme to resolve the problem.

I think this should be moved to #theme:broken-theme , but wondered if anyone else has had trouble.

3 Likes
3

Yes there are a bunch of edge cases with this approach, recommend anyone wanting graphviz use:

3 Likes
4

@pfaffman Apologies for not seeing this post and acting on it earlier. I must have turned off notifications by mistake. I noticed this problem myself back in the day, but hadn’t time to deal with it then, didn’t remember that I had posted this and wasn’t aware of anybody else using it.

I happy to announce that the d3-graphviz theme component is now working again. You can see it in action at Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam Can you remove the broken tag now?

3 Likes