Skip to content

Commit 69b8750

Browse files
committed
Add support for rendering Graphviz diagrams
I tried to add some Mermaid diagrams, but they simply do not look good. Graphviz offers much better control over the layout. Unfortunately, unlike Mermaid (which is a JavaScript library), Graphviz is a command-line program, and therefore not available in the browser. Fortunately, some helpful people maintain a WebAssembly version of Graphviz, which _is_ a JavaScript library: https://github.com/mdaines/viz-js Unfortunately, unlike Mermaid (which weighs ~25kB), the GraphViz WebAssembly weighs 1.4MB. But that's not quite correct, as Mermaid then loads another half megabyte, whereas `viz-js` does not load anything. The `viz-global.js` file was downloaded via: npm pack @viz-js/[email protected] tar Oxvf viz-js-viz-3.17.0.tgz package/dist/viz-global.js \ >static/js/viz-global.js Signed-off-by: Johannes Schindelin <[email protected]>
1 parent a471c8e commit 69b8750

File tree

3 files changed

+27
-0
lines changed

3 files changed

+27
-0
lines changed

layouts/_default/baseof.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,18 @@
1212
{{ .Content }}
1313
{{ end }}
1414
</body>
15+
{{- if .Store.Get "hasGraphviz" }}
16+
<script src="{{ relURL "js/viz-global.js" }}"> </script>
17+
<script type="text/javascript">
18+
window.addEventListener("DOMContentLoaded", async () => {
19+
for (const x of [...document.querySelectorAll("pre[class=graphviz]")]) {
20+
if (x.style.display === 'none') return
21+
const engine = x.getAttribute('engine') || 'dot'
22+
const svg = (await Viz.instance()).renderSVGElement(x.innerText, { engine })
23+
x.parentNode.insertBefore(svg, x)
24+
x.style.display = 'none'
25+
}
26+
})
27+
</script>
28+
{{- end }}
1529
</html>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<pre class="graphviz">
2+
{{- .Inner | htmlEscape | safeHTML -}}
3+
</pre>
4+
{{- .Page.Store.Set "hasGraphviz" true }}

static/js/viz-global.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)