# D3 Graphviz Theme Component
**URL:** https://meta.discourse.org/t/d3-graphviz-theme-component/153031
**Category:** Theme component
**Created:** [May 27, 2020, 9:57pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031 "2020-05-27T21:57:27Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@magjac](https://meta.discourse.org/u/magjac)
#### Post date: [May 27, 2020, 9:57pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/1 "2020-05-27T21:57:27Z")
The [D3 Graphviz Theme Component](https://github.com/magjac/discourse-d3-graphviz) allows you to add animated [Graphviz](https://www.graphviz.org/) graphs to your post using the [DOT](https://www.graphviz.org/doc/info/lang.html) language. Based on [d3-graphviz](https://github.com/magjac/d3-graphviz).
**Repository:** [GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub](https://github.com/magjac/discourse-d3-graphviz)
### Installation
See [How do I install a Theme or Theme Component?](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
### 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](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125) which shows the theme component in action or join the [Graphviz fourm](https://forum.graphviz.org/) where you can use it yourself.
To render a graph inline in your post, wrap the graph definition in `dot` tags like this:
```plaintext
[dot] digraph {a -> b} [/dot]
```
The block form is also supported:
```plaintext
[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:
```plaintext
[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
```plaintext
[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:
```plaintext
[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](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125).
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 18, 2021, 6:47pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/2 "2021-04-18T18:47:02Z")
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 #customization:theme:broken-theme , but wondered if anyone else has had trouble.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 19, 2021, 1:24am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/3 "2021-04-19T01:24:05Z")
Yes there are a bunch of edge cases with this approach, recommend anyone wanting graphviz use:
> [@Discourse Graphviz](https://meta.discourse.org/t/graphviz-plugin/97554):
>
> discourse2Summary Discourse Graphviz provides the ability to add graphs to posts using the DOT language.open_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately. Features This plugin uses the [Viz.js](https://github.com/mdaines/viz.js) library to render graphs. To embed a graph use [graphviz] [/graphviz] bbcode. Optionally you can define layout engine attributes: [graphviz engine=neato]. If engine is not defined, it defaults to the dot engine…
---
### Author:  [@magjac](https://meta.discourse.org/u/magjac)
#### Post date: [January 14, 2024, 3:57pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/4 "2024-01-14T15:57:35Z")
@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](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125).
@sam Can you remove the `broken` tag now?
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [April 27, 2024, 11:23pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/5 "2024-04-27T23:23:25Z")
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…
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 27, 2024, 11:55pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/6 "2024-04-27T23:55:21Z")
Did you try the plugin instead? It seems more stable.
> [@Discourse Graphviz](https://meta.discourse.org/t/graphviz-plugin/97554):
>
> discourse2Summary Discourse Graphviz provides the ability to add graphs to posts using the DOT language.open_bookInstall Guide This plugin is bundled with Discourse core. There is no need to install the plugin separately. Features This plugin uses the [Viz.js](https://github.com/mdaines/viz.js) library to render graphs. To embed a graph use [graphviz] [/graphviz] bbcode. Optionally you can define layout engine attributes: [graphviz engine=neato]. If engine is not defined, it defaults to the dot engine…
> [@fbpbdmin](#):
>
> 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…
You probably need to allow these links:
>
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [April 28, 2024, 12:19am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/7 "2024-04-28T00:19:24Z")
thanks @Arkshine
our hosted instance does not include the graphviz plugin for the plan ☹
tried adding these 3 files into the " content security policy script src" setting, it does not work…
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 28, 2024, 12:58am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/8 "2024-04-28T00:58:42Z")
Can you try this component instead?
[https://github.com/discourse/discourse-graphviz-theme-component](https://github.com/discourse/discourse-graphviz-theme-component)
This is a better way to integrate third-party libraries to avoid CSP issues.
_Note_: the wrapper is different; it’s not bbcode.
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [April 28, 2024, 2:16am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/9 "2024-04-28T02:16:24Z")
thanks, @Arkshine
it works !
---
### Author:  [@magjac](https://meta.discourse.org/u/magjac)
#### Post date: [April 29, 2024, 8:24pm UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/10 "2024-04-29T20:24:39Z")
If you are satisfied with single static graphs, the **[discourse-graphviz-theme-component](https://github.com/discourse/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:
> **[Render Graphviz graphs directly in your posts](https://forum.graphviz.org/t/render-graphviz-graphs-directly-in-your-posts/125)**
>
> Render graphs directly in your posts with \[dot\]your DOT source here\[/dot\]. When you are posting something here at the forum and want to show a graph that is generated by some DOT source code; wouldn’t it be great if you could just generate the...
No whitelisting is necessary. This is our setup:
---
### Author:  [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### Post date: [April 30, 2024, 12:14am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/11 "2024-04-30T00:14:43Z")
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…
> [@D3 Graphviz Theme Component](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/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…
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 30, 2024, 1:36am UTC](https://meta.discourse.org/t/d3-graphviz-theme-component/153031/12 "2024-04-30T01:36:52Z")
> [@fbpbdmin](#):
>
> some settings change to make it work
Unfortunately, he’s using the new setting that uses strict dynamic CSP, which you don’t have in 3.2.1.