Commit d8b2513
Add support for Graphviz dot diagrams
While Mermaid diagrams are more and more common on the internet, thanks
to GitHub's support in their GitHub-flavored Markdown codeblocks, it is
often frustratingly difficult to make elegant diagrams with them and to
avoid overlapping or unnecessarily long edges.
Graphviz, in contrast, allows much more control over the layout. The
downside is that Graphviz is a command-line program, not a JavaScript
library, and would require the diagrams to be pre-rendered and committed
into the repository (a recipe for out-of-sync files).
Enter `viz.js` (https://github.com/mdaines/viz-js). Essentially, it is a
WebAssembly build of Graphviz. Therefore, it _does_ run in the browser.
The downside, compared to Mermaid, is the size: While `mermaid.min.js`
weighs around 25 kB, `viz-global.js` weighs around 1.4 MB.
And I did not find any CDN that serves a current version, therefore I
had to download it:
npm pack @viz-js/viz
tar Oxvf viz-js-viz-3.16.0.tgz package/dist/viz-global.js \
>static/js/viz-global.js
With this commit, Graphviz dot diagrams can be added like this:
{{< graphviz >}}
digraph {
a -> b -> c
}
{{< /graphviz >}}
Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>1 parent a175ea2 commit d8b2513
File tree
3 files changed
+27
-0
lines changed- layouts
- _default
- shortcodes
- static/js
3 files changed
+27
-0
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
197 | 197 | | |
198 | 198 | | |
199 | 199 | | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | + | |
| 204 | + | |
| 205 | + | |
| 206 | + | |
| 207 | + | |
| 208 | + | |
| 209 | + | |
| 210 | + | |
| 211 | + | |
| 212 | + | |
| 213 | + | |
200 | 214 | | |
201 | 215 | | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments