Miro の Mermaid ダイアグラム（レガシー）

対象ユーザー：すべてのユーザー
プラン：すべてのプラン
プラットフォーム：ブラウザー、デスクトップ

注意：Mermaid ダイアグラムは現在 Miro にネイティブで搭載されています。Mermaid ダイアグラムの作成 を参照してください

Mermaid アプリを使えば、Miro のボード内にコードベースのリッチなダイアグラムを簡単に作成して埋め込めます。これにより、シンプルなテキストベースの構文で複雑なシステムやワークフロー、データ構造を可視化でき、共同作業や理解が深まります。

図のコードを変更するとプレビューがリアルタイムで更新される様子

Mermaid アプリをインストールする

Mermaid アプリは、Miro マーケットプレイスまたは Miro ボード内の作成ツールバーから直接インストールできます。

Miro マーケットプレイスからインストールするには：

1. 次のいずれかにアクセスしてください：Miro マーケットプレイス または この Mermaid アプリへの直接リンク。
2. インストールを完了するには、Miro のチームを選択する必要があります。

作成ツールバーからもアプリをインストールできます:

1. ボード左側の作成ツールバーで、ツール、メディア、インテグレーション（＋）を選択します。ツール、メディア、インテグレーションパネルが開きます。
2. ツールタブで、Mermaid Diagramsを検索して選択します。
3. Mermaid Diagramsアプリのパネルが開き、アプリがツールバーに追加されます。

✏️ 注意： チーム設定でアプリのインストールが制限されている場合、管理者以外のユーザーはアプリをインストールできません。

Miro のボードにダイアグラムを作成して追加する

インストールすると、Mermaid アプリを使ってテキストベースのコードからダイアグラムを生成し、画像としてボードに追加できます。

インストール後、作成ツールバーに Mermaid アプリが表示されます。アプリはデフォルトのサンプルコードで開きます。コードを編集してダイアグラムを作ると、右側のプレビューエリアがリアルタイムで更新され、変更をすぐに確認できます。

Mermaid アプリにはいくつかのサンプルダイアグラムがあり、アプリパネルの左下からアクセスできます。これらのサンプルのいずれかを選択して、必要に応じてカスタマイズできます。

コードエディター ペインの右端をドラッグしてサイズを変更できます。

コードエディターのサイズ変更

ダイアグラムの作成が完了したら、ボードに追加をクリックします。ダイアグラムは画像としてボードに追加されます。

ボードにダイアグラムを追加

既存のダイアグラムを編集

すでに Miro ボード上にある Mermaid ダイアグラムを編集することができます。

1. ボード上の Mermaid ダイアグラム画像をクリックして選択します。
2. 表示されるコンテキストメニューのMermaid アイコンをクリックします（または作成ツールバーで見つけます）。
3. Mermaid エディターが開き、ダイアグラムのコードが表示されます。コードエディターでコードを編集してください。
4. ダイアグラムを更新 をクリックします。
5. Miro ボードに戻り、ボード上のダイアグラムが変更内容で更新されます。

追加情報

Miro で Mermaid ダイアグラムを扱う際の追加のリソースと詳細です。

Mermaid の構文とドキュメント

Mermaid アプリは、テキストからダイアグラムを生成するために特定の構文を使用します。対応するダイアグラムの種類やオプションなど、構文の詳細については公式の Mermaid ドキュメントをご確認ください。Miro 内の Mermaid アプリパネルの左下からもこのドキュメントへのリンクにアクセスできます。

ダイアグラムの共有とエクスポート

Mermaid ダイアグラムをボードに追加すると、画像として扱われます。必要に応じて、その画像をボードから直接ダウンロードできます。共同作業する場合は、図を含む Miro ボードを共有できます。