対象ユーザー：すべてのユーザー
対象プラン：Free、Starter、Business、Enterprise、Education
対象プラットフォーム：ブラウザー、デスクトップ
Mermaid のコードから図を作成し、Miro の図形や線と同じように編集できます。Mermaid が唯一の情報源として機能するため、構造を失うことなく Miro、コードベース、AI ツール間で図を移動できます。
注：構造化された Mermaid 図はベータ版です。対応する図の種類や編集機能は段階的に改善されており、以下に記載されている機能の一部はまだ展開中です。
注意：従来の Mermaid アプリに関する情報をお探しの場合は、Miro の Mermaid ダイアグラム（従来）を参照してください。
Miro で Mermaid ダイアグラムを使う理由
- 既存の Mermaid ワークフローと一貫して利用できます。 文書、PR、AI チャットで普段使っているのと同じ Mermaid 構文を使用できます。Miro MCP を使えば、エージェントがボード上で Mermaid ダイアグラムを作成、読み取り、更新、編集できます。
- Miro の図形としてレンダリングされます。 Mermaid コードは編集可能な Miro の図形とコネクターから構成される Diagram に変換され、Miro によって自動レイアウトされます—静的な画像ではありません。
- 双方向の編集。 ボード上で Diagram を視覚的に変更すると、Mermaid コードが更新されます。コードを編集すると Diagram が再レンダリングされます。
- コラボレーション向けに設計されています。 Diagram はネイティブな Miro コンテンツなので、チームは同じボード上でコメントや共同編集を行い、リアルタイムで反復できます。
Mermaid 図を作成する
Mermaid 図は 3 通りの方法で追加できます。
ボードに Mermaid コードを貼り付ける
- エディター、文書、または AI チャットから Mermaid コードをコピーします。
- 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 ダイアグラム種別は順次追加されています：
- Flowcharts: ネイティブで編集可能な Miro 図形としてレンダリングされます。
- Sequence, Class, and Entity Relationship diagrams: シーケンス図、クラス図、エンティティ関係図はネイティブの Miro 図形としてレンダリングされます。視覚的編集は近日対応予定です。
- Other diagram types: 上記にない図の種類が必要な場合は、こちらのフォームからフィードバックをお寄せください。場合によってはインタビューのお願いをすることがあります。
Mermaid の図の種類と構文の完全な一覧については、公式の Mermaid ドキュメントをご覧ください。
共有とエクスポート
- Miro MCP で読む。 接続されたエージェントにボードの URL から図を読み取らせ、コードベース、PR、その他のツールにドキュメント化できます。Mermaid のソースはラウンドトリップに利用可能なままです。
- リンクを共有。 ボードの URL をコピーするか、図のその他メニュー（⋯）からフォーカスモードのリンクをコピーを選択して、共同作業者を図に直接案内できます。詳しくは ボードの共有とコラボレーターの招待 を参照してください。
- PDF または画像としてダウンロード。 ダイアグラムの その他 メニュー（⋯）から、PDF としてエクスポート または 画像としてエクスポート（JPG、SVG、PDF）を選択します。ボードからダイアグラムを画像としてコピーすることもできます。
既知の制限
構造化された Mermaid ダイアグラムはベータ版のため、現時点での制約にご注意ください:
- ビジュアル編集はフローチャートでのみ利用可能です。
- ビジュアル編集とコードパネルはフォーカスモードでのみ利用可能です。
- 図形、テキスト、線のビジュアル編集は、Mermaid の構文がサポートする範囲に限られます。
- 図は Miro のネイティブな自動レイアウトを使用します。図形を自由に移動したり、Mermaid がサポートしていないレイアウトを使用したい場合は、図をフリーフォームに変換してください。
- 図形のドラッグ＆ドロップは近日公開予定です。現時点では、図形の+ボタン、またはコピー＆ペーストや複製で図形を追加してください。
追加情報
- Mermaid の構文、対応する図の種類、およびサンプルについては、Mermaid 公式ドキュメント を参照してください。
- レイヤー、コンテナ、フォーカスモードなど、Diagram フォーマットの機能については、Miro ダイアグラム を参照してください。
- AI ツールを Miro に接続する方法については、Miro MCP Server の概要 をご覧ください。