我们从零重做了每一个 C4 元素

架构图只有一个工作:比读代码更快地告诉你系统的真相。大多数图做不到这件事。无论你盯着的是一个 12 服务的初创公司,还是一个 600 服务的大型企业,它们看起来都一样。同样的通用蓝色矩形。同样的连线。没有层次。没有故事。

过去一周我们把 Archyl 的画布拆掉,重新装回来。每一个 node、每一条 edge、背景上的每一个像素。今天发布的就是结果。

如果你现在登录,这张图看起来像是另一个产品。

之前哪里不对

之前的 node 是一片通用蓝色。粗边框、磨砂背景、过大的阴影 — 那种 2022 年看着很对、现在看着很 generic 的"技术现代风"。

更重要的是,它们在视觉上 什么也没说。一个 System(Level 1,"整个架构")看起来和一个 Component(Level 3,"某个内部类")一模一样。一个数据库 container 和一个 worker container 看起来也一样。C4 模型的四个层级 — System Context → Container → Component → Code — 被压成了一层没有区别的蓝色矩形。

Edge 是平的板岩色细线,没有方向感。画布是平面背景上的点阵网格。选中状态几乎看不出来。点一个 node 然后……什么都没变。

图是正确的。但它不可读。

全新的视觉系统

按层级、按类型上色

每个 C4 层级现在都有自己的视觉权重:

System(Level 1) 承担品牌身份 — 卡片顶边一条细的靛蓝到品红渐变 stripe,跟 Archyl 其他地方用的颜色一致。People 变体用暖琥珀色渐变。External system 走石墨色。
Container(Level 2) 进一步按子类型上色。数据库和缓存是翡翠绿。消息队列是琥珀色。文件存储和 serverless 函数是青色。Web 应用是靛蓝。Mobile 和 desktop 应用是紫色。顶边的 accent stripe 在你读 label 之前就告诉你这个 container 是什么。
Component(Level 3) 故意压低存在感 — 只有一抹细微的靛蓝点缀,卡片更小,图标更小。Component 住在 container 里面,不应该在视觉上抢戏。

一张 100 个 node 的图,现在低 zoom 下读起来就是一片片色块:绿色聚集 = 存储,琥珀色聚集 = 异步,靛蓝色聚集 = 代码。一个 label 都不用读,就能靠颜色导航。

更干净的表面

去掉:厚重的磨砂感、粗边框、那种几乎称不上渐变的双蓝色渐变。

加入:

一道发丝般的边框,顶边只有一行明亮像素 — Linear 和 Stripe 的卡片那种"自上方打光"的小把戏,让卡片有质感。卡片看起来像是真实材料做的,而不是几层半透明板子叠起来。
带方向的投影,被该层级的 accent 颜色染色。每个层级在卡片下都有自己的环境光。形状一样,但氛围不同 — 数据库卡片坐在淡淡的翡翠绿垫子上,队列卡片坐在暖琥珀色垫子上。
真正的字体层次。标题有重量,描述退到柔和的灰色,类型 label 用 small caps 提供技术上的清晰感,技术图标在下方整齐排列。再也不用单靠字号来表达"这个更重要"。

Badge,重新整理

之前的设计在每张卡片周围浮着最多八个不同的 badge — insight、ADR、文档、API 合约、评论、external、组织关联、time-travel。在密集的图上,卡片像是被围攻一样。

Insight 留在左上角。它们是告警 — 可操作的。它们配得上那个浮动位置。

其他全部收进卡片底部的一条 inline 元数据条:📚 5 · 📄 3 · 🔌 2 · 💬 8。每个 pill 点击后还是会展开成完整的 popover。卡片本体重新有了呼吸空间。

显示方向的 edge

静止状态:一条细中性线,带有品牌色调,沿全长有缓慢、温和的运动 — 短小的标记从源头漂向目标。微妙但持续。即使你没有交互,画布也是有生命的。关键是:当页面上别的东西更新时,这种运动不会停下或重来 — 一旦关系线出现在屏幕上,它会一直漂下去。

三种线型现在都正确流动:

Solid — 干净、连续的线,无运动。选了 solid?就保持 solid。
Dashed — 均匀的中等间距段,以平静、可读的速度漂移。
Dotted — 更紧凑的圆点,以大约两倍的速度漂移,这样一条 dotted edge 即使一眼扫过,也明显比 dashed 更"轻"。

Hover 或选中会把线升级为品牌渐变(靛蓝 → 紫色 → 品红),沿 edge 方向取向 — 所以从上到下的关系是垂直渐变,从左到右的关系是水平渐变。激活的 edge 下方还有一层柔和的品牌色光晕。底下的漂移继续,毫无中断。

箭头标记换成了更纤细的 chevron,会沾上激活渐变的末端色。Edge label 变成了一个独立的卡片,技术信息住在圆角边框里面,而不是像之前那样作为一个脱离的色块漂在旁边。激活态会在 label 左边加一道品牌渐变细条,把描述文字色切成靛蓝。

Focus 模式

点任何一个 node。短暂停顿后,画布的其余部分会淡出 — node 变得几乎透明,edge 几乎消失。只有被点的 node 和它的直接邻居保持鲜亮。连接的 edge 继续流动。被选中的 node 会获得一个分层的 halo — 一道清晰的品牌色环、一层柔和的外发光、还有一圈被强化的环境光晕 — 全部按 这个 node 自己的 accent 色 染色。聚焦的数据库发翡翠绿光。聚焦的队列发琥珀色光。聚焦的 system 发靛蓝光。

那个短暂停顿是故意的:跟一次双击会在 focus 生效之前取消它,这样钻进下一层 C4 仍然好用,不会被淡出闪一下打断。

点空白画布、按 Escape、或者点任何其他 node,都可以清掉 focus。

结果是这次升级里"这张图终于在跟我说话"感最强的一项。一张 100 个 node 的图,以前你根本看不出谁连着谁,现在一次点击就能给你答案。

氛围

画布本身也不再是平的了。在点阵网格背后,柔和的色块在表面上漂移 — 顶部靛蓝、靠近角落是品红、底部是更深的靛蓝 — 全部压得很淡,作为氛围而不是装饰。和产品其他部分同一身份。点阵网格本身现在也是品牌色调,而不是通用的板岩色。

MiniMap 和 Controls 重做以匹配 — 品牌化表面、发丝边框、品牌环境光阴影、accent 色调的 node 颜色。MiniMap 现在用的是和主画布相同的色板,所以鸟瞰视图讲的故事和图本身一致。

连接 handle 在 hover 时会发出品牌靛蓝光,带柔和的光晕预览你即将画出的关系线颜色。

性能

我们顺手也让图明显更快了:

每个 node 自己的动画引擎被干掉了。它是规模化下最大的隐藏成本 — 每张卡片即使在静止时也在维护自己的运动 bookkeeping。透明度变化现在走的是单一、轻量的 transition。
阴影更轻。第一版的环境光是慷慨而昂贵的模糊;我们把它收紧到大约三分之二的尺寸,同时保留卡片浮起来的感觉。
卡片不再永久占着自己的 GPU 层。这个 hint 现在只在真正交互期间触发,而不是连静止的 node 都给烤进去。
我们把 transition 收窄到刚好会变化的属性 — 移动和阴影 — 而不是让浏览器为"以防万一"考虑每一个属性。

Reduced-motion 偏好在所有地方都被尊重 — edge 的静止流动、focus 模式的淡出、漂移运动,在操作系统报告该偏好时全部关闭。

试一下

如果你有一张特别得意(或者特别不想看)的图,这周是分享它的好时机。我们重做画布是因为我们想让架构图感觉像一件真正的工艺品,而不是 Visio 的导出。Tag 我们 — 我们想看看你的图现在长什么样。

→ archyl.com