対象： すべてのユーザー
プラン： すべてのプラン
プラットフォーム： ブラウザ、デスクトップ
Mermaid ダイアグラムは現在 Miro にネイティブ対応しています。詳しくは Mermaid ダイアグラムを作成する を参照してください。
Mermaid アプリを使用すると、Miro のボード内でリッチでコードベースのダイアグラムを簡単に作成・埋め込みできます。これにより、シンプルなテキストベースの構文で複雑なシステム、ワークフロー、またはデータ構造を可視化でき、コラボレーションと理解が深まります。
ダイアグラムのコードを変更し、プレビューがリアルタイムで更新される様子
Mermaid アプリをインストールする
Mermaid アプリは、Miro マーケットプレイスまたは Miro ボードの作成ツールバーから直接インストールできます。
Miro マーケットプレイスからインストールするには：
- Miro マーケットプレイスに移動するか、Mermaid アプリへの直接リンクに従ってください。
- インストールを完了するには、Miro のチームを選択します。
作成ツールバーからもアプリをインストールできます：
- ボードの左側にある作成ツールバーで、ツール、メディア、インテグレーション（＋）を選択します。ツール、メディア、インテグレーションパネルが開きます。
- ツールタブで、Mermaid Diagramsを検索して選択します。
- Mermaid Diagramsアプリパネルが開き、ツールバーにアプリが追加されます。
✏️ 注意：チーム設定でアプリのインストールが制限されている場合、管理者以外のユーザーはアプリをインストールできません。
Miro のボードにダイアグラムを作成して追加する
インストールすると、Mermaid アプリを使ってテキストベースのコードからダイアグラムを生成し、画像としてボードに追加できます。
インストール後、Mermaid アプリは作成ツールバーに表示されます。アプリを開くと、デフォルトのサンプルコードが表示されます。ダイアグラムを作るためにコードを変更すると、右側のプレビューエリアで図が更新され、変更をリアルタイムで確認できます。
Mermaid アプリにはいくつかのサンプルダイアグラムが含まれており、アプリパネルの左下からアクセスできます。いずれかのサンプルを選択して、用途に合わせてカスタマイズできます。
コードエディター ペインのサイズは右端をドラッグして変更できます。
コードエディターのサイズ変更
ダイアグラムの作成が完了したら、[ボードに追加] をクリックします。ダイアグラムは画像としてボードに追加されます。
ボードにダイアグラムを追加
既存のダイアグラムを編集
すでに Miro ボード上にある Mermaid ダイアグラムも編集できます。
- ボード上の Mermaid ダイアグラム画像をクリックして選択します。
- 表示されるコンテキストメニューの Mermaid アイコンをクリックするか、作成ツールバーから選択します。
- Mermaid エディターがダイアグラムのコードを表示した状態で開きます。コードエディターで変更を行います。
- ダイアグラムを更新 をクリックします。
- Miro ボードに戻り、ボード上のダイアグラムが変更内容で更新されます。
追加情報
以下は、Miro で Mermaid diagrams を扱う際の追加リソースと詳細です。
Mermaid の構文とドキュメント
Mermaid app は、テキストからダイアグラムを生成するために特定の構文を使用します。サポートされているダイアグラムの種類やオプションを含む構文の詳細については、公式 Mermaid ドキュメントをご参照ください。Miro 内の Mermaid app パネルの左下にあるリンクからもこのドキュメントにアクセスできます。
ダイアグラムの共有とエクスポート
Mermaid 図はボードに追加されると画像として扱われます。必要に応じて、この画像をボードから直接ダウンロードできます。他のユーザーと共同作業するには、図を含む Miro ボードを共有できます。
データ処理
Mermaid 図を作成または編集すると、コードはブラウザ上で Mermaid.js ライブラリを使ってクライアント側でレンダリングされます。生成された図の画像は、その後ボードコンテンツの一部として Miro のサーバーに保存されます。図のコードはレンダリングのために外部サーバーに送信されることはありません。
元の図のコードと生成された画像の両方は、他のボードコンテンツと同様に Miro ボードのウィジェット内に埋め込まれます。これにより、Miro のコラボレーションおよびコンテンツ管理機能との完全な互換性が確保されます。
すべてのデータは完全に Miro のインフラストラクチャ内に留まり — Miro 環境の外部へ共有や送信は行われません。