対象ユーザー: すべてのユーザー
対象プラン: 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 によって自動でレイアウトされます。静的な画像ではありません。
- 双方向編集が可能です。 ボード上で図を視覚的に変更すると、Mermaid コードが更新されます。コードを編集すると、図が再レンダリングされます。
- コラボレーション向けに設計されています。 ダイアグラムは Miro のネイティブ コンテンツであるため、チームは同じボード上でリアルタイムにコメントを付けたり、共同編集したり、繰り返し改善したりできます。
Mermaid ダイアグラムを作成する
Mermaid ダイアグラムは 3 通りの方法で追加できます。
ボードに Mermaid コードを貼り付ける
- エディター、文書、または AI チャットから Mermaid コードをコピーします。
- Miro ボードに貼り付けます。
Miro はコードを Miro の図形とコネクタで構成されたダイアグラムとしてレンダリングします。
Miro MCP でダイアグラムを作成する
Miro MCP Server に接続された MCP 対応の AI ツール（例: Cursor や Claude Code）を使って、ボード上に Mermaid ダイアグラムを生成します。
- AI ツールを Miro MCP に接続します。
- エージェントに特定のボード上に Mermaid ダイアグラムを作成するよう依頼します。既存のボードにダイアグラムを作成したい場合は、プロンプトにボードの URL を含めてください。
- Miro でボードを開き、レンダリングされたダイアグラムを確認、編集、共同作業できます。
エージェントはボードから Mermaid コードを読み取り、図をその場で更新することもできるため、コードベースと Miro の間で繰り返し作業を続けられます。エージェントが図を編集すると、追加、削除、変更された箇所を示す凡例を追加できます。
注意： Enterprise プランでは、会社の管理者がユーザーが接続できるように事前に Miro MCP を有効にする必要があります。詳細は Miro MCP サーバー（管理者ガイド） をご覧ください。
Diagram 形式から開始
- Miro ボードで、作成バーを開き、形式 > ダイアグラム を選択します。
- コードで構築 をクリックします。
- コードパネルに自分の Mermaid コードを貼り付けるか、Mermaid のテンプレートを選択します。
ダイアグラムは Miro の図形としてレンダリングされます。 - フォーカスモードまたはキャンバス上で編集を続けます。
ダイアグラム形式、フォーカスモード、レイヤー、テンプレートの詳細については、Miro ダイアグラム を参照してください。
Mermaid ダイアグラムを編集する
ボード上で視覚的に編集することも、Mermaid のソースで編集することも、AI を使って図を編集することもできます。変更は同期されたままです。
視覚的に編集
- 図をフォーカスモードで開きます。
- 図上で直接編集するには、図形、線、またはテキストラベルを選択します。選択した要素用のツールバーが開き、たとえば図形タイプの変更、テキストの編集、フォントサイズの調整、太字の適用、テキスト・枠線・塗りつぶしの色の設定などが行えます。
- レイアウトの方向を設定します。Diagram ツールバーの方向コントロールをクリックし、 上から下, 下から上, 左から右, または 右から左を選択します。
- 間隔を調整します。レイアウトコントロールを開き、 Narrow を選択するとレイアウトが詰まり、 Regular は間隔が均一になり、 Wide を選択すると視認しやすいゆったりしたレイアウトになります。
- コードパネルを開き、Mermaid の構文が更新されて一致していることを確認します。
コードを編集
- フォーカスモードでダイアグラムを開きます。
- コードパネルを開きます。
- Mermaid の構文を更新します。
編集するとダイアグラムは自動的に再描画されます。
コードパネルの設定アイコン（歯車）をクリックして、エディターのコード表示方法を調整します：
- 行番号： エディターに行番号を表示または非表示にします。
- 折り返し表示： 長い行を横スクロールする代わりにパネル幅に合わせて折り返します。
AI で編集
- ダイアグラム ウィジェットのリンクをコピーします。
- Miro MCP に認証された状態で、お好みの AI ツールを開きます。
- エージェントに変更を依頼し、編集してほしいダイアグラム ウィジェットのリンクを貼り付けます。
エージェントが編集すると、ダイアグラムはその場で再レンダリングされます。
注意：ビジュアル編集とコードパネルはフォーカスモードでのみ利用可能です。キャンバス上での分割ビュー編集はサポートされていません。
その他の編集機能
図形がもっと必要な場合、または図形を自由に移動させたい場合は、ダイアグラムを free-form に切り替えてください。切り替えは図形パネル、レイアウトパネル、またはダイアグラム上で図形を移動しようとする操作から行えます。
- 図形を移動してみるか、図形パネルまたはレイアウトパネルから 自由編集モードに切り替える を選択します。
The 自由編集モードに切り替える モーダルが開きます. - 切り替え方法を選択します：
- 切り替えて置き換える： このダイアグラムを自由編集モードに変換します。
- コピーを作成してから切り替える： 現在の Mermaid バージョンを保持し、コピーを自由編集モードに変換します。
警告：ダイアグラムを一度自由編集モードに切り替えると、Mermaid コードと同期しなくなり、MCP 経由で編集できなくなります。
サポートされているダイアグラム種別
フローチャートは Miro の図形としてレンダリングされます。追加の Mermaid ダイアグラム種別は段階的に追加されます:
| ダイアグラム種別 | レンダラー | 視覚的に編集できますか？ |
|---|---|---|
| フローチャート | Miro の図形 | はい |
| シーケンス | Miro の図形 | 近日公開 |
| クラス | Miro の図形 | 近日公開 |
| ER (Entity-Relationship) | Miro の図形 | 近日公開 |
| その他の Mermaid ダイアグラム | Mermaid SVG | いいえ |
| Mermaid でサポートされていないダイアグラム (例えば、スイムレーン) | 該当なし | 該当なし |
視覚的に編集できない図タイプが必要な場合は、 このフォームにご意見をお寄せください。インタビューのお願いでご連絡する場合があります。
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 の概要を参照してください。