Mermaid ダイアグラムの作成

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

Mermaid のコードから図を作成し、Miro の図形や線と同じように編集できます。Mermaid のコードが真の情報源として保持されるため、図を Miro、コードベース、AI ツール間で移動しても構造は失われません。

旧版の Mermaid アプリに関する情報をお探しの場合は、Miro 向け Mermaid 図（レガシー）を参照してください。

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

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

Mermaid ダイアグラムを作成する

Mermaid ダイアグラムは、いくつかの方法で追加できます。

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

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

コードに構文エラーがある場合、Miro はキャンバス上にフィードバックを表示するので、フォーカスモードを開いてコードパネルで修正できます。コードを修正すると、図は自動的にレンダリングされます。

Mermaid ファイルをドラッグ＆ドロップ

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

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

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

ボード上で視覚的に、Mermaid ソース内で、または AI（サイドキック、フロー、または Miro MCP）で編集できます。変更は同期されます。

視覚的に編集

1. フォーカスモードで図を開く
2. 図上で直接編集するには、図形、線、またはテキストラベルを選択し、選択要素用のコントロールを備えたツールバーで図形の種類変更、テキスト編集、フォントサイズ調整、太字適用、テキスト・枠線・塗りつぶしの色設定などを行う
   
3. コードパネルを開き、Mermaid コードがそれに合わせて更新されていることを確認する

図形の作成と接続

フォーカスモードでは、Mermaid コードを編集せずに図を拡張できる：

• 図形をクリックして追加 図形パネルを開き、図形をクリックして図に追加します。パネルには Mermaid のフローチャート用図形と標準の Miro フローチャート図形が含まれます。
• 接続された図形を追加 図形を選択し、+ ボタンをクリックして、それに接続された新しい図形を追加します。
• 図形を接続 図形を選択し、+ ボタンを別の図形にドラッグして、両者の間に線を引きます。既存の線を再接続してフローを変更することもできます。

レイアウトを調整

フォーカスモードでレイアウトパネルを開き、図の配置方法を変更します：

1. Under Direction, click an arrow to set the flow of the diagram: left to right, top to bottom, bottom to top, or right to left.
   
2. Under Spacing, drag the Horizontal and Vertical sliders to set the gap between shapes.
   
3. Under Shapes, choose how shapes are sized:
   • Same width: All shapes share a uniform width for a neat, aligned layout.
   • Fit to content: Each shape is sized to its text—useful when some shapes have much more text than others.
4. テキストで、ラベルの配置方法を選択する：
   • 複数行：長いラベルは複数行に折り返される
   • 単一行：各ラベルは1 行に収まり、図形が横に広くなる

コードを編集

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

編集中：

• 図形とコードは連動します。 ダイアグラム上の図形を選択するとそのコードがハイライトされ、コードを選択すると対応する図形に移動します。
• 構文ハイライト によりエディタ内の Mermaid トークンに色が付き、構造が見やすくなります。
• コードパネルのサイズを変更して、編集時に作業スペースを広げられます。

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

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

AI で編集

サイドキック、サイドキック、フロー、または Miro MCP 経由で接続されたエージェントを使って、Mermaid ダイアグラムを反復的に編集できます。エージェントは Mermaid のソースを読み取り編集できるため、ダイアグラム全体を再生成せずに正確な変更を行えます。

サイドキックまたはフローを使う場合：

1. ボード上で Diagram を選択する、または Diagram ウィジェットのリンクをコピーする
2. サイドキックを開く、またはフローを実行する
3. 変更したい内容を依頼する（例：「この Diagram のすべてのコンテナを赤にして」）
   Diagram はその場で更新される

Miro MCP を使う場合：

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

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

編集機能の拡張

より多くの図形が必要な場合、または図形を自由に移動したい場合は、図をフリーフォームに切り替えます。図形パネル、レイアウトパネル、または図上の図形を動かそうとすることで切り替えを開始できます。

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

ダイアグラムを自由編集モードに切り替えると、Mermaid コードとの同期が解除され、MCP で編集できなくなります。

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

この表は、各 Mermaid ダイアグラム種別が Miro 上でどのようにレンダリングされるかを示します。フォーカスモードでの視覚的編集は現時点でフローチャートに対応しており、今後順次ほかの種別も追加されます：

まだ視覚的に編集できないダイアグラム種別が必要な場合は、このフォームからフィードバックをお寄せください。インタビューのお願いをする場合があります。

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

共有とエクスポート

• Miro MCP で読む。 接続されたエージェントにボードの URL から図を読み取ってもらい、コードベースや PR、ほかのツールにドキュメント化できます。Mermaid ソースはそのまま利用できるため、ボードとコード間で往復のやり取りが可能です。
• リンクを共有する。 ボードの URL をコピーするか、図のその他メニュー（⋯）から フォーカスモードのリンクをコピー を選んで、共同作業者を直接図に誘導できます。詳しくは ボードの共有とコラボレーターの招待 を参照してください。
• PDF または画像としてダウンロードする。 図のその他メニュー（⋯）から PDF として書き出す または 画像として書き出す（JPG、SVG、PDF）を選択します。ボードから図を画像としてコピーすることもできます。

既知の制限

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

• 視覚的編集はフローチャートでのみ利用可能です。状態図、シーケンス図、クラス図、ER 図は Miro のネイティブ図形としてレンダリングされますが、これらの種類の視覚的編集は後日対応予定です。
• 視覚的編集およびコードパネルはフォーカスモードでのみ利用できます。
• 図形、テキスト、線の視覚的編集は Mermaid の構文でサポートされる範囲に限られます。
• 図は Miro のネイティブ自動レイアウトを使用します。Mermaid 図では図形を自由に移動できません。

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

追加情報

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