最近は開発プロジェクトをリモートワーク(テレワーク)だけで実施することが当たり前になってきており、「アジャイル」に作業をするために、ZoomやTeamsのホワイトボード、ExcelやGoogle Sheetsの共同編集、Miroのような共同編集に特化したサービス等を使用して複数人でリアルタイムに一つの成果物を作成・編集して、オフライン開発と同等かそれ以上に生産性を向上させているような開発プロジェクトも出てきているかと思います。

同様にソースファイルもVSCode拡張機能の「LiveShare」を使うことで、複数人で同時編集したりレビューを実施できますが、これにVScode拡張機能版として提供されている「Draw.io」を組み合わせることでUMLのドローイングもリアルタイム共同編集が実現できることを最近知ったので、セットアップ方法や注意点を残しておこうと思います。

リアルタイム共同編集は一昔前は簡単にはできなかったことなので、なんとなく「先端開発感」を感じれると思います。
何かとChatGPTが話題になっていますが、このような環境が徐々に整備されてくると、自分が作成した成果物をChatGPTがリアルタイムにアドバイスしてくれるような時代もそう遠くはないように思えますね。

(astah*Proにもこの機能が実装されるといいのになあ、、、）

準備

1. VScodeをインストール

VSCode未インストールの場合は以下からVisualStudioCodeをダウンロードしてインストール
https://code.visualstudio.com/download
※起動後の「テーマ」選択はお好みのテーマを選択

2. プラグインをインストール

画面左側のメニューアイコンの「拡張機能」からプラグインをインストール

Japanese Language Pack for Visual Studio Code
※初回起動後に日本語の言語パックをインストールするか聞いてくるためインストール済みの場合あり
Drawio Integration
Live Share

LiveShare実行方法

1. Draw.ioの動作確認

フォルダ(Workspace)選択

[ファイル]⇒[フォルダを開く]で任意のフォルダを選択する。
※フォルダ(Workspace)を作成しないとLiveShareで閲覧できないので注意

dioファイル作成

VScode内の「エクスプローラ」の作成したフォルダ内にで拡張子がdioとなる任意のファイルを作成しクリックして開く
Draw.ioの編集画面が表示されることを確認する。
※「ダークモード」だと使いにくいため画面右下の「Theme: XXXXX」を「Theme: Kennedy」へ変更することをおすすめします

2. Live Shareの設定

Githubアカウント作成

Live ShareではGitHubのアカウントまたはMicrosoftアカウントを使用するため、アカウントを持っていない場合は以下からアカウントを作成する
https://github.co.jp/

Live Shareの設定手順

[ホスト]

画面左側のメニューアイコンの「Live Share」の「SESSION DETAILS」から「Share」を選択すると認証が発生するので「Github」でログインする。
ログログイン後に[SESSION DETAIL]の横にある「Copy Colaboration Link」アイコンや「More Info」などからリンクをコピーしてメンバーへ共有

[ゲスト]

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

2人以上で動作確認できない場合は、VSCodeを2つ起動して各々「ホスト」「ゲスト」に見立てて接続確認する

おまけ

残念ながら私が自社で使用しているPCは、インストールされているセキュリティソフトの制約から「LiveShare」が接続できない状況です。もし、そのような環境の場合、「ホスト」側はVScodeのデスクトップ版を使用し、「ゲスト」側はVScodeのオンライン版を使用することで使える(拡張機能のインストールが必要)場合があるので、一度お試しください。
※どうやらVScodeのオンライン版はLiveShareの「ホスト」になれないようです

追記:2024/6/6
インターネット経由で接続する場合セキュリティソフト等の影響でうまく接続できない場合があるようです。
その場合、VSCodeにて[ファイル] > [ユーザー設定] > 設定で「liveshare.connectionMode」を「auto(初期値)」から「relay」変更することがで接続できる場合があるようですのでお試しください。
(恐らくゲスト側のみの設定で問題ないと思われますがホスト型とゲスト側双方での設定をお試しください)

参考サイト:Live Share の接続要件
https://learn.microsoft.com/ja-jp/visualstudio/liveshare/reference/connectivity#changing-the-connection-mode