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:
- 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.
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:
--- title: My Zettelkasten Setup date: 2020-07-10 host: markmarijnissen.com tags: - meta ---
I am free to use whatever fields I like, although I might use some fields for further processing.
Level 2 - Editing
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:
I don’t want tags and backlinks to modify my content, so I use a markdown hack: reference style links:
[tag001]: ../200710-my-zettelkasten-setup.md [tag002]: ../200502-feed-zettelkasten.md [tag003]: ../200429-zettelkasten-rules.md
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 markmarijnissen.com.
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.