My Zettelkasten Setup

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.


My Zettelkasten setup has 6 levels of awesome:

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

Level 1 - Portable

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

title: My Zettelkasten Setup
date: 2020-07-10
  - meta

I am free to use whatever fields I like, although I might use some fields for further processing.

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.

Markdown Table Formatter

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.

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.

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

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

[tag001]: ../
[tag002]: ../
[tag003]: ../

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

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.

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


Does this setup sound awesome to you? If there is enough interest, I might take the effort to clean-up my scripts and open source them. Let me know at info@[myname].com.