🖼 Mermaid Code Block
In this short tutorial, I explain how to add images to the code block language Mermaid inside Notion. I also show you how to add images, colorful backgrounds, and how to add labels next to the images too. The mermaid code block is a great tool for displaying aesthetically pleasing graphs for your team, readers, or your own pages. Here’s how it works.
Learning Hub
Track learning with spaced repetition and smart formulas in this easy-to-use learning hub.
Where Are Notion Mermaid Blocks?
There is no block dedicated to graphs in Notion, but you can access the code block (trigger: /codeblock), then change the code language to Mermaid. This will allow you to choose between three options: Code, Preview, and Split.
Choose Split to see your code and a live preview in the same window.
Are you unfamiliar with Mermaid? Here is a quick tutorial about how to use it:
How To Add Images To Mermaid
In the example below, I wanted to view a new node for every database in my system. One is for a Notebook page. Another is for a Task List page. The last is for a Docs page. I want to show an icon and not a label to describe these pages.
flowchart TB
%% Databases %%
DOCS("<img src='https://super.so/icon/dark/file-minus.svg'; width='40' />")
Replace the link inside the node with an image’s link. Find more minimal icon links here. You may have noticed, you can change the size of the node as well inside the width parameter.
How To Add Background Color
To change the background color, stroke width, stroke color, and text color, add a section in your code dedicated to colors like this:
flowchart TB
%% Colors %%
classDef white fill:white,stroke:#000,stroke-width:2px,color:#000
%% Databases %%
DOCS("<img src='https://super.so/icon/dark/file-minus.svg'; width='40' />"):::white
Each color is defined as a Class. Classes can be labeled as the color you want them to represent (white), the fill color (fill:white), the stroke color (stroke:#000), the stroke width (stroke-width:2px), and the text color (color:#000).
classDef white fill:white,stroke:#000,stroke-width:2px,color:#000
Next, add the Class name after a node as:
DOCS(<img src=''/>):::white
How To Add Text With Image
Add text next to the icons to give the node context. Below is an example of how my Docs database is connected to its database properties in addition to relations to my other two databases.
flowchart TB
%% Colors %%
classDef white fill:white,stroke:#000,stroke-width:2px,color:#000
classDef yellow fill:#fffD75,stroke:#000,stroke-width:2px,color:#000
%% Databases %%
DOCS("<img src='https://super.so/icon/dark/file-minus.svg'; width='40' />"):::white
%% Documents database %%
DOCS --- CREATEDBY("<img src='https://super.so/icon/dark/user.svg'; width='20' /> Created By"):::yellow
To add a label, tucked inside the (“ “) next to a node’s name, type the label after the image link and configurations like this:
DOCS --- CREATEDBY("<img src='https://super.so/icon/dark/user.svg'; width='20' /> Created By"):::yellow