diff --git a/scripts/generate.py b/scripts/generate.py
index 7b2aff0..921f805 100644
--- a/scripts/generate.py
+++ b/scripts/generate.py
@@ -1,5 +1,6 @@
 #!/usr/bin/env python3
 
+import json
 import html
 import logging
 import os
@@ -51,6 +52,7 @@ def main(src_top, dest_top):
     files_generated = 0
 
     os.makedirs(dest_top, exist_ok=True)
+    graph = {}
     for doc in docs:
         relpath = os.path.relpath(doc.path, src_top)
         changed = False
@@ -106,10 +108,47 @@ def main(src_top, dest_top):
         for headline in headlines:
             endpath = os.path.join(dest_top, headline.id + ".node.html")
 
+            links = []
+            for l in headline.get_links():
+                if l.value.startswith('http://') or l.value.startswith('https://'):
+                    pass # Ignore for now, external URL
+                elif l.value.startswith('id:'):
+                    links.append({'target': l.value})
+                elif l.value.startswith('attachment:'):
+                    pass # Ignore, attachment
+                elif l.value.startswith('* '):
+                    pass # Ignore, internal
+                elif l.value.startswith('./'):
+                    pass # TODO: Properly handle
+                else:
+                    raise NotImplementedError('On document {}, link to {}'.format(doc.path, l.value))
+
+            if headline.parent:
+                if isinstance(headline.parent, org_rw.Headline):
+                    links.append({
+                        "target": headline.parent.id,
+                        "relation": "contained-in"
+                    })
+            graph[headline.id] = {
+                "title": headline.title.strip(),
+                "links": links,
+                "depth": headline.depth,
+            }
+
             with open(endpath, "wt") as f:
                 f.write(as_document(render(headline, doc, headlineLevel=0)))
                 files_generated += 1
 
+    graphpath = os.path.join(dest_top, "graph.json")
+    graph_explorer_path = os.path.join(dest_top, "graph.html")
+    with open(graphpath, "wt") as f:
+        json.dump(obj=graph, fp=f, indent=2)
+    graph_explorer_path = os.path.join(dest_top, "graph.html")
+    with open(graph_explorer_path, 'wt') as f:
+        with open(os.path.join(os.path.dirname(os.path.abspath(dest_top)), 'static', 'graph_explorer.html'), 'rt') as template:
+            source = template.read()
+        f.write(source.replace('<!-- REPLACE_THIS_WITH_GRAPH -->',
+                               json.dumps(graph)))
     logging.info("Generated {} files".format(files_generated))
 
 
diff --git a/static/graph_explorer.html b/static/graph_explorer.html
new file mode 100644
index 0000000..f903080
--- /dev/null
+++ b/static/graph_explorer.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Graph Explorer</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script type='text/javascript'>
+      var NODE_GRAPH=<!-- REPLACE_THIS_WITH_GRAPH -->;
+    </script>
+    <script>
+      // Copyright 2021 Observable, Inc.
+// Released under the ISC license.
+// https://observablehq.com/@d3/disjoint-force-directed-graph
+function ForceGraph({
+  nodes, // an iterable of node objects (typically [{id}, …])
+  links // an iterable of link objects (typically [{source, target}, …])
+}, {
+  nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)
+  nodeGroup, // given d in nodes, returns an (ordinal) value for color
+  nodeGroups, // an array of ordinal values representing the node groups
+  nodeTitle, // given d in nodes, a title string
+  nodeFill = "currentColor", // node stroke fill (if not using a group color encoding)
+  nodeStroke = "#fff", // node stroke color
+  nodeStrokeWidth = 1.5, // node stroke width, in pixels
+  nodeStrokeOpacity = 1, // node stroke opacity
+  nodeRadius = 5, // node radius, in pixels
+  nodeStrength,
+  linkSource = ({source}) => source, // given d in links, returns a node identifier string
+  linkTarget = ({target}) => target, // given d in links, returns a node identifier string
+  linkStroke = "#999", // link stroke color
+  linkStrokeOpacity = 0.6, // link stroke opacity
+  linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels
+  linkStrokeLinecap = "round", // link stroke linecap
+  linkStrength,
+  colors = d3.schemeTableau10, // an array of color strings, for the node groups
+  width = 640, // outer width, in pixels
+  height = 400, // outer height, in pixels
+  invalidation // when this promise resolves, stop the simulation
+} = {}) {
+  // Compute values.
+  const N = d3.map(nodes, nodeId).map(intern);
+  const LS = d3.map(links, linkSource).map(intern);
+  const LT = d3.map(links, linkTarget).map(intern);
+  if (nodeTitle === undefined) nodeTitle = (_, i) => N[i];
+  const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle);
+  const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);
+  const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth);
+
+  // Replace the input nodes and links with mutable objects for the simulation.
+  nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
+  links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));
+
+  // Compute default domains.
+  if (G && nodeGroups === undefined) nodeGroups = d3.sort(G);
+
+  // Construct the scales.
+  const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);
+
+  // Construct the forces.
+  const forceNode = d3.forceManyBody();
+  const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
+  if (nodeStrength !== undefined) forceNode.strength(nodeStrength);
+  if (linkStrength !== undefined) forceLink.strength(linkStrength);
+
+  const simulation = d3.forceSimulation(nodes)
+      .force("link", forceLink)
+      .force("charge", forceNode)
+      .force("x", d3.forceX())
+      .force("y", d3.forceY())
+      .on("tick", ticked);
+
+  const svg = d3.create("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("viewBox", [-width / 2, -height / 2, width, height])
+      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+
+  const link = svg.append("g")
+      .attr("stroke", linkStroke)
+      .attr("stroke-opacity", linkStrokeOpacity)
+      .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null)
+      .attr("stroke-linecap", linkStrokeLinecap)
+    .selectAll("line")
+    .data(links)
+    .join("line");
+
+  if (W) link.attr("stroke-width", ({index: i}) => W[i]);
+
+  const node = svg.append("g")
+      .attr("fill", nodeFill)
+      .attr("stroke", nodeStroke)
+      .attr("stroke-opacity", nodeStrokeOpacity)
+      .attr("stroke-width", nodeStrokeWidth)
+    .selectAll("circle")
+    .data(nodes)
+    .join("circle")
+      .attr("r", nodeRadius)
+      .call(drag(simulation));
+
+  if (G) node.attr("fill", ({index: i}) => color(G[i]));
+  if (T) node.append("title").text(({index: i}) => T[i]);
+
+  // Handle invalidation.
+  if (invalidation != null) invalidation.then(() => simulation.stop());
+
+  function intern(value) {
+    return value !== null && typeof value === "object" ? value.valueOf() : value;
+  }
+
+  function ticked() {
+    link
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
+
+    node
+      .attr("cx", d => d.x)
+      .attr("cy", d => d.y);
+  }
+
+  function drag(simulation) {    
+    function dragstarted(event) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      event.subject.fx = event.subject.x;
+      event.subject.fy = event.subject.y;
+    }
+    
+    function dragged(event) {
+      event.subject.fx = event.x;
+      event.subject.fy = event.y;
+    }
+    
+    function dragended(event) {
+      if (!event.active) simulation.alphaTarget(0);
+      event.subject.fx = null;
+      event.subject.fy = null;
+    }
+    
+    return d3.drag()
+      .on("start", dragstarted)
+      .on("drag", dragged)
+      .on("end", dragended);
+  }
+
+  return Object.assign(svg.node(), {scales: {color}});
+}
+    </script>
+    <style>
+      body, html {
+          padding: 0;
+          margin: 0;
+      }
+      #graph_holder {
+          padding: 0;
+          margin: 0;
+          width: 100vw;
+          height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="graph_holder">
+    </div>
+    <script>
+      var edges = [];
+      for (var source of Object.keys(NODE_GRAPH)) {
+          for (var target of NODE_GRAPH[source].links) {
+              var node_id = target.target;
+              
+              if (node_id.startsWith('id:')) {
+                  node_id = node_id.substring(3);
+              }
+              if (NODE_GRAPH[node_id] === undefined) {
+                  continue;
+              }
+              edges.push({source, target: node_id});
+          }
+      }
+      var graph = {
+          nodes: Object.keys(NODE_GRAPH),
+          links: edges,
+      };
+      var holder = document.getElementById('graph_holder');
+      var chart = ForceGraph(graph, {
+          nodeId: d => d,
+          nodeGroup: d => Math.random() * 4 | 0,
+          nodeTitle: d => `${NODE_GRAPH[d].title}`,
+          nodeRadius: d => Math.max(1, 4 - NODE_GRAPH[d.id].depth) * 3,
+          width: holder.clientWidth,
+          height: holder.clientHeight,
+          linkStrokeWidth: 0.5,
+          linkStrength: 1,
+          // invalidation // a promise to stop the simulation when the cell is re-run
+      });
+      holder.appendChild(chart);
+      </script>
+  </body>
+</html>
+
