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.

7 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?

4 Likes
5

I installed this component, (Discourse 3.2.1)
copied the example above into a new post, it does not render as a graph,
could someone confirm, if this one works now, thanks…

this is caused by “Content Security Policy” thing…
not sure what to add in “content security policy script src” setting to make it work… could someone help, thanks…

6

Did you try the plugin instead? It seems more stable.

You probably need to allow these links:

2 Likes
7

thanks @Arkshine
our hosted instance does not include the graphviz plugin for the plan :frowning:
tried adding these 3 files into the " content security policy script src" setting, it does not work…

2 Likes
8

Can you try this component instead?

This is a better way to integrate third-party libraries to avoid CSP issues.

Note: the wrapper is different; it’s not bbcode.

2 Likes
9

thanks, @Arkshine
it works !

2 Likes
10

If you are satisfied with single static graphs, the discourse-graphviz-theme-component is probably enough, but if you want to use animated transitioning between graphs and be able control various aspects of the graph rendering, you might want to try the D3 Graphviz Theme Component. You can see it in action at:

No whitelisting is necessary. This is our setup:

image
image1059Ă—582 98.3 KB

1 Like
11

hey, @magjac
I’d like to try the D3 one for animation, but I got the issue above with the content security policy thing as posted above, some settings change to make it work ?
our instance is on 3.2.1 now. thanks…

12

Unfortunately, he’s using the new setting that uses strict dynamic CSP, which you don’t have in 3.2.1.

1 Like