Notion have released an update that lets you create charts and diagrams directly inside Notion using something called Mermaid!
But what is Mermaid? It’s “a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.”
“Documentation-Rot is a Catch-22 that Mermaid helps to solve.”
Diagram software goes out of date. Diagrams and charts also take time to create and often involve learning a new piece of software that your company might not use in a year.
Mermaid solves the issue by “reducing the time, effort and tooling that is required to create modifiable diagrams and charts which in turn results in smarter and more reusable content.”
For Notion users, this means you can stay inside the system that you’re comfortable with, knowing that your diagrams will be readable in any other software you might move to in the future.
So what can you do with it? Here’s a gantt chart example I made today, along with the code for you to copy.
I’ve embedded it in my daily dev log for my day job so I can plan my days directly inside Notion. To embed your own, create a code block, change the language to Mermaid and copy the following code:
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
gantt
dateFormat YYYY-MM-DD HH:mm
axisFormat %Hh%M
title Daily Plan
section Morning
Prepare for the day: done, prep, 2021-12-30 09:00, 30m
Standup meeting: done, standup, after prep, 30m
Schedule more tasks: task1, after standup, 3h
Lunch: active, lunch, after task1, 1h
Afternoon tasks: task2, after lunch, 3hThere are a few more types of charts you can create, along with the code for them. You can find all the documentation from the Mermaid website at https://mermaid-js.github.io/mermaid/#/
How are you going to use the new Mermaid update? You can send an email to me@notiondad.com or reply over on Twitter @notiondad 🙂
