ホワイトボードコラボレーション：どこからでもリアルタイムのアーキテクチャワークショップ
キャリアの初期にあった最高のアーキテクチャ議論を今でも覚えています。5人のエンジニアがホワイトボードの前にぎゅうぎゅう詰めになり、マーカーを手にボックスと矢印を描きながら、決済サービスが通知システムと直接通信すべきかどうかを議論していました。誰かがダイアグラムの半分を消して別の形に描き直すと、突然すべてがしっくりきました。
あのセッションは最高の設計を生み出しました。リアルタイムコラボレーションのエネルギー、即座のフィードバック、浮かび上がるアーキテクチャへの共同所有感——他に匹敵するものはありませんでした。
そしてリモートワークが来ました。ビデオ通話であのセッションを再現しようとしましたが、同じ感覚にはなりませんでした。一人がスクリーンを共有して描き、他の全員が受動的に見ている。あのマジックは消えていました。
今日、それを取り戻します。Archyl がリアルタイムホワイトボードコラボレーションをサポートするようになり、期待通りに動作します。
チームが作業しているのを見る
Archyl でホワイトボードを開くと、もう一人で作業しているのではありません。チームメイトが参加すると、彼らのカーソルがキャンバスに表示されます——名前が横に浮かぶ色つきの矢印です。Sarah が左上で認証フローを探索し、Marcus が右側でデータベース接続を改善しているのを見ることができます。
これは単なるギミックではありません。プレゼンス認識がコラボレーションの仕方を変えます。お互いの作業を自然に踏まないようにします。誰かが特定のエリアに集中しているのが見え、終わるのを待つか、手伝いに行けます。物理的な部屋で自然に起こる暗黙の協調がデジタルで実現されます。
誰かが要素を選択すると、その人の色でハイライトされるのが見えます。編集中のコンテナの周りに控えめなグローが現れ、名前が上に浮かびます。「ちょっと待って、それ変えてる？」という中断はもうありません——見ればわかります。
変更が即座に表示
すべてのアクションがリアルタイムで全参加者に同期されます。新しいシステムを作成すると全員のキャンバスに出現します。コンテナをドラッグして再配置すると全員に動きが見えます。説明を更新するとチーム全体でテキストが変わります。
アーキテクチャがコラボレーティブに形作られていくのを見るのは深い満足感があります。一人がハイレベルのシステムをスケッチしている間、別の人がコンテナの詳細を埋めます。誰かが外部依存関係を追加し、あなたがリレーションシップをドキュメント化します。ダイアグラムは有機的に成長し、複数の視点によって同時に形作られます。
同時編集を優雅に処理する同期インフラを構築しました。二人がまったく同じ瞬間に同じ要素を修正した場合、システムは変更をインテリジェントに調整します。実際には、カーソルのプレゼンスのおかげでこれはまれです——ダイアグラムの異なる部分で自然に作業します。
ドローイングではなく、アーキテクチャ
Miro や FigJam との違いはここにあります：作成するすべてが本当のアーキテクチャドキュメントです。
ブレインストーミング中にスケッチしたシステムは、今やC4 モデルのファーストクラスエンティティで、API でクエリ可能、ADR にリンク可能、アーキテクチャレポートで表示可能です。描いたリレーションシップは追跡、検証され、AI の分析に利用可能です。
Archyl でのコラボレーションセッションは永続的な成果物を生み出します。後で誰かが「きれいにして正式にドキュメント化する」必要がある一時的な図のスクリーンショットではありません。ドキュメントがワークショップのアウトプットです。
どう構築したか
大規模なリアルタイムコラボレーションは興味深いエンジニアリング課題です。WebSocket を検討しましたが、最終的に1秒間隔のハートビートによるポーリングベースのアプローチを選びました。運用がシンプルで、企業プロキシやロードバランサーの背後でも確実に動作し、アーキテクチャ作業には許容可能なレイテンシを提供します——ビデオゲームをプレイしているのではなく、システムを設計しているのですから。
各参加者はハートビートごとにカーソル位置と現在選択中の要素を送信します。サーバーはアクティブセッションを追跡し、慎重に選ばれた10色の識別しやすい色相パレットから色を割り当て、30秒間のインアクティビティ後に古いセッションをクリーンアップします。操作は参加者が更新をポーリングする操作ログを通じてブロードキャストされ、バージョン番号により変更の見落としがないことを保証します。
フロントエンドはサーバー状態とローカルのオプティミスティック更新のマージの複雑さを処理します。要素をドラッグすると、カーソルの下で即座に動き、変更は他の人に伝播されます。コンテンツハッシングシステムがサーバー状態がローカル状態と実際に異なるかを検出し、不要な再レンダリングや要素がジャンプする不快な体験を回避します。
リモートアーキテクチャ作業のために設計
リモートコラボレーションが自然に感じられるようにするための細部を慎重に考えました。
コラボレーターリストは左下に配置され、重なり合うスタックでアバターを表示します。5人以上が参加すると「+N 人」というインジケーターが表示されますが、経験上、最高のアーキテクチャセッションは少人数で集中的に行われます。
集中したいとき、すべてのカーソルが画面上を踊り回るのを強制的に見る必要はありません。フォーカスモードでビジュアルプレゼンスインジケーターを非表示にしながら、変更の同期は維持されます。静かに作業し、顔を上げたときに何が変わったかがわかります。
タイムゾーン認識が分散チームの協調を助けます。プレゼンスインジケーターは各コラボレーターの現地時間を表示するので、シンガポールの同僚が一日を終えようとしているのか、始めたばかりなのかがわかります。
はじめに
ホワイトボードコラボレーションはすべてのプランで利用可能です。特別なセットアップは不要です——プロジェクトのダイアグラムビューを開き、ツールバーの「コラボレート」ボタンをクリックし、セッションリンクをチームに共有するだけです。
アーキテクトを集め、ホワイトボードを開き、一緒に何かを設計しましょう。最高のアーキテクチャ決定は、どこに座っていても全員が貢献できるときに生まれます。
Archyl が初めてですか？AI 駆動のアーキテクチャ発見で既存のコードベースを自動的にマッピングし、チームを招待して一緒にアーキテクチャを洗練・進化させる方法をご覧ください。