从左侧图标库拖入节点，鼠标拖动移位，双击修改标签，所有操作即时响应。
按 E 切换连线模式，在节点上拖拽即可连线。支持曲线 / 直线 / 折线，可配置箭头样式、线宽、颜色、虚线。
内置 HIS、EMR、LIS、PACS、CDSS、OR、ICU 等 30+ 医院 IS 缩写图标，以及医生、患者、显微镜、WSI 扫描仪等医疗场景图标。
防火墙、交换机、路由器、负载均衡、WAF、VPN、K8s、Docker、etcd 等 50+ 图标覆盖常见网络架构场景。
按 Z 绘制区域框，支持命名、配色、透明度调整，可上下移层，适合标注安全域、网段分区。
框选或 Shift 点击多选节点，支持行对齐（Y轴）、列对齐（X轴）、水平 / 垂直均布，方向键微调位置。
导出整图为 4x 高清 PNG（可选 2x/3x/4x），或导出矢量 SVG、结构化 JSON。JSON 可导入继续编辑。
按 G 开启网格，拖拽自动吸附，可调整网格间距。方向键步长跟随网格大小。
60 步操作历史，Ctrl+Z 撤销，Ctrl+Y 重做。每次操作自动存入 localStorage 草稿。
编辑器自动将画布数据以 JSON 格式保存到浏览器 localStorage（key: topology_v1），
同时可通过工具栏 JSON 按钮导出文件，导入按钮重新加载。
{
"nodes": [
{
"id": "n_abc123", // 节点唯一 ID
"x": 120, "y": 80, // 画布坐标（中心点）
"icon": "his", // 图标名称
"label": "HIS系统", // 显示标签
"color": "#3b82f6", // 颜色（hex）
"size": 27 // 节点半径（px）
}
],
"edges": [
{
"id": "e_xyz",
"src": "n_abc123", "dst": "n_def456", // 源/目标节点 ID
"srcAnchor": "e", "dstAnchor": "w", // 锚点方向：n/ne/e/se/s/sw/w/nw/c
"color": "#475569", "width": 1.5,
"dash": "solid", // solid / dashed / dotted / longdash
"lineType": "curve", // curve / straight / ortho
"startArrow": "none", "endArrow": "arrow", // none / arrow / open / circle / diamond
"label": ""
}
],
"zones": [
{
"id": "z1",
"x": 20, "y": 20, "w": 300, "h": 200, // 左上角坐标及宽高
"label": "业务服务器区",
"color": "#3b82f6",
"op": 0.07 // 填充透明度
}
]
}