NotionでMermaidを編集するには？TIPS

Notionでフローチャートや図を作りたいとき、「Mermaid（マーメイド）」を使うととても便利です。
この記事では、NotionでMermaidを編集する方法と、表示されないときの対処法・コツを解説します。

Mermaidとは？

Mermaidとは、テキスト（コード）を書くことで図やチャートを作成できるツールです。
たとえば、次のような図を簡単に作れます。
    • フローチャート
    • シーケンス図
    • ガントチャート
    • 状態遷移図

NotionでMermaidを使う方法

Notionでは、コードブロックを使ってMermaidを記述します。

■手順

1. /code と入力してサジェストから「Code：Mermaid」を選択
   
2. コードを書く
   

編集とプレビューが同時に確認できるので便利です。

Mermaidを編集する方法

NotionでMermaidを編集する方法はとてもシンプルですが、
コード部分が表示されずに困ったことがあったので、その対応を。

Mermaidのコードを書いたのに「図が表示されない」「コードしか見えない」場合は、
表示設定が誤っている可能性があります。

■対処方法：ツールボックスから「分割表示」に切り替える

以下の手順で設定を確認してください。

1. Mermaidのコードブロックをクリック
2. ブロック上部または右側にある「ツールボックス（メニュー）」を開く
3. 「表示する」を選択
   
4. 「分割」をクリック
   

👉 これで、コードと図（プレビュー）が同時に表示されます

分割表示のメリット

• 編集しながらリアルタイムで図を確認できる
• エラーに気づきやすい
• 初心者でも操作しやすい

💡 基本は「分割表示」にしておくのがおすすめです

よくある編集内容

① ノード（箱）の名前を変更

前：A[開始] --> B[処理1]
　↓
後：A[スタート] --> B[処理1]

② 矢印の変更

前：A --> B（通常の矢印）
　↓
後：A --- B（線だけ）

③ 分岐条件の追加

前：B --> C
　↓
後：B -->|Yes| C

Mermaid編集のコツ

1. 日本語でもOK

2. シンプルに書く
   複雑にしすぎると間違いやエラーの原因になります。
   まずはシンプルな構造から始めましょう。
   
3. 見やすく整理する
   改行やインデントを使うと、編集しやすくなります。
   改行にはbrタグが利用できます。
   

まとめ

NotionでMermaidを使うポイントは以下の通りです。

1. コードブロックで mermaid を選択
2. コードを編集するだけで図が更新
3. テキストが表示されないときは「ツールボックス → 表示する → 分割」を確認
4. シンプルな書き方から始める