部署图:编辑式图表与布局语法指南

定位软件制品实际运行的环境。

何时选择这种图表

定位软件制品实际运行的环境。 当这正是读者需要回答的问题时,适合选择此语法。先确定范围和受众,再增加细节;如果真正关心的是归属、时序或数量,应先与目录中相邻的图表类型比较。

如何组织布局

将组件放入实际承载它的主机或集群;区分地域、信任边界与副本。

输入中需要准备什么

列出环境、可部署服务、基础设施与网络连接,区分副本数量和独立业务职责。 输入应具体,分享前对照这些事实审核生成结果。

Diagram Design 的六项编辑原则与几何规则

4px 网格规则
节点坐标、宽高和圆角使用四的整数倍。共享网格让各层对齐、标签留白可预测,也让手动微调继续保持一致。
正交连线与 r=8 圆角
架构和流程图中,不共轴的连接采用横竖线段与 8px 圆角,避免箭头穿过标签。桑基图、极坐标图等定量图形保留数据表达必需的曲线。
单一强调色视觉焦点
用主要决策、集成点或瓶颈确定视觉重点,将珊瑚色留给这个故事,其余组件保持克制。移除颜色后,标签和形状仍应保留含义。
五种语义颜色变量
--paper 表示画布,--ink 表示正文,--muted 表示注释,--soft 表示轻边界,--accent 表示重点。更换品牌配色时,各自的语义职责保持稳定。
Instrument Serif + Geist 字体系统
编辑式标题使用 Instrument Serif,组件名称使用 Geist,技术注释使用 Geist Mono。通过文字职责区分故事与实现细节,无需增加装饰。
WCAG AA 品牌配色提取
输入公开品牌网址,提取五种语义颜色。提取器检查主文字 ink 与画布 paper 的对比度是否至少为 4.5:1,不足时修正这对颜色;整张图的可访问性仍需单独检查。