Generate clickable dot graph for website?

Question

I have a set of markdown files (experiments in a virtual lab notebook) that will be used to generate static webpages, and I'd also like to generate an index to go along with them that shows their relationships as a DAG (directed acyclic graph).

So far, each markdown file starts with metadata like this (for exp3.md):

Follows: exp1.md exp2.md

I run a script to make a DOT language graph of all the experiments:

#!/bin/bash

arrows=$(
  for r in *.md; do
    for l in $(cat "$r" | grep Follows: | cut -d':' -f2); do
      echo "  $l -> $r;"
    done
  done
)

echo "digraph notebook {"
echo "$arrows" | sort | uniq
echo "}"

It comes out like

digraph notebook {
  exp1.md -> exp3.md;
  exp2.md -> exp3.md;
}

But I haven't been able to find any software for turning that into a clickable imagemap. Solutions can be as hacky as needed! I'll just be using this personally and hosting the site on an internal lab network.

Answer 1

Turns out it's not bad. Just add attributes to the DOT graph:

digraph notebook {
  exp1 [label="experiment 1",URL="http://example.com/1"]
  exp2 [label="experiment 2",URL="http://example.com/2"]
  exp3 [label="experiment 3",URL="http://example.com/3"]
  exp1 -> exp3;
  exp2 -> exp3;
}

And create the imagemap code + image:

dot -Tcmapx graph.dot > graph.html
dot -Tpng   graph.dot > graph.png