Miro による Draw.io ダイアグラム

対象: すべてのユーザー
プラン: Free、Starter、Business、Education、Enterprise の各プラン
プラットフォーム: ブラウザー、デスクトップ

Miro 構築の Draw.io アプリを使えば、様々な種類のダイアグラムを作成してコラボレーションでき、部門横断型のチーム、プロジェクト、技術文書を単一のワークスペースに統合することができます。UML や ERD などのテクニカルダイアグラムの作成、サーバーラックの設計、ネットワークやクラウドアーキテクチャーの視覚化に最適です。

Draw.io Diagrams の主な機能

Draw.io Diagrams アプリで利用できる様々な高度な機能により、ダイアグラム作成プロセスを効率化できます。これらの機能は、カスタマイズ性、作業効率、既存のワークフローとの連携を向上させます。

• ArchiMate の Enterprise Architecture、電気回路、平面図など 50 以上の図形パックを活用し、オープンソースのアイコンライブラリーから図形を検索できます。
• draw.io、Visio、Lucidchart からダイアグラムをインポートできます。
• レイヤー、タグ、スマートコンテナ、自動レイアウト、図形メタデータなどの高度な機能を活用できます。
• HTML でテキストを書式設定し、ラベルに数学的書式を使用できます。
• PlantUML、Mermaid コード、CSV スプレッドシートデータとフォーマット情報、または SQL コードを使用してダイアグラムのテキストを生成できます。
• draw.io のスマートテンプレートを使って、テキスト記述からダイアグラムを生成できます。

✏️ Enterprise 管理者は、アプリ設定から Draw.io Diagrams アプリを承認済みアプリリストに追加できます。

Draw.io Diagrams を使い始める

このセクションでは、Miro ボードで Draw.io Diagrams アプリにアクセスして初期設定を行い、ダイアグラム作成にすぐ使えるようにする手順を案内します。

Draw.io Diagrams アプリを起動します。

Draw.io Diagrams を使い始めるには、まず Miro ボードのツールバーから起動する必要があります。以下の手順に従ってください。

1. ボードの左側にある作成ツールバーに移動します。
2. ツール、メディア、インテグレーション (+) アイコンをクリックし、Draw.io Diagrams を検索します。
3. Draw.io Diagrams アプリを起動します。

作成ツールバーから Draw.io Diagrams アプリを起動

Draw.io Diagrams アプリをツールバーにピン留め

今後すばやく使えるように、Draw.io Diagrams アプリを作成ツールバーに直接ピン留めできます。操作手順は次のとおりです。

1. ツールバーでアプリを検索したら、検索結果のDraw.io Diagrams アプリにカーソルを合わせます。
2. ツールバーにピン留めする アイコンをクリックします。

Draw.io Diagrams アプリをツールバーにピン留め

Draw.io でダイアグラムを作成する

Draw.io Diagrams アプリでは、ダイアグラム作成を始める際に柔軟に対応でき、白紙のキャンバスから開始するか、あらかじめ用意されたテンプレートを利用するかを選べます。既存のダイアグラムをさまざまなソースから取り込むこともできます。

💡 既存の draw.io ダイアグラムを Miro ボードに追加できます。Draw.io ダイアグラムのインポート方法はこちらをご覧ください。

新しいダイアグラムを作成

図を一から作成するには、次の手順に従ってください。この方法では、自由にデザインできる空白のキャンバスが利用できます。

✏️ Draw.io のルーラー、カスタマイズ可能な表、位置決めガイドラインを使用して、より素早く図を描くことができます。

1. Draw.io Diagrams アプリを起動します。
2. 白紙のキャンバスが表示され、ダイアグラムを開始できます。 また、draw.io ファイルを draw.io キャンバスにドラッグ＆ドロップすることもできます。
3. 左サイドバーには、様々な図形種別があります。
4. サイドバーから図形（長方形や楕円形など）をクリックしてキャンバス上にドラッグします。
5. 必要に応じて図形とコネクターをさらに追加し、図を完成させます。 また、左サイドバーからテキストボックスや画像などの他の要素を追加することもできます。
6. 完了したら、Draw.io Diagrams アプリの右上にある保存して閉じるをクリックします。

Draw.io Diagrams アプリを使って新しいダイアグラムを作成

テンプレートを選択する

既成の構成から始めたい場合は、利用可能なテンプレートから選べます。手順は次のとおりです。

1. Draw.io Diagrams アプリを起動します。
2. 上部のツールバーで、挿入のアイコン（+）をクリックします。
3. テンプレートをクリックします。
4. テンプレートを選択します。
5. 必要に応じてテンプレートを編集してください。
6. 完了したら、右上にある保存して閉じるをクリックします。

Draw.io Diagrams アプリからテンプレートを選択

ダイアグラムを編集する

Draw.io Diagrams アプリのキャンバスに図がある状態で、構成要素をさまざまな方法で編集して構造や外観を調整できます。

図形同士をつなぐ

図形をつなぐことは図の作成における基本操作です。コネクターを作成・カスタマイズするには、次の手順に従ってください。

1. 図形にカーソルを合わせます。小さな接続ポイントが表示されます。
2. これらの接続点の 1 つから別の図形までクリックしてドラッグすると、コネクター線が作成されます。
3. コネクター線をクリックしてカスタマイズできます。右側のパネルでは、コネクターのスタイル（直線、曲線など）を変更したり、矢印やその他の終点を追加したり、線の色や太さを調整したりできます。

Draw.io Diagrams アプリで図形を接続する

図形とコネクターにラベルを追加

ダイアグラムの要素にテキスト情報を追加するには、図形やコネクターにラベルを付けます。操作手順は次のとおりです：

1. 図形またはコネクターをダブルクリックし、入力を開始します。
2. キャンバスの右側にあるテキストメニューからラベルの書式を設定します。フォントのスタイル、色、向き、サイズを変更できます。

Draw.io Diagrams アプリで図形にラベルを追加

オブジェクトの移動、サイズ変更、削除

キャンバス上のオブジェクトは簡単に操作できます。移動、サイズ変更、削除する方法は次のとおりです：

1. 図形やコネクターを移動するには、クリックして目的の位置までドラッグします。
2. 図形のサイズを変更するには、図形をクリックし、小さな青い円のいずれかをドラッグします。
3. オブジェクトを削除するには、オブジェクトを選択してキーボードの Delete キーを押すか、上部ツールバーの Delete アイコンをクリックします。

Draw.io Diagrams アプリでのオブジェクトの移動、サイズ変更、削除

図形のメタデータを編集

図形に重要な詳細をメタデータとして追加すると、より分かりやすくなります。以下の手順に従ってください。

1. Draw.io Diagrams アプリを起動します。
2. ダイアグラム内の図形を選択します。
3. 図形を右クリックし、Edit Data（データを編集）を選択します。
4. ダイアログが開き、図形のメタデータが表示されます。左がプロパティー名、右がその値です。
5. 図形に関連付けたい情報のキーと値のペアを追加します。
6. Apply（適用）をクリックしてメタデータを図形に保存します。
7. 図形にカーソルを合わせるとメタデータが表示されます。

図形のメタデータを編集

ダイアグラムにレイヤーを追加

レイヤーを使うと、ダイアグラムの構成が整理され、編集や閲覧を集中して行えるように各部分を分けられます。複雑なプロジェクトで特に便利です。

1. ダイアグラムを Draw.io Diagrams アプリで開きます。
2. 表示 をクリックし、レイヤー を選択してレイヤーのダイアログを表示します。
3. 新しいレイヤーを追加するには、レイヤーのダイアログの下部にあるプラス（＋）アイコンをクリックします。
4. レイヤー名を編集するには、レイヤーをダブルクリックし、テキストを編集して、名前を変更をクリックします。
5. レイヤーを選択すると、要素の追加や編集が可能になります。
6. レイヤーを非表示または表示するには、レイヤー名の横にある目のアイコンをクリックします。
7. ダイアグラムの編集が終了したら、保存して閉じるをクリックします。

Draw.io Diagrams アプリでのレイヤーの追加

図形と図形ライブラリーの管理

Draw.io Diagrams は、さまざまな図形ライブラリの利用やカスタム図形の管理など、ダイアグラム作成のニーズに合わせた豊富なオプションを提供します。

幅広い draw.io 図形パックの利用

Draw.io の豊富な図形パックを利用すると、ダイアグラム作成の可能性を広げることができます。追加する方法は次のとおりです：

1. Draw.io Diagrams アプリを起動します。
2. 左側の 図形 パネルの下にある 他の図形 をクリックします。
3. 各種カテゴリーを探し、追加したい図形パックの横にあるボックスにチェックを入れてください。
4. 適用 をクリックして、選択した図形パックを 図形 パネルに追加します。

draw.io 図形パックの選択

スクラッチパッドでカスタム図形を追加

ダイアグラム作成をさらにカスタマイズするには、スクラッチパッドでカスタムの図形ライブラリを作成して組み込むことができます。以下の手順に従ってください。

1. Draw.io Diagrams アプリを起動します。
2. View（表示）に移動します。
3. Scratchpad（スクラッチパッド）を選択します。
4. 左側のパネルにスクラッチパッドが開きます。
5. スクラッチパッドにファイルをドラッグ＆ドロップして、カスタム図形を追加できます。

スクラッチパッドでカスタム図形を追加

スクラッチパッドでカスタム図形を編集

スクラッチパッドにカスタム図形が追加されると、編集できます。手順は次のとおりです：

1. キャンバス上で図形をクリックします。
2. 青い点をクリックしてドラッグすると、図形のサイズを変更できます。
3. 右側のパネルを使用して、図形の色、テキスト、サイズなど、図形をさらにカスタマイズします。
4. 完成したら、図形をクリックし、スクラッチパッドのプラスアイコンをクリックします。
5. 図形はカスタム図形に追加されます。

スクラッチパッドでカスタム図形を変更

スクラッチパッドでカスタム図形の削除と名前の変更

スクラッチパッド内でカスタム図形を削除したり名前を変更したりして管理できます。以下の手順に従ってください：

1. スクラッチパッドで鉛筆アイコンをクリックします。
2. スクラッチパッドから図形を削除するには、図形の右上にある × をクリックします。
3. 図形の下にあるテキストフィールドをクリックして名前を入力します。デフォルトでは、スクラッチパッドに追加された図形は無題です。
4. 編集が終わったら、保存 をクリックします。

スクラッチパッドによるカスタム図形の削除と名前の変更

カスタム図形を図形ライブラリーとしてエクスポート

カスタム図形を他の場所で使用したり共有したりするには、図形ライブラリーとしてエクスポートします。手順は次のとおりです：

1. スクラッチパッドで鉛筆のアイコンをクリックします。
2. エクスポート をクリックして、カスタム図形を図形ライブラリーとして保存します。
3. カスタム図形ライブラリーのファイル名を入力し、保存場所を選択します。
4. 保存 をクリックします。

カスタム図形を図形ライブラリーとしてエクスポート

Visio ダイアグラムの操作

Draw.io Diagrams により、ダイアグラム作成ツール間をシームレスに移行でき、Visio のダイアグラムを異なるプラットフォーム間でも詳細を失うことなく扱えます。インポートとエクスポートの手順は以下のとおりです：

1. Draw.io Diagrams アプリを起動します。
2. インポートするには、左上のファイルをクリックし、インポート元にカーソルを合わせてデバイスを選択します。メニューにあるクラウドサービスを使用して、Visio（VSDX）ファイルをアップロードすることもできます。
3. デバイスから Visio（VSDX）ファイルを選択し、開くをクリックしてインポートします。
4. エクスポートするには、ダイアグラムを完成させた後、左上のファイルをクリックし、エクスポートにカーソルを合わせて、Visio（VSDX）を選択します。
5. 画面の指示に従ってエクスポートを完了します。

ヒント: Visio (VSDX) ファイルは、インポートおよびエクスポートして、直接 Miro Diagram フォーマット とやり取りできます。

Draw.io Diagrams アプリでのダイアグラムのインポートとエクスポート

Draw.io ダイアグラムの保存、編集、エクスポート

このセクションでは、ダイアグラム作成のワークフローにおける重要な最終ステップ、つまり Miro ボードへの保存、後からの編集、およびさまざまなフォーマットでのエクスポート方法を説明します。

draw.io ダイアグラムの保存

Draw.io Diagrams アプリで変更を加えたら、作業内容を Miro ボードに保存する必要があります。以下の手順に従ってください。

1. ダイアグラムの変更が完了したら、必ず 保存して閉じる を、Draw.io Diagrams アプリの右上でクリックしてください。
2. Draw.io Diagrams アプリが終了し、ダイアグラムが自動的に Miro ボードに表示されます。

Draw.io Diagrams アプリから図を保存

draw.io ダイアグラムの編集

Miro ボードにあるダイアグラムをさらに編集する場合は、次の手順に従います。

1. Miro ボードで、編集したいダイアグラムを選択します。
2. ツールバーが表示されます。
3. ツールバーで、鉛筆の編集アイコンをクリックします。
4. Draw.io Diagrams アプリが開き、ダイアグラムに変更を加えることができます。

Draw.io Diagrams アプリでダイアグラムを編集

draw.io ダイアグラムをエクスポート

ダイアグラムは、PNG、JPEG、PDF などのいくつかのフォーマットでアプリから直接エクスポートできます。以下の手順に従ってください：

1. Draw.io Diagramsアプリの左上にあるFileをクリックします。
2. Export asにカーソルを合わせます。
3. ご希望のフォーマットを選択し、プロンプトに従ってください。
4. Exportをクリックします。

Draw.io Diagrams アプリからダイアグラムをエクスポート

参考情報

このセクションでは、Draw.io ダイアグラムに関する具体的な活用事例やよくある質問（FAQ）などの追加情報を提供し、このツールを最大限に活用するための手助けをします。

Draw.io ダイアグラムを使用する場面

Draw.io ダイアグラムは、プロジェクトでより専門的なダイアグラム作成が必要な場合に特に有用です。以下のような場面での利用を検討してください：

• ニッチな図形ライブラリ: 複雑な電気回路図や間取り図のレイアウトなど、ニッチな図形を利用できます。
• カスタマイズ: Visio（VSSX ファイル）または draw.io 内で直接、独自の図形パックを作成し、ニーズに合わせたダイアグラムを作成できます。
• シームレスなインテグレーション: draw.io は、Visio、Lucidchart などの主要な作図ツールとスムーズな互換性があります。Visio（VSDX）を汎用フォーマットとして使用することで、簡単に共有し、共同作業を行うことができます。
• 重要な詳細を保持: レイヤーと図形の重要なメタデータ（ダイアグラム内のテキスト）を保持し、Visio、draw.io、Lucidchart から豊富な情報をそのまま移行できます。

✏️ このサードパーティー製プラットフォームアプリは、GitHub リポジトリーのオープンソース Draw.io コードを利用しており、Miro によって安全にホストされています。データは第三者と共有されません。Draw.io は貢献を受け付けていません。そのため、このサードパーティー製プラットフォームアプリは、すべてのバグやエラーを含む「現状のまま」で提供され、Miro および Draw.io はいかなる保証、補償、セキュリティーの約束、またはサポートも行いません。

よくある質問

Miro で Draw.io Diagrams アプリを使用する際の、よくある質問への回答を紹介します。