My Zettelkasten Scripts

How this website is actually created a portable, editable, backlinked knowledge graph with a few cool technical features.

This website is a partial view of my knowledge graph, which is called a zettelkasten.

A Zettelkasten collects ideas that are atomic (one idea per file), autonomous (understand an idea without reading other ideas first) and linked together.

The linking is important - it allows you follow your thoughts as they branch in different directions, and connect ideas together. Over time, just like a mindmap, patterns start to emerge and I’m able to see the big picture and draw conclusions.

Features

My Zettelkasten setup has 7 levels of awesome:

Portable: No vendor lock-in.
Editing: Clickable links and auto-formatting.
Backlinks: See incoming links to your idea.
Tags: Group ideas together with a tag.
Graph: Browse a 2D or 3D graph.
Export as website: Export (a part of) the knowledge graph as one or more websites.
Give limited access to coworkers and friends

Level 1 - Portable

My Zettelkasten is just a folder with markdown files. I’ve named them YYMMDD xxxx.md to get a chronological list of my ideas. I add metadata on top of my files with yaml, for example:

I am free to use whatever fields I like, although I might use some fields for further processing. You can read my formatting rules here.

Level 2 - Editing

I use Visual Code Studio to edit my files, using the fantastic Markdown All in One plugin to make writing markdown a pleasure.

Friendly markdown editing and the ability to install your own plugins is a huge benefit over markdown editors such as Obsidian, Noteable and others I have tried.

Update: Obsidian has grown into a powerful editor, which does not require me to follow any conventions. I can keep my own. So now I use Obsidian.

Level 3 and 4 - Indexing backlinks and tags

Navigating the knowledge graph becomes more powerful with tags and backlinks.

Tags allows you to create collections of ideas by tagging your ideas. Backlinks mean you can see the incoming links. This creates a bidirectional link between ideas.

I have written a simple script that continuously watches my file for updates.

It indexes my files on every change.
It appends backlinks to the files.
It creates or updates a markdown file for every tag: tags/meta.md.

I don’t want tags and backlinks to modify my content, so I use a markdown hack: reference style links.

These links are visible and clickable in my editor, but invisible when I convert markdown to html.

Update: With Obsidian, Visual Studio Plugins and a local website, this is not needed anymore.

Level 5 - Viewing the graph in 2D or 3D

Now that I have indexed my files, I can also export a json file that contains all ideas and links between them. This json file is read by a simple web application that displays a 2D (D3.js) or 3D (three.js) graph.

Update: With Obsidian, Visual Studio Plugins and a local website, this is not needed anymore.

Level 6 - Export as a website

I have written a couple of templates (ejs) and a stylesheet to render my markdown files as html. With the index, I can easily render the backlinks. I have also added a few extra’s:

Embed files (for easier viewing of certain threads fo ideas).
Rename files (to create an index.html).
Filter files (because not all notes are public).
Export as PDF article.

With every file change, I create a private website for browsing my notes, as well as the public website here at markmarijnissen.com.

I have refactored my scripts to allow me to run a server that gives limited access to friends (work in progress).