<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> Build simple flowcharts using a Code block.
</aside>
Code blocks are a powerful feature in Notion that the average user will likely never use. But they’re surprisingly easy. I wrote the below guide to show you how to create a flow chart using a Code block, but honestly this video is one of my favorites on the subject and so much better. So maybe just ignore my guide and watch that instead:
https://youtu.be/-XV1JBfhgWo?si=wr6KvRR_v3SniLR2
Type /code. A grey box will appear as a block. In the upper left corner, change the code language to Mermaid:
To create a flowchart, start by typing “flowchart” followed by either TD (which stands for Top Down) or LR (which stands for Left to Right) which determines the direction of the flowchart.
Hit ENTER to start a new line. Your flow chart will be structured using unique ID’s for each individual box in the chart (for example A, B, C or something more descriptive) and arrows are written as “-->” to connect them. Here’s an example:
flowchart TD
A
B -->
C --> D
C --> E
TIP: Adding additional “-”, for example “---->”, makes an arrow longer and moves the box further away. Removing the > gives you just a line. Try it!
Of course, you don’t want your boxes to just say A, B, C, you want actual text in them. Use (your text here) after each arrow or letter:
flowchart TD
A(Insects)
B(LIONS) --> C(Zebras)
C --> D(Snakes)
C --> E(Spiders)
To add context to arrows, type something between two | symbols after -->, like so:
flowchart TD
A(Insects)
B(LIONS) --> C(Zebras)
C --> |No!| D(Snakes)
C --> |Hell no!| E(Spiders)
<aside> <img src="/icons/info-alternate_yellow.svg" alt="/icons/info-alternate_yellow.svg" width="40px" /> Just with this basic knowledge you’ll already be able to create flowcharts, big or small! Experiment and have fun.
</aside>
Naturally, you can change the shapes of boxes in the flow chart. Here are three options:
I used ( ) in the examples above. The size of each box will adapt to the text.
flowchart LR
A(Option A)
B[Option B]
C{Option C}
You’ll likely want to add some color to your flowchart. You can style your chart with hex code for colors that has a # in front, for example #FFFF00 for yellow. See the Solid Text Color page for some sample hex codes.
Start by typing “style” followed by space and a letter corresponding to the box you want to change. Then use any of the following, followed by the hex code:
See below for examples:
flowchart LR
A{Option A}
B[Outcome 1]
C[Outcome 2]
D[Outcome 3]
E(Consequence 1)
F(Consequence 2)
G(Consequence 3)
H(Consequence 4)
I(Consequence 5)
J(Consequence 6)
K(Consequence 7)
A --> B
A --> C
A --> D
B --> E
B --> F
B --> G
C --> H
D --> J
D --> K
J --> I
K --> I
D --> I
style A fill:#A9E4F5,stroke:#000080,stroke-width:5
style B fill:#FFFF00,stroke:#FFCE45,stroke-width:3
style C fill:#FFFF00,stroke:#FFCE45,stroke-width:3
style D fill:#FFFF00,stroke:#FFCE45,stroke-width:3
Whether you’re sharing the Notion page with the flowchart or are just using it for yourself, you obviously don’t want the actual code to be visible. This is easily hidden by hovering to the top left spot where you changed the code language in Step 1, and changing “Split” to “Preview”. This is how you will leave the flowchart once you’re done working on it:
flowchart TD
A(Insects)
B(LIONS) --> C(Zebras)
C --> |No!| D(Snakes)
C --> |Hell no!| E(Spiders)