Mermaid ダイアグラムを作成

対象ユーザー：すべてのユーザー
利用可能なプラン： Free、Starter、Business、Enterprise、Education
対応プラットフォーム：ブラウザ、デスクトップ

Mermaid のコードから図を作成し、Miro の図形や線と同様に編集できます。Mermaid がソース（元データ）として保持されるため、図を Miro、コードベース、AI ツール間で移動しても構造は失われません。

注意：旧版の Mermaid アプリに関する情報をお探しの場合は、Mermaid diagrams for Miro（旧版）を参照してください。

Miro で Mermaid ダイアグラムを使う理由

• 既存の Mermaid ワークフローと一貫して利用できます。 文書、PR、AI チャットで普段書いているのと同じ Mermaid 構文が使えます。Miro MCP を使えば、エージェントがボード上の Mermaid 図を作成、読み取り、更新、編集できます。
• Miro 図形として表示されます。 Mermaid コードは編集可能な Miro 図形とコネクターで構成された Diagram に変換され、Miro によって自動的にレイアウトされます。静的な画像ではありません。
• 双方向の編集が可能です。 ボード上で図を視覚的に変更すると、Mermaid コードが更新されます。コードを編集すると、図が再レンダリングされます。
• コラボレーション向けに設計されています。 Diagram はネイティブな Miro コンテンツであるため、同じボード上でリアルタイムにコメントを付けたり共同で編集したり、繰り返し改善したりできます。

Mermaid 図を作成する

Mermaid ダイアグラムは 3 通りの方法で追加できます。

ボードに Mermaid コードを貼り付ける

1. エディタ、文書、または AI チャットから Mermaid コードをコピーする
2. Miro ボードに貼り付ける
   Miro はコードを Miro 図形で構成された Diagram としてレンダリングする

Miro MCP でダイアグラムを作成する

Miro MCP Server に接続された MCP 対応の AI ツール（例：Cursor や Claude Code）を使って、ボード上に Mermaid ダイアグラムを生成できます。

1. AI ツールを Miro MCP に接続します。
2. エージェントに特定のボード上で Mermaid ダイアグラムを作成するよう依頼します。既存のボードに図を作成したい場合は、プロンプトにボードの URL を含めてください。
3. ボードを Miro で開いて、レンダリングされたダイアグラムを確認、編集、共同作業します。

エージェントはボードから Mermaid コードを読み取り、その場でダイアグラムを更新することもできるため、コードベースと Miro の間で継続的に反復できます。エージェントがダイアグラムを編集すると、追加・削除・変更箇所を示す凡例を追加できます。

注意： Enterprise プランでは、会社の管理者が Miro MCP を有効にしてからでないとユーザーは接続できません。詳細は Miro MCP サーバー（管理者ガイド） を参照してください。

Diagram フォーマットから開始

1. Miro のボードで、作成バーを開き、フォーマット > Diagram を選択します。
2. コードで構築をクリックします。
3. コードパネルに自分の Mermaid コードを貼り付けるか、Mermaid のテンプレートを選択します。
   ダイアグラムは Miro の図形として表示されます。
4. フォーカスモードまたはキャンバス上で編集を続けます。

Diagram フォーマット、フォーカスモード、レイヤー、テンプレートの詳細は Miro ダイアグラム を参照してください。

Mermaid ダイアグラムを編集する

ボード上で視覚的に編集することも、Mermaid のソースで編集することも、AI を使ってダイアグラムを編集することもできます。変更は同期されます。

視覚的に編集

1. フォーカスモードで図を開きます。
2. 図上で図形、線、またはテキストラベルを選択して直接編集できます。選択した要素にはコントロール付きのツールバーが表示され、図形の種類の変更、テキスト編集、フォントサイズの調整、太字の適用、テキスト・枠線・塗りつぶしの色設定などを行えます。
   
3. レイアウトの方向を設定します。Diagram ツールバーの方向コントロールをクリックし、 上から下へ、 下から上へ、 左から右へ、または 右から左へを選択します。
   
4. 間隔を調整します。レイアウトコントロールを開き、より詰まったレイアウトにするには 狭め、バランスの取れた間隔にするには 標準、視認性が高く読みやすい余裕のあるレイアウトにするには 広めを選択します。
   
5. コードパネルを開いて、Mermaid 構文が反映されていることを確認します。

コードを編集

1. フォーカスモードで図を開きます。
2. コードパネルを開きます。
   
3. Mermaid 構文を更新します。
   編集すると図が再レンダリングされます。

コードパネルの設定アイコン（歯車）をクリックして、エディターのコード表示方法を調整します：

• 行番号： エディタの行番号を表示または非表示にする
• テキストの折り返し： 横にスクロールする代わりに、長い行をパネル幅に合わせて折り返す

AI で編集

1. 図のウィジェットのリンクをコピーする
2. Miro MCP に認証した状態で、使用する AI ツールを開く
3. エージェントに変更を依頼し、編集してほしい図のウィジェットのリンクを貼り付ける
   エージェントが編集すると、その場で図が再レンダリングされる

注：ビジュアル編集とコードパネルはフォーカスモードでのみ利用可能です。キャンバス上で分割表示して直接編集することはサポートされていません。

その他の編集機能

図形がもっと必要な場合、または図形を自由に移動したい場合は、図を自由編集モードに切り替えます。図形パネル、レイアウトパネル、または図上で図形を移動しようとすることで開始できます。

1. 図形を移動してみるか、図形パネルまたはレイアウトパネルで自由編集モードに切り替えるを選択します。
   自由編集モードに切り替えるモーダルが開きます。
2. 切り替え方法を選択します:
   • 切り替えて置き換え：この図を自由編集モードに変換します。
   • コピーを作成してから切り替え：現在の Mermaid バージョンを保持し、コピーを自由編集モードに変換します。

警告：一度図を自由編集モードに切り替えると、Mermaid のコードとは同期されなくなり、MCP を介して編集できなくなります。

サポートされているダイアグラム種別

フローチャートは Miro の図形として表示されます。その他の Mermaid ダイアグラム種別は段階的に追加されています：

まだ視覚的に編集できない図の種類が必要な場合は、 こちらのフォームからご意見をお寄せください。場合によってはインタビューのご依頼をすることがあります。

Mermaid の図の種類と構文の完全な一覧については、 公式 Mermaid ドキュメントをご覧ください。

共有とエクスポート

• Miro MCPで読み取る。 接続されたエージェントにボードの URL から図を読み取ってもらい、コードベース、PR、その他のツールにドキュメント化できます。Mermaid のソースは双方向の同期に対応したまま利用できます。
• リンクを共有する。 ボードの URL をコピーするか、図の その他 メニュー（⋯）から フォーカスモードのリンクをコピー を選択して、コラボレーターを図に直接誘導できます。詳しくは ボードの共有とコラボレーターの招待 を参照してください。
• PDF または画像としてダウンロードする。 図の その他 メニュー（⋯）から PDF としてエクスポート または 画像としてエクスポート（JPG、SVG、PDF）を選択します。ボードから図を画像としてコピーすることもできます。

既知の制限

以下の制約にご注意ください：

• ビジュアル編集はフローチャートでのみ利用できます。
• ビジュアル編集とコードパネルはフォーカスモードでのみ利用できます。
• 図形、テキスト、線のビジュアル編集は、Mermaid 構文でサポートされている範囲に限られます。
• ダイアグラムは Miro のネイティブな自動レイアウトを使用します。Mermaid のダイアグラム上では、図形を自由に移動できません。

機能のリクエストは継続的に検討しています。これらの制約が支障になる場合は、コミュニティーまたは管理者を通じてご連絡ください。

追加情報

• Mermaid の構文、対応するダイアグラムの種類、例については、公式 Mermaid ドキュメントをご覧ください。
• ダイアグラム形式の機能（レイヤー、コンテナ、フォーカスモードなど）については、Miro ダイアグラムをご覧ください。
• AI ツールを Miro に接続する方法については、Miro MCP Server の概要をご覧ください。