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

### 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.