Miro の Mermaid ダイアグラム

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

Mermaid アプリを使用すると、Miro ボード内にリッチでコードベースのダイアグラムを簡単に作成して埋め込むことができます。これにより、シンプルなテキストベースのシンタックスを使用して複雑なシステムやワークフロー、データ構造を視覚化でき、コラボレーションと理解を促進します。

ダイアグラムコードの変更とリアルタイムでのプレビュー更新

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

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

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

1. Miro マーケットプレイス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 ボードを共有できます。