Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Rendering dot in mdBook

The mdBook theme allows the addition of custom elements to the top of the rendered HTML pages using a file named theme/head.hbs. This is a useful feature for adding specific metadata or scripts that need to be included in the <head> section of each page. Referencing this blog post on rendering dot in markdown file, there are four scripts required. The first three need to be added to head.hbs

<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>

and copy a function into a file script.js1

function d3ize(elem) {
    var par = elem.parentElement;
    d3.select(par).append('div').graphviz().renderDot(elem.innerText);
    d3.select(elem).style('display', 'none');
}

console.log(document.getElementsByClassName(".language-dot"));
var dotelems = document.getElementsByClassName("language-dot");
for (let elem of dotelems) {
    d3ize(elem);
}

in the book.toml file add these lines2.

[output.html]
copy-fonts = true
additional-js = ["script.js"]

and your graph should appear.

digraph G { rankdir = LR; a -> b }

  1. I would have thought I could have included the script itself in the head.hbs file, however, when I attempted it the graph did not render. Which is unfortunate, as it would then require only a single modification. ↩

  2. I also tried adding the remote scripts to the additional-js property, but mdBook build complained of not being able to find the files. ↩