Notionでフローチャートを作るには?Mermaid・AI・外部ツールのおすすめ3選

Notionでフローチャートを作成する主な方法は、①標準機能の「Mermaid記法」で書く、②「Notion AI」に自動生成させる、③「draw.io」などの外部ツールを埋め込む、の3パターンです。

「修正のしやすさ」ならMermaid、「見た目の美しさ」なら外部ツール、「速さ」ならAIと、目的によって使い分けるのが正解です。この記事では、それぞれの具体的な手順とメリット・デメリットを徹底比較します。

1. 【標準機能】Mermaid記法でコードを書く

エンジニアやテキストベースで思考整理したい方に最もおすすめな方法です。Notionの「コードブロック」機能はMermaid(マーメイド)記法に対応しており、テキストを入力するだけで自動的に図が描画されます。

作成手順

  1. Notionページ上で /code と入力し、コードブロックを呼び出します。
  2. 左上の言語選択プルダウンから 「Mermaid」 を選択します。
  3. ブロックの中にMermaidのコードを記述します。

基本コード例(コピペして試せます)

コード スニペット

graph TD
    A[開始] --> B{質問};
    B -- はい --> C[処理1];
    B -- いいえ --> D[処理2];
    C --> E[終了];
    D --> E;

[画像: 上記コードによって生成された実際のフローチャート図]

  • メリット: キーボードだけで完結する、修正が爆速。
  • デメリット: 記法を覚える必要がある、デザインの微調整が難しい。

2. 【自動化】Notion AIに作らせる(最速)

「コードを書くのは面倒くさい」という方は、Notion AIに丸投げしましょう。箇条書きのテキストさえあれば、一瞬でMermaidコードを生成してくれます。

作成手順

  1. フローチャートにしたい手順をテキストで書きます(例:ログインの手順など)。
  2. テキストを選択し、「AIに依頼」をクリックします。
  3. プロンプト(指示)欄に 「この手順をMermaid記法のフローチャートに変換して」 と入力します。
  4. 生成されたコードブロックを「挿入」します。
  • メリット: 専門知識ゼロで作成可能。
  • デメリット: 複雑な分岐は手直しが必要な場合がある(AIプランの契約が必要)。

3. 【高機能】draw.ioなどの外部ツールを埋め込む

プレゼン資料のような、カラフルで複雑な図を作りたい場合は、作図専用ツール「draw.io」などを利用します。Notion用のブラウザ拡張機能を使うか、埋め込み(Embed)機能を使います。

作成手順(拡張機能または埋め込み)

  1. 拡張機能を使う場合: Chrome拡張機能「draw.io for Notion」などをインストールし、Notion上のボタンから作図画面を呼び出します。
  2. 埋め込みの場合: draw.io(Web版)で作成した図の共有リンクを取得し、Notionに /embed で貼り付けます。
  • メリット: ドラッグ&ドロップで直感的に作れる、デザインが自由自在。
  • デメリット: 別ツールを開く手間がある、スマホでの閲覧・編集が少し重い。

【比較表】どの作成方法を選ぶべき?

用途に合わせた選び方をまとめました。

特徴Mermaid記法Notion AIdraw.io (外部ツール)
手軽さ◎ (最速)△ (準備が必要)
表現力△ (シンプル)△ (シンプル)◎ (多彩)
修正◎ (テキストのみ)◯ (再生成)△ (ツール移動)
コスト無料有料 (AI契約)無料
おすすめ手順書、メモアイデア整理顧客向け資料

よくある質問(FAQ)

Q. Mermaid記法で日本語は使えますか?

A. はい、問題なく使用できます。ただし、()[] などの記号の中に記述する必要があります。記号の外に書くとエラーになる場合があるため注意してください。

Q. 作成したフローチャートは画像として保存できますか?

A. Mermaid記法で作成した図は、Notion標準機能では直接画像保存できません(スクリーンショットが必要です)。draw.ioなどの外部ツールであれば、ツール側でPNGやPDFとしてエクスポート可能です。

Q. スマホアプリでも編集できますか?

A. Mermaid記法(コードブロック)であれば、スマホアプリからでもテキスト編集するだけで図を修正できます。外部ツール系はスマホ画面では操作が難しいため、PCでの編集を推奨します。


まとめ

Notionでフローチャートを作るなら、まずは以下の順で試すのが効率的です。

  1. Notion AIで土台を自動生成する。
  2. Mermaid記法で微調整する。
  3. デザインにこだわりたい時だけdraw.ioを使う。

まずは、ページ上で /code と入力し、言語を「Mermaid」にして簡単な図を描いてみましょう!

Next Step: さっそくNotionを開き、この記事の「基本コード例」をコピーして、コードブロックに貼り付けてみてください。一瞬で図ができる感動を体験できます。


Related Post