How to Make a Flowchart in Notion: 4 Methods That Work

Notion can't draw shapes and arrows on its own (as of September 2026). The quickest workaround is Mermaid: type flowchart code into a code block, and Notion renders it as a diagram. You can also embed a diagram from another tool, upload an exported image, or outline the steps as toggle lists.

Quick steps: a Mermaid flowchart in Notion

1. On an empty line, type /code and press Enter. Typing /mermaid instead creates a code block with Mermaid already selected.
2. Click the language name at the top left of the block, type "Mermaid" and press Enter.
3. Paste your Mermaid code. The example below works as it is.
4. Open the second dropdown at the top left and choose Preview, or Split to see the code and chart together.
5. Hover over the block and click Caption to add a title.

Which Notion flowchart method should you use?

How do you make a Mermaid flowchart in Notion?

Mermaid is a widely used text syntax for diagrams. You describe each box and arrow in plain text, and Notion draws the chart. This example maps an expense approval with two decisions and a loop back:

flowchart TD
    A([Expense submitted]) --> B[/Read receipt and amount/]
    B --> C{Amount over 500?}
    C -->|No| D[Approve automatically]
    C -->|Yes| E[Manager reviews]
    E --> F{Approved?}
    F -->|Yes| D
    F -->|No| G[Return to employee with a note]
    G --> B
    D --> H[(Save to finance records)]
    H --> I([Reimbursement paid])

Here's how to read it:

• The first line sets the direction. TD means top-down, and LR means left to right.
• Each line joins two nodes with an arrow, written as -->.
• A letter such as A is the node's ID. The brackets around its label set the shape.
• Text between two pipes labels an arrow, as in C -->|No| D.

The bracket styles map to standard flowchart shapes:

These match the shapes in our flowchart symbols guide.

How do you add a decision branch?

Put the question in curly braces, then draw one arrow per answer and label each one. In the example, C{Amount over 500?} splits into C -->|No| D and C -->|Yes| E. To loop back, point an arrow at an earlier node, as G --> B does.

Why isn't my Mermaid flowchart rendering?

• The block's language isn't set to Mermaid, or the view is still on Code.
• A node is named end in lowercase. Mermaid reserves that word, so write End or Done instead.
• A label contains brackets or parentheses. Wrap the label in double quotes, like A["Check ID (passport)"].
• A bracket or brace isn't closed, which breaks everything after it.
• The syntax is very new. Notion may bundle an older Mermaid version, so classic syntax like the example above is the safe choice.

To debug faster, draft the code in the free Mermaid Live Editor, then paste it into Notion.

How do you embed a flowchart from another tool?

If your team already draws diagrams in a tool such as Miro, Lucidchart, Whimsical or Figma, embed the diagram instead of redrawing it.

1. In the diagram tool, copy a share link. Check that its sharing settings let your Notion readers view it.
2. In Notion, type /embed, press Enter, paste the link and click Embed link. You can also paste the link on an empty line and pick the embed option from the menu that appears.
3. Drag the block's edges to resize it.

Most embeds show the diagram's current version, so edits in the source tool appear in Notion. The catch is access. Readers without permission in the source tool may see a sign-in prompt instead of the chart.

How do you add a flowchart image to Notion?

An image is the most reliable option when the chart must look polished, animate or appear the same for every reader.

1. Export the flowchart as a PNG for a static chart, or a GIF for an animated one.
2. In Notion, type /image, choose Upload and pick the file. You can also drag the file straight onto the page.
3. Resize the image with its side handles, and add a caption.
4. For an MP4 video, use /video instead.

When the process changes, re-export the file and use Replace in the image block's menu. The new version keeps its place on the page.

Text inside an image can't be edited or selected like page text, and search may not find it. Add the steps as a short numbered list below the image. Readers can copy them, and screen reader users get the same information. If your starting point is a whiteboard photo, see how to convert an image to a flowchart first.

How do you build a text flowchart with toggle lists?

For a simple procedure, a structured list can beat a diagram. Toggles hide each branch until the reader needs it, which suits troubleshooting guides and checklists.

1. Write the main steps as a numbered list. Type 1. and a space to start one.
2. Under a step that raises a question, add a toggle: type > and a space, then write the question.
3. Inside the toggle, press Tab to nest one line for each answer, with its next step.
4. For a long subprocess, link to a separate page with an @ mention instead of nesting it.
5. Press Cmd+Option+T on a Mac, or Ctrl+Alt+T on Windows, to expand or collapse all toggles.

Here's the outline for a laptop that won't start, with each question as a toggle:

1. Check that the laptop is plugged in.
2. Is the charging light on?
   • Yes: hold the power button for 15 seconds, then try again.
   • No: try another outlet and cable.
3. Does the laptop start now?
   • Yes: close the ticket.
   • No: book a repair, following the Repair booking page.

Toggle lists work best for mostly linear procedures. Once branches go more than two or three levels deep, readers lose track, so switch to a diagram. For a visual version of this kind of logic, see the incident response decision tree template.

Faster option: generate the flowchart with AI

Mermaid charts work, but they look plain, and drawing in another tool takes time. An AI flowchart maker gets you a polished visual from a sentence.

1. In Infogiph, describe the process in plain English, such as "New hire onboarding: offer signed, IT setup, first-day welcome, week-one training."
2. Infogiph generates an animated, fully editable diagram, usually in about 5 to 15 seconds.
3. Adjust labels, icons, colors and layout on the canvas.
4. Export a PNG for a static chart, or a GIF that animates right on your Notion page.
5. Upload it with /image, as described above.

Is the process already written up in Notion? Paste that text into Infogiph's Text to visuals tab, and it suggests visuals that fit.

The free plan includes 5 AI generations in total and unlimited exports in all four formats, with a small Infogiph watermark. Pro costs $12 a month, or $9 a month billed yearly, and removes the watermark. For a head start, open the employee onboarding process template.

FAQ

Does Notion have a built-in flowchart tool?

Not a drawing tool, as of September 2026. Notion renders Mermaid diagrams inside code blocks, and it displays embedded diagrams and images from other tools.

Can Notion AI make a flowchart?

If your workspace includes Notion AI, you can ask it to draft Mermaid code for your process. Paste the code into a code block set to Mermaid, then check the preview for errors.

How do I export a Mermaid flowchart from Notion?

Copy the code into the Mermaid Live Editor at mermaid.live, then download the chart as a PNG or SVG.

Is Mermaid or an image better in Notion?

Choose Mermaid if your team edits the process often and is comfortable with text. Choose an image if the chart needs to look polished, animate or reach non-technical readers.

For more ideas, browse our flow chart examples and decision tree examples. If your team writes in Google Docs, read how to make a flowchart in Google Docs.