はじめに

AWSの構成図をDraw.ioを使用して書くことが多いのですが、1つのファイル内で他の方と分担して作業をしていたりすると、上書きをして先祖返りが起こる可能性があります。
Google スプレッドシートやMiroなどのように、リアルタイムで共有しながら編集ができたら便利だなと思い調査をすると、VSコードのプラグインを使用すれば可能であることがわかりました。

準備すること

VSコードにインストールするプラグイン

• Drawio Integration
• Live Share

GitHubアカウントまたはMicrosoftアカウント

LiveShare実行方法

フォルダ(Workspace)作成

[ファイル]⇒[フォルダを開く]で任意のフォルダを選択する。

ファイル作成

.drawio、.dio、.drawio.svg、.drawio.pngいずれかの拡張子でファイルを作成します。

GitHubアカウントまたはMicrosoftアカウント連携

以下のShareを選択すると、GitHubアカウントとの連携を聞かれますので、指示通りに連携をします。

連携が完了すると以下のようになります。
赤枠をクリックすると共有相手に送るＵＲＬを発行できます。

共有

[ホスト]
ログイン後に[SESSION DETAIL]の横にあるCopy Colaboration LinkアイコンやMore Infoなどからリンクをコピーしてメンバーへ共有。

[ゲスト]
画面左側のメニューアイコンの「Live Share」から「SESSION DETAILS」からJoinを選択し共有されたリンクを入力すると認証が発生するので「Github」でログインする。
[VISUAL STUDIO LIVESHRE(WORKSPACE)]からホスト側で作成したDraw.ioファイルが閲覧でき、クリックしてDraw.ioの画面が表示されて閲覧・編集できれば設定完了。