Создать кликабельный точечный график для веб-сайта?

Question

У меня есть набор файлов разметки (эксперименты в виртуальной лабораторной записной книжке), которые будут использоваться для создания статических веб-страниц, и я также хотел бы создать индекс, который будет сопровождать их, который показывает их взаимосвязь в виде DAG (направленного ациклического графа).).

До сих пор каждый файл уценки начинается с метаданных, как это (для exp3.md):

Follows: exp1.md exp2.md

Я запускаю сценарий, чтобы создать график языка DOT для всех экспериментов:

#!/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 "}"

Выходит как

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

Но я не смог найти никакого программного обеспечения для превращения этого в интерактивную карту изображений. Решения могут быть настолько хакерскими, насколько это необходимо! Я просто буду использовать это лично и размещать сайт во внутренней сети лаборатории.

Answer 1

Оказывается, это не плохо. Просто добавьте атрибуты в график DOT:

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;
}

И создайте код imagemap + image:

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