This graph shows every note on the site, with each note coloured by its category. A solid line joins two notes when one of them links to the other, and a faint dotted line joins notes that share a tag.

Inspired by Obsidian's Graph view plugin

The graph turns slowly in three dimensions. You can drag empty space to move the graph across the page, and drag a note to pull it, which stretches its links and draws its neighbours along. To turn the graph by hand, drag with the Shift key or the right mouse button held down, or with two fingers on a phone. To zoom in and out, scroll over it, pinch it on a phone, press + or −, or use the buttons in its corner, which also reset the view and stop the turning. The arrow keys move the graph once you click on it. If you hover over a note, you can see its title, and if you click on it, the note opens. On a phone or a tablet, the first tap on a note shows its title and a second tap opens it.

The idea behind the graph

The German sociologist Niklas Luhmann kept his notes on index cards in a set of wooden drawers, which he called his Zettelkasten, or slip box. He wrote one idea on each card, gave every card an address, and wrote on it the addresses of the other cards it related to, so that over the forty-odd years he kept it, the box grew into a web of some 90,000 connected cards. Luhmann thought of the box as a partner in conversation. When he sat down to write, he followed the links from card to card, and he often ended up somewhere he had not planned to go. If you want to try the method yourself, the overview at zettelkasten.de is a good place to start. Abram Demski’s The Zettelkasten Method on LessWrong describes how he keeps one and what it has done for his research, and Bob Doto has gathered his own writing on the Zettelkasten on his site.

A whole family of note-taking software has grown out of this idea. Roam Research made backlinks popular, where every note also lists the notes that point to it, so that you can follow a link in either direction. Obsidian keeps your notes as plain Markdown files in a folder on your own computer and draws the links between them as a graph, much like the one above. Zettlr is a free and open-source Markdown editor made with academic writing in mind, and it borrows Luhmann’s habit of giving each note an ID, besides citing straight from a Zotero library. I write these notes with Foam, which brings the same ideas to VS Code as an extension.

I should say that I do not keep a strict Zettelkasten here. Luhmann’s cards each held a single idea, while most of my notes are longer pieces, closer to lecture notes, tutorials and reading lists in the traditional academic sense. I link them to each other whenever one note leads naturally to another, and the graph shows where those links have grown so far.

When people publish their linked notes on the web and keep tending them over time, the result is often called a digital garden, a fascinating idea really. My own collection of notes is something like this so-called digital garden. A blog post is finished and dated, but a garden is allowed to stay a little messy, and its notes keep growing and changing as their author learns more. Maggie Appleton has written a lovely history of the idea, if you are curious.

I am no gardener, though, and I tend to these notes only now and then. The neat, carefully pruned kind of garden has never quite been my thing, and bonsai, I suspect, is for older and more patient people. I have a soft spot for cosy woods and dense wilderness instead, where things grow as they please and you find your own way through. I would like these notes to feel a little more like that, simple and natural, with a bit of style. A fair warning: the woods can be scary at night, and rainforests can be downright terrifying even during the day!

There are a couple of good ways to grow such a garden with Jekyll. Maxime Vaillancourt’s Digital Garden Jekyll Template understands [[wikilinks]], shows the backlinks under each note, and draws a graph of the notes. hikerpig’s foam-jekyll-template publishes a Foam workspace in a similar way, and the idea for this site came from it. Here, Jekyll turns Foam’s links into ordinary links when it builds the site, lists the notes that link to a post at the bottom of that post, and draws the graph above from the links and the tags.