需手动引入kubernetes官方图标库并遵循c4模型分层构建:先启用cdn.jsdelivr.net/gh/jgraph/mxgraph@master/javascript/examples/grapheditor/www/images/k8s/图标库,再分control plane与worker nodes区域布局组件,最后用正交连线标注通信关系并导出svg。

如果您希望在draw.io中准确呈现Kubernetes集群的拓扑结构,但缺乏标准化组件或布局逻辑,则可能是由于未正确加载K8s图标库或未遵循云原生架构分层原则。以下是解决此问题的步骤:
一、启用Kubernetes官方图标库
draw.io原生不内置Kubernetes组件图标,需手动引入外部图标集以确保语义准确性和视觉一致性。启用后可直接拖拽使用标准Pod、Node、Service等图形元素。
1、打开draw.io(在线版或桌面版),新建空白图表。
2、点击菜单栏【排列】→【插入】→【高级】→【图标库】。
3、在弹出窗口中粘贴以下URL并点击【添加】:https://cdn.jsdelivr.net/gh/jgraph/mxgraph@master/javascript/examples/grapheditor/www/images/k8s/。
4、刷新图库面板,确认出现“Kubernetes”分类,内含kube-apiserver、etcd、Pod、Node等SVG图标。
二、使用C4模型分层构建拓扑结构
C4模型提供上下文、容器、组件三级抽象,适配Kubernetes控制平面与工作节点的分离特性,避免将所有元素平铺导致逻辑混乱。
1、创建画布顶层区域,用矩形框标注【Kubernetes集群】,设置浅灰背景色与粗边框。
2、在框内左侧绘制控制平面区域,添加带阴影的圆角矩形,标签为Control Plane。
3、在框内右侧绘制工作节点区域,添加相同样式的矩形,标签为Worker Nodes。
4、从图标库分别拖入kube-apiserver、etcd、kube-scheduler、kube-controller-manager图标至控制平面区,并用正交连线标注“gRPC”或“HTTP”通信协议。
5、在工作节点区拖入Node图标,右键编辑其标签为Node (v1.28),再在其内部嵌套Pod图标并标注应用名称如“nginx-deployment”。
三、配置自动布局与连接关系
手动对齐和连线易导致拓扑失真,启用draw.io内置布局引擎可强制维持组件层级关系与流向一致性。
1、选中全部控制平面组件,右键选择【布局】→【垂直布局】→【自上而下】。
2、选中全部工作节点及所属Pod,右键选择【布局】→【水平布局】→【从左到右】。
3、使用【连接线工具】,从kube-apiserver图标拖出箭头至etcd图标,双击连接线,在弹出编辑框中输入文本Stores cluster state。
4、从kube-scheduler拖出箭头至任意Node图标,编辑连接线文本为Assigns Pods to Nodes。
5、右键画布空白处,选择【格式面板】→【连接线】→勾选【正交边缘样式】与【自动调整大小】。
四、导出符合CI/CD文档规范的矢量图
Kubernetes架构图常需嵌入Markdown文档或Confluence页面,导出为SVG格式可保留缩放清晰度与可编辑性,且支持Git版本控制。
1、点击菜单栏【文件】→【导出为】→【SVG】。
2、在导出设置中取消勾选【嵌入图像】,确保所有图标为纯矢量路径。
3、勾选【导出背景】,设置背景色为白色以适配多数文档主题。
4、在【文件名】中输入k8s-cluster-topology.svg,点击【导出】。
5、将生成的SVG文件提交至代码仓库docs/assets/目录下,路径需与文档中引用路径一致。











