Tips for Creating Various Charts and Diagrams in Notion (with AI, Mermaid.js)

type

status

date

slug

summary

Notion Chat and Diagram

In Notion, you can create text-based charts and diagrams using Mermaid.js.

And don't worry if you're not familiar with Mermaid.js syntax. If you want to create a chart right away, you can utilize Notion AI.

Types of Charts

Basic Flowchart: The most common form, showing a process from start to finish sequentially.

State Diagram: Represents various states of a system and transitions between states.

Sequence Diagram: Shows interactions between objects in chronological order.

Gantt Chart: Displays project schedules and task progress in chronological order. It's useful for project management as it shows the start and end times, and duration of each task at a glance.

... and more. Notion, using Mermaid.js, supports various flowcharts. Reference: Other Various Charts

How to Use Mermaid in Notion

Insert a code block: Create a new block and enter the '/' command, then select 'Code'.

Select language: Choose 'Mermaid' from the top left of the code block.

Write flowchart code: Write the flowchart code according to Mermaid syntax.

Simple Mermaid Syntax

Mermaid syntax is intuitive and easy to learn. Here's a simple example of creating a basic flowchart:

This code generates a simple flowchart including a start node, a decision node, two process nodes, and an end node. Arrows indicate the flow of the process.

For detailed syntax, please refer to the official documentation.

Drawing with Notion AI

AI Flowchart Generation: You can automatically generate flowcharts using Notion AI. Activate AI input by pressing space twice on the page.

Content Creation: Select Make a flowchart and enter the content you want to create.Prompt: Draw a flowchart for the current pageYou can also directly ask AI to create a flowchart without selecting Make a flowchart

Review and Modify Results: Review the flowchart generated by AI and manually modify if necessary. You can directly edit the Mermaid code or give additional instructions to AI.

Other Various Charts

Mermaid.js allows you to create various charts besides flowcharts. ‣

In Notion, you can easily create various charts using tables and AI.

Official Document

Gantt Chart

Gantt charts visually represent table data, allowing you to see the duration of each task and the overall project schedule at a glance.

When you have a table like the following, you can ask AI to create a chart based on it.

Example Table

Task	Start Date	End Date
Project Planning	2024-01-01	2024-01-15
Requirements Analysis	2024-01-16	2024-01-31
Design	2024-02-01	2024-02-29
Development	2024-03-01	2024-04-30
Testing	2024-05-01	2024-05-15
Deployment	2024-05-16	2024-05-31

For databases, you can copy and convert to a table before making the request.

Request to AI: Draw a Gantt chart

Result

This code generates a Gantt chart based on the data from the above table. It specifies the start date and duration (in days) for each task to compose the chart.

Drawing Pie Charts

Pie charts are effective visualization tools that show the ratio of parts to the whole in a circular form, intuitively displaying the composition of data.

Like Gantt charts, you can easily create them by requesting AI.

Example Table

Category	Value
A	30
B	50
C	20
D	40
E	10

Request: Draw a pie chart

Result

Tips

Using Colors

You can add various colors to charts using Notion AI.

Click the Ask AI button on the left of the flowchart.

Add a prompt and generate.Prompt: Add colorful colors

Result

Code-Preview-Split View

The Code, Preview, and Split View options in the top left are useful features that allow you to work more efficiently with charts in Notion.

Using these features, you can simultaneously view the chart's code and the actual rendered result, allowing you to check and modify changes in real-time.