draw.io绘制系统架构图有五种可落地方法：一、分层架构模板法；二、容器+组件+关系三要素建模法；三、c4 model结构化绘图法；四、json反向生成法；五、企业级图标库统一视觉法。
如果您需要使用 draw.io 绘制系统架构图，但对组件布局、分层逻辑或图标规范不熟悉，则可能无法准确表达系统边界、模块职责与依赖关系。以下是多种可直接落地的绘制方法：
一、采用分层架构模板法
该方法基于经典四层模型（展现层、应用层、服务层、数据层），利用 draw.io 内置模板快速构建结构清晰、语义明确的架构视图，避免自由绘图导致的层级混淆与职责错位。
1、打开 draw.io 网站或桌面版，点击“新建空白图表”。
2、在左侧形状面板中展开“Software”类别，拖入“Layered Architecture”模板到画布。
3、双击各层文本框，将默认名称替换为实际层级标识，例如将“Presentation”改为Web Portal & Mobile App，将“Data”改为PostgreSQL + Redis Cache。
4、从“AWS”或“Azure”图标库中拖入对应组件图标（如 EC2、API Gateway、RDS），放置于对应层级内部，并用正交连接线标注调用方向。
二、使用容器+组件+关系三要素建模法
该方法严格遵循 ISO/IEC 42010 定义的架构本质——组件及其关系，通过显式声明容器边界、内部组件与跨容器依赖，确保架构图具备可验证性与技术中立性。
1、从“General”形状库中拖入一个矩形作为系统容器，右键选择“Edit Style”，添加样式代码 rounded=0;fillColor=#f5f5f5;strokeColor=#666; 以呈现标准容器外观。
2、在容器内拖入多个圆角矩形代表子系统组件，分别标注为Auth Service、Order API、Notification Engine。
3、从“Arrows”库中选取带标签的正交箭头，在组件间绘制依赖线，双击箭头输入协议类型，例如标注为HTTPS / REST 或 AMQP / Event。
4、在容器外添加独立数据存储图标（如从“Databases”库拖入 PostgreSQL 图标），用虚线箭头连接至对应服务，旁注Read-Only Replica 或 Write Primary。
三、导入 C4 Model 结构化绘图法
该方法复用 C4 模型（System、Container、Component、Code）的抽象层级，借助 draw.io 的 C4 插件或预设样式，实现业务语义与技术实现的双向对齐，防止架构图沦为纯UI草图。
1、访问 draw.io 菜单栏“排列 → 插件 → 浏览”，搜索并启用C4 Model插件（需联网）。
2、点击工具栏“C4”按钮，选择“Add System Context Diagram”，自动生成包含用户、外部系统与目标系统的三元关系图。
3、双击目标系统形状，选择“Drill down to Container diagram”，进入下一层级，系统自动创建 Web App、Backend API、Database 等标准容器。
4、对每个容器右键选择“Edit Containers”，在弹出面板中勾选“Show components”，然后手动添加关键内部组件，如JWT Validator、Payment Adapter，并设置其技术栈标签（Java/Spring Boot、Python/Django）。
四、基于 JSON 架构描述反向生成法
该方法适用于已有结构化架构定义的团队，通过将 JSON 格式的组件清单导入 draw.io，一键生成符合命名规范、连接逻辑与视觉权重的初始架构图，大幅缩短手工排版时间。
1、准备标准格式 JSON 文件，包含 system.name、containers[].name、containers[].technology、relationships[].source、relationships[].target、relationships[].interaction 等字段。
2、在 draw.io 中选择“文件 → 导入 → 从文本导入”，粘贴 JSON 内容或上传文件。
3、在导入设置中启用Auto-layout using C4 layout engine选项，确认后自动生成带分组容器与带标签连接线的图表。
4、选中任意组件形状，右键“编辑样式”，追加gradientColor=#e0e0e0;shadow=1;提升视觉层次感。
五、复用企业级图标库统一视觉法
该方法通过绑定权威图标集（如 AWS、Azure、Google Cloud、Kubernetes 官方 SVG 库），确保所有基础设施与平台服务图标符合行业共识，消除因自绘图标引发的理解歧义与评审阻力。
1、点击 draw.io 左侧形状面板底部“更多形状”，勾选“AWS Cloud Architecture Icons”、“Azure Architecture Icons”及“Kubernetes”三项。
2、刷新形状库，展开对应分类，拖入Amazon API Gateway、Azure Kubernetes Service、K8s Deployment等标准化图标。
3、右键图标选择“编辑图像”，将 URL 替换为企业私有 CDN 地址（如 https://icons.yourcorp.com/aws/ec2.svg），实现图标源可控。
4、全选所有云服务图标，点击顶部菜单“排列 → 样式 → 填充颜色”，统一设置为#ffffff，边框色设为#333333，确保打印与投影场景下清晰可辨。
