C4 ダイアグラムとグローバルアーキテクチャでのリアルタイムコラボレーション
数週間前、ホワイトボードでのリアルタイムコラボレーションをリリースしました。反応は即座に明確でした。チームはお互いのカーソルが見えること、プレゼンスインジケーター、アーキテクチャが一緒に形作られていく様子を気に入りました。しかし最も多かったリクエストは？「実際の C4 ダイアグラムでもこれができますか？」
もっともな質問です。ホワイトボードはブレインストーミングに最適ですが、本当のアーキテクチャは C4 モデル——ソフトウェアの構造を定義するシステム、コンテナ、コンポーネント、コード要素——の中にあります。チームが最も多くの時間を費やす場所です。コラボレーションが最も重要な場所です。
今日、それを実現します。リアルタイムコラボレーションがプロジェクト C4 ダイアグラムとグローバルアーキテクチャビューで機能するようになりました。
同じマジック、最も重要な場所で
ホワイトボードコラボレーションを使ったことがあれば、すぐに馴染めます。プロジェクトのダイアグラムビューを開き、チームメイトが同じプロジェクトを開くと、彼らのカーソルがキャンバスに表示されます。名前付きの色つき矢印がダイアグラム上を滑り、アーキテクチャを探索します。
システムノードを選択すると、全員にあなたの色でハイライトされます——要素周囲の控えめなボーダー、上部にあなたの名前。チームメイトが別のコンテナを選択すると、彼らの色で選択が表示されます。視覚言語はシンプルです：誰が何を見ているか常にわかります。
アバタースタックが角に表示されます。誰がここにいるかがわかります。誰かがセッションに参加すると通知がポップアップします。すべてがスムーズに機能します。
C4 レベルをまたいだコラボレーション
ここからが面白くなります。C4 モデルは階層的です——あなたがシステムレベルで作業している間、同僚は特定のコンテナのコンポーネントレベルに深く入っているかもしれません。二人とも同じプロジェクトを編集していますが、異なる深さを見ています。
メタデータを通じてこれを追跡しています。各コラボレーターのセッションには、現在表示している C4 レベルの情報が含まれています。つまり、Sarah が同じプロジェクトにいるだけでなく、あなたがシステムレベルにいる間に彼女はコンテナレベルで作業していることがわかります。プレゼンスインジケーターが、見ていないビューにカーソルを表示するノイズなしに、お互いの認識を維持します。
二人が同じレベルにいるとき、カーソルとフォーカスハイライトが自然に表示されます。異なるレベルにいるとき、コラボレーションはバックグラウンドに留まります——存在するが邪魔にならない。
グローバルアーキテクチャ：プロジェクト横断コラボレーション
グローバルアーキテクチャビューは、組織のすべてのシステムを一箇所に表示します。全体像が見える場所——プロジェクトがどう接続され、境界がどこにあり、どのシステムがお互いと通信しているか。
このビューを一緒に探索できるようになりました。グローバルアーキテクチャを開くと、チームメイトのカーソルが組織的な景観の上を移動するのが見えます。システムを選択して調べると、全員にあなたのフォーカスが表示されます。
ここではビュースコープフィルタリングを追加しました。グローバルアーキテクチャビューにはシステムとコンテナの2つの深度モードがあるためです。あなたがシステム概要を見ていて、同僚がコンテナビューにドリルダウンしている場合、お互いのカーソルは見えません。事実上、異なるキャンバスにいます。同じ深度に切り替えると、コラボレーションが再び活性化します。
このような細部がコラボレーションをノイジーではなく自然に感じさせます。現在のコンテキストに関連するものだけが表示されます。
変更が自動同期
コラボレーションはカーソルを見るだけではありません。チームメイトが新しいシステムを追加したり、コンテナを移動したり、リレーションシップを更新したりすると、ダイアグラムが自動的にリフレッシュされます。リロードする必要はありません。「保存した？」と聞く必要もありません。
内部ではバージョン管理された操作を使用しています。すべての変更がバージョン番号をインクリメントします。クライアントは毎秒新しいバージョンをポーリングし、変更を検出すると関連データを再取得します。シンプルで信頼性が高く、どのプロキシやファイアウォールの背後でも動作します——WebSocket 接続の心配は不要です。
結果として、全員の変更が1〜2秒以内に表示される共有ワークサーフェスが実現します。アクティブなコラボレーションには十分な速度で、テキストエディタに必要なリアルタイムの文字単位同期の複雑さはありません。
統一されたシステム
最も満足している決定の一つが、統一されたコラボレーションモデルです。ホワイトボード、プロジェクト C4 ダイアグラム、グローバルアーキテクチャのすべてが同じインフラ上で動作します。1つのサービス、1セットのデータベーステーブル、1セットのエンドポイント。
内部では、すべてのコラボレーションセッションはリソースタイプ（whiteboard、project、または global）とリソース ID で識別されます。カーソルトラッキング、プレゼンス検出、操作のバージョニング、クリーンアップジョブは共有されています。これにより、一つのリソースタイプへの改善が自動的にすべてに恩恵をもたらします。
また、今後の新しい領域——フロー、ドキュメント、ADR——へのコラボレーション拡張は、既存のインフラを新しいビューに接続するだけで済み、ゼロから構築する必要はありません。
10色、混乱ゼロ
すべてのコラボレーターには、10色のアクセシブルで識別しやすい色相パレットからユニークな色が割り当てられます。割り当ては参加順に決定的に行われるため、退出して再参加しても同じ色が得られます（スロットが取られていなければ）。カーソル、要素ハイライト、アバターリング——すべて同じ色を使用します。
さまざまなディスプレイタイプや色覚プロファイルでテストしました。パレットは、一般的な色覚障害を持つ人にとっても、すべての色のペアが区別できるように選ばれています。アーキテクチャはコミュニケーションです。ツールが曖昧さを生み出すべきではありません。
見られているユースケース
アーキテクチャレビュー：テックリードが C4 モデルをチームと一緒に歩きます。全員が自分のスクリーンでフォローし、質問がある要素をクリックします。リードは注目がどこに集中しているかを見て、それに応じて議論を調整します。
オンボーディング：新しいエンジニアがシニアチームメイトと一緒にアーキテクチャを探索します。スライドデッキの代わりに、生きたダイアグラムを一緒に歩きます。シニアエンジニアがシステムを選択しリアルタイムで説明します。新人はクリックして見えるものについて質問します。
プランニングセッション：2つのチームが統合について議論しています。各チームには独自のプロジェクトがありますが、グローバルアーキテクチャビューを一緒に開いてシステムがどう接続するかを確認します。特定のシステムを指し示し、全員が同じものを見ながら境界について議論できます。
分散設計：バックエンドエンジニアがサービスに新しいコンポーネントを追加し、フロントエンドエンジニアが使用予定の API コンテナをレビューします。二人は同じプロジェクトにいて、異なる部分で作業し、お互いの進捗を把握しています。
はじめに
C4 ダイアグラムとグローバルアーキテクチャでのリアルタイムコラボレーションは、チーム機能をサポートするすべてのプランで利用可能です。設定は不要です——プロジェクトまたはグローバルアーキテクチャビューを開くだけで、チームメイトが同じビューを開いた瞬間にコラボレーションが有効になります。
アーキテクチャはチームの成果物です。ツールもそれを反映するようになりました。
コラボレーティブアーキテクチャが初めてですか？ホワイトボードコラボレーションの構築ストーリーをお読みいただくか、AI 駆動のアーキテクチャ発見でチームがコラボレーションできるアーキテクチャを自動生成してみてください。