https://github.com/magjac/discourse-d3-graphviz
Discourse theme component for rendering animated Graphviz graphs using DOT source code
https://github.com/magjac/discourse-d3-graphviz
discourse dot graphviz theme-component
Last synced: 3 months ago
JSON representation
Discourse theme component for rendering animated Graphviz graphs using DOT source code
- Host: GitHub
- URL: https://github.com/magjac/discourse-d3-graphviz
- Owner: magjac
- License: mit
- Created: 2020-04-24T07:17:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-02T20:11:27.000Z (9 months ago)
- Last Synced: 2025-02-06T16:57:26.402Z (4 months ago)
- Topics: discourse, dot, graphviz, theme-component
- Language: JavaScript
- Homepage: https://graphviz.discourse.group
- Size: 307 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## discourse-d3-graphviz
A Discourse theme component for rendering animated
[Graphviz](https://www.graphviz.org/) graphs using
[DOT](https://www.graphviz.org/doc/info/lang.html) source code. Based
on [d3-graphviz](https://github.com/magjac/d3-graphviz).
### Usage
#### Basic
See the [Graphviz](https://www.graphviz.org/documentation/) 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?](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)