人物：全ユーザー
プラン：すべてのプラン
プラットフォーム：ブラウザー、デスクトップ
Mermaid アプリを使用すると、Miro のボード内でコードベースのリッチなダイアグラムを簡単に作成して埋め込むことができます。これは、シンプルなテキストベースの構文を使用して複雑なシステム、ワークフロー、またはデータ構造を視覚化し、コラボレーションと理解を向上させることができます。
ダイアグラムコードを変更して、リアルタイムでプレビューが更新される様子
Mermaid アプリをインストールする
Mermaid アプリは、Miro マーケットプレイスから、または Miro ボード内の作成ツールバーから直接インストールできます。
Miro マーケットプレイスからインストールするには：
- 次に移動します Miro マーケットプレイス または この直接リンクから Mermaid アプリ。
- インストールを完了するには、Miro のチームを選択してください。
作成ツールバーからアプリをインストールすることもできます：
- ボードの左側にある作成ツールバーで、ツール、メディア、インテグレーション（+）を選択します。ツール、メディア、インテグレーションパネルが開きます。
- ツールタブで、Mermaid Diagrams を検索して選択します。
- Mermaid Diagrams アプリパネルが開き、このアプリがツールバーに追加されます。
✏️ 注意:チーム設定でインストールが制限されている場合、管理者以外のユーザーはアプリをインストールすることができません。
ダイアグラムを作成して Miro ボードに追加する
インストールすると、Mermaid アプリを使用してテキストベースのコードでダイアグラムを生成し、画像としてボードに追加することができます。
インストール後、Mermaid アプリは作成ツールバーに表示されます。アプリはデフォルトのサンプルコードで開きます。コードを修正してダイアグラムを作成すると、右側のプレビューエリアでリアルタイムに変更を確認できます。
Mermaid アプリには、アプリパネルの左下からアクセスできるいくつかのサンプルダイアグラムが含まれています。これらのサンプルのいずれかを選択し、その後、ニーズに合わせてカスタマイズすることができます。
コードエディター ペインのサイズを右端からドラッグして変更できます。
コードエディター ペインのサイズ変更
ダイアグラムの作成が完了したら、ボードに追加 をクリックします。ダイアグラムは画像としてあなたのボードに追加されます。
ボードにダイアグラムを追加
既存のダイアグラムを編集
Miro ボード上にある Mermaid ダイアグラムを変更することもできます。
- ボード上でマーメイド ダイアグラムの画像をクリックして選択してください。
- Mermaid アイコンを表示されるコンテキストメニューでクリックするか、作成ツールバーで見つけてください。
- Mermaid エディターが開き、ダイアグラムのコードが表示されます。コードエディターで変更を行います。
- [ダイアグラムを更新] をクリックします。
- Miro ボードに戻ると、ボード上のダイアグラムが変更内容で更新されます。
追加情報
Miro で Mermaid ダイアグラムを操作するための追加のリソースと詳細情報を以下に示します。
Mermaid の構文とドキュメント
Mermaid アプリは、特定の構文を使用してテキストからダイアグラムを生成します。構文の詳細、サポートされているダイアグラムタイプやオプションについては、公式の Mermaid ドキュメントをご参照ください。Miro 内の Mermaid アプリパネルの左下から、このドキュメントへのリンクにもアクセスできます。
ダイアグラムの共有とエクスポート
Mermaid ダイアグラムがボードに追加されると、画像として機能します。必要に応じて、ボードから直接この画像をダウンロードできます。他の人と共同作業をするには、ダイアグラムを含む Miro のボードを共有することができます。