Zettelkasten

The Zettelkasten Method – German Edition

Staying on top is key to manage knowledge and information. It’s important to be quick and have a flexible process you can trust to achieve this.

The Zettelkasten Method is that flexible technique to deal with knowledge in an individual way. You can realize the principles with a few keystrokes without having to learn complex or expensive software.

The Zettelkasten Method is second to none in its power and simplicity. Your Zettelkasten will become the almost invisible helper throughout your day and life.

Auf amazon.de kaufen
Buy on amazon.com


Latest Posts

The Archive App – Introduction to the Introduction

Sascha is preparing a video series showcasing the unique features of our app The Archive. Here’s the intro:

Remember that we follow a “software-agnostic approach”. That means our app will be great, but it will still be replaceable. Because we don’t want to lock people in with things they couldn’t do by any other means. The workflow and the method are important, not the tools!

Meanwhile, Sascha is writing the new book and I am working on the app. We are dogfood the beta of The Archive to ourselves already. You cannot imagine how many problems stay under the radar until you try to use the product every day.

Ah well, time to get back to work.

Is Bear for macOS a Zettelkasten Archive Fit?

I spent a few minutes importing a copy of my archive into Bear, a note-taking app for macOS. Bear seems to be popular at least because of its clean look. This is by no means a review, just a first glance at the app.

Importing 3941 files took 37:50 seconds and produced 2448 notes (I have no clue why 1500 files went missing or which ones that were). Search is pretty fast afterwards. So the speed of finding and entering notes is not a show-stopper, quite the contrary.

screensot after the import
After the import, this is what a search for “moral” brought up.

Bear highlights tags very prominently and adheres to the hashtag convention. Some stuff in my life as a programmer starts with a hash (#) but doesn’t denote a tag, though. So the sidebar (also called “outline view”) is full of different kinds of stuff in my case. MultiMarkdown citations use identifiers with a leading hash, too, so there’s a lot of noise waiting to be cleared up.

I didn’t find out where the notes are stored, yet. They get unique identifiers like 33AFB2A1-730B-421D-950B-B689F0FD6148-44496-0000199CCDA23203 so you can link to them. That only seems to work if you don’t hamper with the archive, though: Deleting and re-creating the same note will produce a different ID. Each file is unique. Not each thought. So links are not as stable. I guess it’ll do for a short-term project, but it’s unlikely it’ll serve you good for your whole life.

There also is a Bear subreddit where you can find out more about the app and other user’s approaches.

Since I’m too busy with programming at the moment, I won’t go any deeper here. There’s plenty of features to discover and discuss (like image attachments!), so don’t take this shallow look for the whole experience.

You’re welcome to complete this exploration! Contributions are very welcome if you want to give it a spin yourself and write a thorough review. Find the review guidelines under our tools section. Looking forward to what you folks find.

No Beta Invitation Video Today ☹️

I screwed up with my schedule and put a “Beta Invitation” video entry in our Zettelkasten Live calendar. Sorry, folks, that’ll not take place today! Instead, we’ll upload a not-live video in the upcoming days.

Until then, you are, as always, very welcome to join the beta list:

http://zettelkasten.de/beta/

More information about the app will follow when we put the rest up. Sorry again for the confusion!

Writing Links

Been sifting through my blog subscriptions today for a while an found a few articles I ended up liking:

  • “How I self-published a book, sold 180,000 copies & 2X’d revenue” – I don’t like the character of “imitate this formula and double/triple/… your income”;1 the numbers in the post title are easily revealed to be click baits. But the article is huge, and it has some real-world numbers about self-publishing with a team of professional editors, designers, etc. Worth the read, but don’t you get lost in dreaming!
  • There is a “Storybundle” with text and audio books on writing – with a bias towards authors of fiction, but also including general advice. I wouldn’t be sharing this normally since I have neither experience writing fiction, nor have I bought the bundle. But a game developer I respect blogged about the usefulness of one of the products from that bundle. That social proof was enough to convince me.
  • Last but not least, there’s an instructional example project showing how to write a PhD dissertation with Markdown and LaTeX to which reader Dan Sheffler also contributed.
  1. Recently, there was a to-the-point XKCD comic about Survivorship Bias. So much for success formulae. 

The Archive (Mac app) Beta Invitation

app screenshot
Early development preview

Folks, the time has come to reveal THE ARCHIVE – our very own app for knowledge work.

It’s not just another note-taking app; you can get note-taking solutions anywhere. It’s an app for productive knowledge work, built with a software-agnostic approach in mind.

The app empowers you to write, and it gives you a powerful interface for manipulating your notes to facilitate connections. Meanwhile, its plain text paradigm, powered by Markdown, allows you to access your data with a plethora of other apps. You get all the upsides of method-specific features and cut the downsides of being boxed in.

You know we value plain text because that’s the only way to store data reliably. Text files are the future. And The Archive will make your work future-proof.

If you have a Mac and want to help us test the heck out of the app, sign up for the beta mailing list where we’ll post updates during development and recruit testers from:

http://zettelkasten.de/beta/

By the way, many asked for an English translation of Sascha’s Book on the Zettelkasten Method. There will be a better solution: a comprehensive online course. It will walk you through the basic and advanced techniques of knowledge work. In addition, we will explain everything through extensive use case discussions and showcasing different apps.

Displaying Flow Charts in nvALT’s Preview Window Using Mermaid.js

nvALT’s Markdown preview uses a browser to display HTML output of your note. That enables you to include a lot of modern web technology in your note previews. Mermaid is such a thing: it’s a JavaScript library that renders flow charts from plain text graph definitions.

Look at the demos to get a feel for it.

nvALT and I both assume you write your notes in Markdown to make the following work. If you don’t, nvALT will still render HTML in the browser window; skip to the end for a Markdown-less mini tutorial.

Nevertheless, tweaking the template is a bit more advanced than downloading files. You have to paste a bit of code in an HTML file. Maybe you’ll want to ask your neighboring teenager to do that for you.

Mermaid and Markdown

Markdown accepts HTML in your notes. But nobody wants to write HTML. The plain text syntax of Mermaid is okay and sufficiently readable to stand as-is. I am fine with a piece of my note looking like the following (Latin aside):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam.

    graph LR
    Lorem -- ipsum --> Dolor
    Lorem --> Exceptur
    Dolor --> Exceptur

Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. 

Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.

The ASCII-arrows are good enough to be readable. I indent the graph definitions so they render as verbatim (or “code”) blocks by default when no Mermaid is installed.

This, in turn, makes Mermaid setup a bit more complicated, because we have to remove all the code-iness of verbatim blocks that Markdown-to-HTML-converters usually insert.

If you don’t understand a word of HTML or JavaScript, then just follow the step-by-step guide and skip the explanation.

Explanation of the Pocess for the Savvy Reader

Mermaid looks for <div> tags with the mermaid class and then uses the text contents as input for its graph rendering. Mermaid isn’t clever enough to skip HTML tags inside, so we have to make sure the Markdown converter doesn’t mess with the stuff.

Sadly, I have code syntax highlighters installed; and I think the default behavior of a Markdown-to-HTML-converter is to translate indented blocks of text to a <code> tag nested inside a <pre> tag.

This means we’re going to look for all <pre> tags and then take the plain text out of it, ignoring any other HTML tags inside. JavaScript offers element.innerText for this, so that’s simple. Then we replace the whole <pre> block with a <div class="mermaid"> block to prevent syntax highlighters to interfere. Only afterwards will we let Mermaid do its job.

To distinguish Mermaid graphs from regular code, the sad news is this: we’ll have to add a hashbang-like “block syntax identifier”. That means each code block that is supposed to become a graph has to start with a line that contains %%!mermaid:

The following will become a picture:

    %%!mermaid
    graph LR
    A --> B

... but this will stay simple code:
    
    some.code();

(More text here, blah blah.)

I’m a coder. I can live with that extra line. But it kinda ruins the purity of this approach.

Alternative Approach

Maybe another approach is to try to interpret all code blocks with Mermaid and only keep the result for those that don’t fail. The Mermaid JavaScript API seems to support that approach.

If you want to spend more time with this than I: suggestions are very welcome!

Step-by-Step Instructions

Put this Mermaid test graph definition into a note to test it later:

Here comes a graph:

    %%!mermaid
    graph TD %% TD = top-down. LR is also possible
    A-->B

That was all.
  1. Now quit nvALT. You need to restart the app to reload the preview HTML template.
  2. Download Mermaid from here: https://github.com/knsv/mermaid/releases (There’s a “Downloads” sub-section after all the release notes.)
  3. Extract the Mermaid zip file.
  4. Navigate to the path ~/Library/Application Support/nvALT/. In Finder, you can press ⌘G to invoke the “Navigate → Go To…” menu item and paste the path inside. Make sure you’re in a folder with a template.html file.
  5. From the Mermaid folder, copy mermaid.min.js and mermaid.css to the nvALT folder next to the template.html.
  6. Open the template.html in a text editor. Paste the following lines inside the “head” section at the top, maybe in a new line right after the one starting with <title>:
<link rel="stylesheet" href="file://{%support%}/mermaid.css">
<script type="text/javascript" src="file://{%support%}/mermaid.min.js"></script>

Now the Mermaid files will be loaded. But Mermaid won’t run, yet.

Paste the following block of code below the lines you just inserted. The JavaScript inside will replace verbatim blocks of text that start with %%!mermaid with a graph just as explained above. I added comments in case you want to follow along:

<script>
// Run the replacement when the browser is ready.
document.addEventListener("DOMContentLoaded", function(event) { 

  // Take all <pre> tags ...
  var elements = document.querySelectorAll("pre");
  for (var i = 0; i < elements.length; i++) {

    // ... that start with "%%!mermaid".
    var element = elements[i];
    if (!element.innerText.startsWith("%%!mermaid")) { return; }
    
    // Create a `<div class="mermaid">` tag and copy over 
    // the graph definition.
    var result = document.createElement('div');
    result.classList.add("mermaid");
    result.innerHTML = element.innerText;

    // Then replace the old <pre> block with the new one.
    element.parentNode.insertBefore(result, element);
    element.parentNode.removeChild(element);
  }
  
  // After all replacements, run Mermaid which will render
  // the blocks we've just created.
  mermaid.initialize(undefined);
});
</script>

Save the file. Launch nvALT. Look at the note with the graph.

Mermaid graph

Isn’t it pretty?

Markdown-less Setup

You can put the graph syntax in HTML yourself. Even though the rest of the note may not be Markdown, nvALT will still put the text of your note into a HTML document for the preview (web browser) window to display.

Put this HTML code into a note to test Mermaid graph rendering:

<div class="mermaid">
  graph TD %% TD = top-down. LR is also possible
  A-->B
</div>
  1. Now quit nvALT. You need to restart the app to reload the preview HTML template.
  2. Download Mermaid from here: https://github.com/knsv/mermaid/releases (There’s a “Downloads” sub-section after all the release notes.)
  3. Extract the Mermaid zip file.
  4. Navigate to the path ~/Library/Application Support/nvALT/. In Finder, you can press ⌘G to invoke the “Navigate → Go To…” menu item and paste the path inside. Make sure you’re in a folder with a template.html file.
  5. From the Mermaid folder, copy mermaid.min.js and mermaid.css to the nvALT folder next to the template.html.
  6. Open the template.html in a text editor. Paste the following lines inside the “head” section at the top, maybe in a new line right after the one starting with <title>:

     

Save the file. Launch nvALT. Look at the note with the graph and pray it now shows something.