Skip to main content

Problems

  • Information / blogs / docs can be hard to navigate
  • Two main methods:
    • hierarchical organization
    • tags
  • Missing conceptual links that is easy to create and maintain

My Solution

Clickable conceptual links (see raw code at the bottom of this post):

  • Write everything in notion
  • Publish blogs/docs with docusaurus
  • Embed mermaid diagrams
    • Add click links to the notion page
    • Make the notion blocks synced, then you have a single place to edit the diagram, very easy to maintain
    • The current page is highlighted, helping the user know where they are

The result​

Attractive, consistent, easy to create conceptual links between posts

Example mermaid diagram

This might look complicated and hard, but it feels second nature to me now. It’s just a flowchart, and a list of nodes with labels, and connections, then maybe some click interaction for navigation.

With notions synced blocks feature, maintaining diagrams across multiple documents is not only easy, it feels good

flowchart LR
	st["cloud data"]
	c["compute"]
  u["workflows as URLs"]
  sim["sharable simulations"]
	dt["preserved through deep time"]

	st --> u
	c --> u --> sim --> dt

  click st "https://www.notion.so/metapages/Blob-storage-is-a-solved-problem-what-about-compute-980d76614aa74a2b9b083c1fa83e73bc?pvs=4"
  click u "https://www.notion.so/metapages/URL-Configured-Websites-4f1011ce56cd4b51b2a4c26017d1214d?pvs=4"
  click c "https://www.notion.so/metapages/Connect-compute-to-my-tasks-it-s-too-complicated-665f6bbcd4724d5ba3a4b66573473b69?pvs=4"
  click dt "https://www.notion.so/metapages/The-Internet-Archive-and-URL-configured-websites-f4b9e02d29234caa932bd553e1eaec75?pvs=4"
	click sim "https://www.notion.so/metapages/Sharable-Simulations-d8dcdfeed5ef423396086ce22875c735?pvs=4"