Notionでフローチャートを作成する主な方法は、①標準機能の「Mermaid記法」で書く、②「Notion AI」に自動生成させる、③「draw.io」などの外部ツールを埋め込む、の3パターンです。
「修正のしやすさ」ならMermaid、「見た目の美しさ」なら外部ツール、「速さ」ならAIと、目的によって使い分けるのが正解です。この記事では、それぞれの具体的な手順とメリット・デメリットを徹底比較します。
1. 【標準機能】Mermaid記法でコードを書く
エンジニアやテキストベースで思考整理したい方に最もおすすめな方法です。Notionの「コードブロック」機能はMermaid(マーメイド)記法に対応しており、テキストを入力するだけで自動的に図が描画されます。
作成手順
- Notionページ上で
/codeと入力し、コードブロックを呼び出します。 - 左上の言語選択プルダウンから 「Mermaid」 を選択します。
- ブロックの中にMermaidのコードを記述します。
基本コード例(コピペして試せます)
コード スニペット
graph TD
A[開始] --> B{質問};
B -- はい --> C[処理1];
B -- いいえ --> D[処理2];
C --> E[終了];
D --> E;
[画像: 上記コードによって生成された実際のフローチャート図]
- メリット: キーボードだけで完結する、修正が爆速。
- デメリット: 記法を覚える必要がある、デザインの微調整が難しい。
2. 【自動化】Notion AIに作らせる(最速)
「コードを書くのは面倒くさい」という方は、Notion AIに丸投げしましょう。箇条書きのテキストさえあれば、一瞬でMermaidコードを生成してくれます。
作成手順
- フローチャートにしたい手順をテキストで書きます(例:ログインの手順など)。
- テキストを選択し、「AIに依頼」をクリックします。
- プロンプト(指示)欄に 「この手順をMermaid記法のフローチャートに変換して」 と入力します。
- 生成されたコードブロックを「挿入」します。
- メリット: 専門知識ゼロで作成可能。
- デメリット: 複雑な分岐は手直しが必要な場合がある(AIプランの契約が必要)。
3. 【高機能】draw.ioなどの外部ツールを埋め込む
プレゼン資料のような、カラフルで複雑な図を作りたい場合は、作図専用ツール「draw.io」などを利用します。Notion用のブラウザ拡張機能を使うか、埋め込み(Embed)機能を使います。
作成手順(拡張機能または埋め込み)
- 拡張機能を使う場合: Chrome拡張機能「draw.io for Notion」などをインストールし、Notion上のボタンから作図画面を呼び出します。
- 埋め込みの場合: draw.io(Web版)で作成した図の共有リンクを取得し、Notionに
/embedで貼り付けます。
- メリット: ドラッグ&ドロップで直感的に作れる、デザインが自由自在。
- デメリット: 別ツールを開く手間がある、スマホでの閲覧・編集が少し重い。
【比較表】どの作成方法を選ぶべき?
用途に合わせた選び方をまとめました。
| 特徴 | Mermaid記法 | Notion AI | draw.io (外部ツール) |
| 手軽さ | ◯ | ◎ (最速) | △ (準備が必要) |
| 表現力 | △ (シンプル) | △ (シンプル) | ◎ (多彩) |
| 修正 | ◎ (テキストのみ) | ◯ (再生成) | △ (ツール移動) |
| コスト | 無料 | 有料 (AI契約) | 無料 |
| おすすめ | 手順書、メモ | アイデア整理 | 顧客向け資料 |
よくある質問(FAQ)
Q. Mermaid記法で日本語は使えますか?
A. はい、問題なく使用できます。ただし、() や [] などの記号の中に記述する必要があります。記号の外に書くとエラーになる場合があるため注意してください。
Q. 作成したフローチャートは画像として保存できますか?
A. Mermaid記法で作成した図は、Notion標準機能では直接画像保存できません(スクリーンショットが必要です)。draw.ioなどの外部ツールであれば、ツール側でPNGやPDFとしてエクスポート可能です。
Q. スマホアプリでも編集できますか?
A. Mermaid記法(コードブロック)であれば、スマホアプリからでもテキスト編集するだけで図を修正できます。外部ツール系はスマホ画面では操作が難しいため、PCでの編集を推奨します。
まとめ
Notionでフローチャートを作るなら、まずは以下の順で試すのが効率的です。
- Notion AIで土台を自動生成する。
- Mermaid記法で微調整する。
- デザインにこだわりたい時だけdraw.ioを使う。
まずは、ページ上で /code と入力し、言語を「Mermaid」にして簡単な図を描いてみましょう!
Next Step: さっそくNotionを開き、この記事の「基本コード例」をコピーして、コードブロックに貼り付けてみてください。一瞬で図ができる感動を体験できます。
