対象ユーザー：すべてのユーザー
利用可能なプラン：Free, Starter, Business, Enterprise, Education
対応プラットフォーム：ブラウザー、デスクトップ
Mermaid のコードから図を作成し、Miro の図形や線と同じように編集できます。Mermaid のコードがソース・オブ・トゥルースとして扱われるため、Miro、コードベース、AI ツール間で図を移動しても構造は失われません。
注意：構造化された Mermaid ダイアグラムはベータ版です。サポートされる図の種類や編集機能は段階的に改善されており、以下で説明する機能の一部はまだ展開中です。
注意: 旧版の Mermaid アプリに関する情報をお探しの場合は、Mermaid ダイアグラム（レガシー） を参照してください。
Miro で Mermaid ダイアグラムを使う理由
- 既存の Mermaid ワークフローと一貫して利用できます。 既に文書や PR（プルリクエスト）、AI チャットで書いているのと同じ Mermaid 構文を使えます。Miro MCP を使えば、エージェントがボード上で Mermaid ダイアグラムを作成、読み取り、更新、編集できます。
- Miro の図形として描画されます。 Mermaid のコードは、編集可能な Miro の図形とコネクターで構成された Diagram に変換され、Miro が自動でレイアウトします — 静的な画像ではありません。
- 双方向の編集。 ボード上で図を視覚的に変更すると、Mermaid のコードが更新されます。コードを編集すれば、図が再描画されます。
- 共同作業向けに作られています。 Diagram が Miro のネイティブなコンテンツであるため、チームは同じボード上でコメントを付け、共同編集し、リアルタイムで繰り返し作業できます。
Mermaid ダイアグラムを作成する
Mermaid ダイアグラムは 3 つの方法で追加できます。
ボードに Mermaid コードを貼り付ける
- エディター、文書、または AI チャットから Mermaid コードをコピーします。
- Miro ボードに貼り付けます。
Miro はコードを編集可能な Miro 図形とコネクタで構成されたダイアグラムとしてレンダリングします。
Miro MCP でダイアグラムを作成する
Miro MCP Server に接続された MCP 対応の AI ツール（例：Cursor や Claude Code）を使用して、ボード上に Mermaid ダイアグラムを生成します。
- AI ツールを Miro MCP に接続します。設定手順については Miro MCP を参照してください。
- エージェントに、特定のボード上に Mermaid ダイアグラムを作成するよう依頼します。既存のボードに図を作成したい場合は、プロンプトにボードの URL を含めてください。
- Miro でボードを開き、レンダリングされたダイアグラムを確認、編集、共同作業できます。
エージェントはボードから Mermaid を読み取り、その場で図を更新することもできます。これにより、コードベースと Miro の間で繰り返し作業できます。エージェントが図を編集すると、追加・削除・変更された箇所を示す凡例を付けることができます。
注意: Enterprise プランでは、会社の管理者が Miro MCP を有効にしてからでないと、ユーザーは接続できません。Miro MCP サーバー（管理者ガイド）。
Diagram 形式から始める
- Miro ボードで、作成バーを開き、形式 > ダイアグラムを選択します。
- コードで開始をクリックします。
- Mermaid のテンプレートを選択するか、コードパネルにご自身の Mermaid コードを貼り付けます。
図は Miro の図形として描画されます。 - フォーカスモードやキャンバス上で編集を続けます。
ダイアグラム形式、フォーカスモード、レイヤー、テンプレートの詳細は、Miro ダイアグラムを参照してください。
Mermaid ダイアグラムの編集
ダイアグラムは、AI を使って、ボード上で視覚的に、または Mermaid のソースで編集できます。変更は同期されます。
視覚的に編集
- ダイアグラムをフォーカスモードで開きます。
- 通常の Miro ダイアグラムと同様に図形やコネクターを追加・削除します。
- レイアウトを、上から下または左から右に変更します。
- コードパネルを開き、Mermaid の構文が一致するように更新されていることを確認します。
コードを編集
- ダイアグラムをフォーカスモードで開きます。
- コードパネルを開きます。
- Mermaid の構文を更新します。
編集するとダイアグラムがリアルタイムで再描画されます。
AI で編集
- ダイアグラム ウィジェットのリンクをコピーします。
- Miro MCP に認証済みのお好みのエージェントを開きます。
- エージェントに変更を依頼し、編集してほしいダイアグラム ウィジェットのリンクを貼り付けます。
エージェントが編集すると、ダイアグラムはその場で再描画されます。
注：ビジュアル編集とコードパネルはフォーカスモードのみで利用できます。キャンバス上での分割表示による直接編集はサポートされていません。
編集機能の拡張
図形をもっと使いたい場合、または図形を自由に移動したい場合は、図形パネルまたはレイアウトパネルのいずれかのエントリーポイントからダイアグラムをフリーフォームに切り替えてください。
警告：一度ダイアグラムをフリーフォームに切り替えると、Mermaid コードと同期しなくなり、MCP を介して編集できなくなります。
サポートされているダイアグラム種別
フローチャートはネイティブな Miro 図形としてレンダリングされます。その他の Mermaid ダイアグラム種別は段階的に追加されています：
- フローチャート: ネイティブの Miro 図形としてレンダリングされ、編集できます.
- シーケンス図, クラス図, およびエンティティ関係図: ネイティブの Miro 図形としてレンダリングされます; ビジュアル編集は近日対応予定です.
- その他のダイアグラムタイプ: 上に記載されていないダイアグラムタイプが必要な場合は、このフォームでフィードバックをお寄せください. インタビューをお願いする場合があります.
Mermaid ダイアグラムの種類と構文の完全な一覧については, 公式 Mermaid ドキュメントを参照してください.
共有とエクスポート
- Miro MCP で読み取る。 接続されたエージェントにボードの URL から図を読み取らせ、コードベース、プルリクエスト、その他のツールにドキュメント化できます。Mermaid のソースはそのまま残り、往復編集が可能です。
- リンクを共有する。 ボードの URL をコピーするか、図の その他 メニュー（⋯）から フォーカスモードのリンクをコピー を選択して、コラボレーターを直接その図に送れます。詳しくは ボードの共有とコラボレーターの招待 を参照してください。
- PDF または画像としてダウンロード 図のその他メニュー（⋯）から、PDF をエクスポートまたは画像をエクスポート（JPG、SVG、PDF）を選択します。ボードから図を画像としてコピーすることもできます。
既知の制限
構造化された Mermaid ダイアグラムはベータ版のため、以下の制約にご注意ください:
- ビジュアル編集はフローチャートのみで利用可能です。
- ビジュアル編集とコードパネルはフォーカスモードでのみ利用可能です。
- 図形、テキスト、線のビジュアル編集は、Mermaid の構文がサポートする範囲に限定されます。
- 図は Miro のネイティブ自動レイアウトを使用します。図形を自由に移動させたり、Mermaid がサポートしないレイアウトを使用したい場合は、図をフリーフォームに変換してください。
- 図形のドラッグ＆ドロップは近日公開予定です。現時点では、図形の上の + ボタンを使うか、コピー＆ペーストや複製で図形を追加してください。
追加情報
- Mermaid の構文、サポートされている図の種類、例については、Mermaid 公式ドキュメントをご覧ください。
- Diagram 形式の機能（レイヤー、コンテナ、フォーカスモードなど）については、Miro ダイアグラムをご覧ください。
- AI ツールを Miro に接続する方法については、Miro MCP Server の概要をご覧ください。