C4エレメントを、すべてゼロから再デザインしました
アーキテクチャダイアグラムには仕事があります:システムの真実を、コードを読むより速く伝えること。ほとんどのダイアグラムはそれをしません。12サービスのスタートアップを見ていても、600サービスのエンタープライズを見ていても、見た目は同じ。同じ汎用的な青い長方形。同じ線。階層なし。ストーリーなし。
この一週間、私たちはArchylのcanvasを完全に解体し、組み直しました。すべてのnode、すべてのedge、背景の1ピクセルまで。本日のリリースはその結果です。
今ログインすれば、ダイアグラムは別のプロダクトのように見えるはずです。
何が問題だったか
以前のnodeは汎用的な青の洪水でした。重いborder、ソフトなフロステッド背景、過剰なshadow — 2022年には正しく見えて、いまでは陳腐に感じる「テクニカルモダン」の典型。
それ以上に重要なのは、視覚的に 何も語っていなかった こと。System(Level 1、「アーキテクチャそのもの」)が、Component(Level 3、「内部のクラス」)とまったく同じに見える。databaseのcontainerと、workerのcontainerが同じに見える。C4モデルの4つのレベル — System Context → Container → Component → Code — が、青い長方形の区別のない一枚の層に押し潰されていました。
edgeは方向感のないフラットなスレート色の線。canvasはフラットな背景の上のドットグリッド。selectionはほぼ視認できない。nodeをクリックしても... 何も変わらない。
ダイアグラムは 正しかった。でも 読めなかった。
新しいビジュアルシステム
レベルごと、タイプごとのカラー
すべてのC4レベルが、それぞれのvisual weightを持つようになりました:
- System (Level 1) はブランドアイデンティティをまとう — カードの上端に沿った細いindigo→fuchsiaのグラデーションstripe。Archylの他の場所と同じ色。Peopleバリアントは温かいamberグラデーション。External systemsはグラファイト。
- Container (Level 2) はサブタイプ化されています。databaseとcacheはemerald。message queueはamber。file storageとserverless functionはcyan。Webアプリはindigo。モバイルとデスクトップアプリはviolet。上端のアクセントstripが、labelを読む前にcontainerが 何であるか を伝えます。
- Component (Level 3) は意図的に控えめ — 微かなindigoアクセントのみ、小さめのカード、小さめのアイコン。ComponentはContainerの 中 に住む存在で、視覚的に競合してはいけません。
100ノードのボードが、低ズームではゾーンとして読めるようになりました:緑のクラスタはストレージ、amberのクラスタは非同期、indigoのクラスタはコード。labelを1つも読まずに、色でナビゲートできます。
よりクリーンなサーフェス
Out:重いフロステッドルック、ぶ厚いborder、グラデーションと呼ぶには弱すぎたデュアルブルーのグラデーション。
In:
- ヘアラインのborderと、上端に沿った1ピクセルだけ明るいライン — LinearやStripeのカードにプレミアム感を与える「上から照らされた」トリック。カードが、半透明の板を重ねたものではなく、本物の素材でできているように見えます。
- レベル別アクセントカラーで色付けされた方向性のあるドロップシャドウ。各レベルがカード下に独自のアンビエントグローを持ちます。形は同じ、しかし atmosphere が違う — databaseカードはほのかなemeraldのクッションの上に、queueカードは温かいamberの上に座ります。
- 本物のタイポグラフィヒエラルキー。タイトルにはweightを、descriptionは控えめなグレーへと一歩引き、type labelはテクニカルな明瞭さのためにスモールキャップスを使い、technologyアイコンはその下に整然と並びます。「これがより重要」と伝えるためにサイズに頼ることはもうありません。
Badgeの再編成
以前のデザインでは最大8つの異なるbadge — insights、ADRs、docs、API contracts、コメント、external、org-linked、time-travel — が各カードの周囲に浮いていました。密なダイアグラムでは、カードが包囲されているように見えました。
Insightsは左上に残ります。これらはアラートで、アクション可能なもの。フローティングの位置を勝ち取っています。
それ以外はすべて、カード下端のインラインメタデータstripに集約されました:📚 5 · 📄 3 · 🔌 2 · 💬 8。各pillはクリックすればフルのpopoverに展開します。カード本体がふたたび呼吸するようになりました。
方向を示すedge
resting状態:細いニュートラルな線、ブランドカラーで色付けされ、線全体に沿ってゆっくり穏やかなモーション — 短いマークがsourceからtargetへドリフト。控えめだが絶え間ない。インタラクションしていないときでもcanvasは生きているように感じます。重要なのは、ページ上の他の何かが更新されてもモーションは止まらず、再起動もしないこと — リレーションシップが画面に表示されたら、そのまま永遠にドリフトし続けます。
3種類のラインスタイルがいま、正しく流れます:
- Solid — クリーンで連続した線、モーションなし。Solidを選んだ?Solidのまま。
- Dashed — 等間隔の中サイズのセグメントが、落ち着いた読みやすいペースでドリフト。
- Dotted — 詰まった丸いドットが、およそ2倍の速度でドリフト。一目で、dotted edgeがdashedよりも視覚的に「軽い」と感じられます。
hoverまたはselectionで、線はedgeの方向に沿ったブランドグラデーション(indigo → violet → fuchsia)へとアップグレードされます。上から下のリレーションシップは垂直のグラデーション、左から右のリレーションシップは水平のグラデーション。アクティブなedgeの下にはソフトなブランドカラーのグローが敷かれます。ドリフトはその下で途切れることなく続きます。
矢印マーカーは細身のシェブロンで、アクティブなグラデーションの終点の色を拾います。edge labelは自己完結したカードになり、technologyはサイドに浮かぶ独立したblobではなく、丸いborderの 内側 に住むようになりました。アクティブ状態ではlabelの左端にブランドグラデーションのスライバが追加され、descriptionの色がindigoへとシフトします。
フォーカスモード
任意のnodeをクリック。短い間を置いて、canvasの残りはフェードバック — nodeはほぼ透明になり、edgeはほとんど消えます。クリックされたnodeとその直接の隣接nodeだけがビビッドなまま残ります。接続するedgeは流れ続けます。選択されたnodeはレイヤー化されたhaloをまといます — クリスプなブランドカラーのリング、ソフトな外側のグロー、強められたアンビエントブルーム — すべて node自身のアクセントカラー で染まります。フォーカスされたdatabaseはemeraldに光ります。フォーカスされたqueueはamberに。フォーカスされたsystemはindigoに。
その短い間は意図的です:続けてダブルクリックすればフォーカスはキックインする前にキャンセルされ、次のC4レベルへのドリルダウンがディムフラッシュに邪魔されずに動きます。
空のcanvasをクリック、Escapeを押す、または他のnodeをクリックすればフォーカスは解除されます。
結果は、最大の「このダイアグラムは私に語りかけている」アップグレード。何が何に接続されているか分からなかった100ノードのボードが、ワンクリックでそれに答えるボードへ。
Atmosphere
canvas自体はもうフラットではありません。ドットグリッドの背後で、ソフトな色のプールがサーフェス上をドリフト — 上にindigo、コーナーに向かってfuchsia、下に深いindigo — どれも装飾ではなくatmosphereとして読めるように、とても薄く保たれています。プロダクトの他の部分と同じアイデンティティ。ドットグリッド自体も汎用スレートではなくブランドカラーで色付けされています。
MiniMapとControlsもそれに合わせて作り直しました — ブランドサーフェス、ヘアラインborder、ブランドアンビエントシャドウ、アクセントカラー付きのnodeカラー。MiniMapはメインcanvasと同じパレットを使うので、鳥瞰ビューがダイアグラム自体と同じストーリーを語ります。
接続ハンドルはhoverでブランドindigoに光り、これから引こうとしているリレーションシップカラーをプレビューするソフトなhaloをまといます。
パフォーマンス
ついでに、ダイアグラムを目に見えてキビキビ動くようにしました:
- node単位のアニメーションエンジンを撤去。スケールでの最大の隠れたコストでした — どのカードも、resting状態でさえ自分自身のモーションの帳簿付けをしていました。Opacityの変更はいまや単一の軽量なtransitionに乗ります。
- shadowを軽く。ファーストパスのアンビエントグローは寛大で高価なblurでした。リフトされた感じを保ちながら、サイズをおよそ3分の2に絞りました。
- カードはもう、自分専用のGPUレイヤーに常駐しません。そのヒントは、実際のインタラクション中だけ発火するようになりました — 静止しているnodeに焼き込まれることはもうありません。
- transitionを、変化するプロパティ — 動きとshadow — だけに正確に絞りました。ブラウザに「念のため」すべてのプロパティを考慮させるのではなく。
reduced-motionの設定はすべての場所で尊重されます — edgeのrestingフロー、フォーカスモードのフェード、ドリフトモーションは、OSがその設定を報告するとすべてオフになります。
試してみる
Archylにサインインし、任意のプロジェクトを開いて、systemまたはcontainerを選んでください。新しいダイアグラムは無料プランを含むすべてのプランにロールアウトされています — マイグレーションは不要、トグルもありません。
特に誇りに思っている(あるいは特にうんざりしている)ダイアグラムがあれば、今週は共有するのにいい週です。アーキテクチャマップがVisioのエクスポートではなく、本物のartefactのように感じられるようにしたかったから、canvasを作り直しました。タグしてください — みなさんのマップがいまどう見えるか、見たいです。