聚丰祥软件园 · 网络拓扑图设计工具源码
聚丰祥软件园网络拓扑图设计工具源码
刚做的 HTML 版的，附源码。
一款面向园区网络场景的单文件 Web 工具，双击打开即可使用，无需安装、无需联网、不依赖任何第三方库；工程数据自动保存在本机浏览器，随手关闭也不丢。以下从使用角度介绍它的功能特点。
一、设备库与素材
-
内置 19 种常见网络设备，覆盖三个分类：
-
网络与安全：互联网/外网、光猫 ONU、路由器、防火墙、核心交换机、接入交换机、无线 AP；
-
服务器与存储：服务器、NAS 存储、UPS 电源；
-
终端设备：台式电脑、一体机、笔记本、手机、平板、打印机、网络摄像头、IP 电话、大屏显示器。
-
-
设备库支持关键词搜索，设备多时也能快速定位。
-
添加设备有两种方式：直接拖拽到画布任意位置，或双击图标放到画布中央。
-
每台设备自带型号与接口数参考值，添加后可在属性面板按实际设备修改。
二、绘制与连线
-
两种连线方式：鼠标悬停设备后从边缘蓝色圆点拖到目标设备；或按
L进入连线模式，依次点击两台设备建立链路。 -
链路支持正交折线、直线、平滑曲线三种走线风格，可全局切换。
-
链路可标注接口/描述标签与带宽（100M / 1G / 10G / 无线），并可选显示/隐藏标签。
-
链路两端端口可设为“自动”，也可手动指定上/右/下/左，方便整理复杂走线。
-
防止重复连线：同一对设备之间已存在链路时会给出提示。
三、选择与编辑效率
-
画布空白处拖动框选，
Shift+ 点击增减选中，Ctrl + A全选。 -
拖动设备时自动显示对齐参考线并吸附网格，多台设备可整体拖动。
-
多选后提供六种对齐（左/水平居中/右/顶/垂直居中/底）与水平、垂直等距分布。
-
完整撤销 / 重做（最多 80 步），误操作可随时回退。
-
复制、粘贴、再制（
Ctrl + C/V/D），方向键微调位置，Shift+ 方向键大步移动。 -
选中后按
Delete删除；右键菜单还提供“断开该设备的所有链路”“以此设备为中心自动布局”等快捷操作。 -
自动布局：以选中设备（未选中时以连接数最多的设备）为根，按连接层级逐层排列，支持纵向、横向两种方向，一键整理杂乱图面。
四、属性与外观
-
右侧属性面板随选中对象自动切换，分三类：
-
设备：名称、类型、IP、接口数、MAC、型号厂商、运行状态、延迟、备注；
-
链路：两端端口、链路标签、带宽、当前链路状态；
-
画布：图纸标题、连线样式、网格显示、网格吸附、流量动画、链路标签开关。
-
-
支持单台设备独立换外观（不影响同类型其他设备）：更换图标、切换小/标准/大三种显示尺寸、设置强调色、隐藏 IP 地址，并提供常用配色快捷色板。
五、自定义设备类型
-
点顶部“自定义设备”或设备库底部“＋ 新建”，即可创建自己的设备类型。
-
可自定义：名称、所属分类（可新建分类）、默认型号、默认接口数。
-
图标三种来源任选：
-
内置图标中挑一个作为基础；
-
表情 / 文字（如 🖥️、📦、门禁等，可配底色）；
-
上传自己的 SVG 文件（会自动清理脚本与外链，只保留图形，安全可用）。
-
-
创建后与内置设备一样出现在设备库，可拖入画布、连线、改 IP、设状态。
-
支持对自定义设备编辑、复制、删除；删除时画布上已有设备会自动回退为默认外观，不会破坏图纸。
-
自定义设备类型会随工程一起导出，换台电脑导入后照常使用。
六、状态监控演示
-
开启“实时监控”后，设备状态与延迟会动态模拟变化，链路流量呈现流动动画。
-
四种状态一目了然：在线（绿）/ 告警（橙）/ 离线（红）/ 未知（灰），离线链路显示为虚线断点。
-
也可以手动为单台或批量设备指定状态，适合做汇报用的“故障场景图”。
七、导出与交付
-
导出 PNG：2 倍高清，适合插入 PPT、文档、群聊分享。
-
导出 SVG：矢量图，放大不失真；导出时图标已内联处理，在常见看图软件与办公软件中都能正常显示。
-
导出 PDF：单页文档，可选“贴合内容尺寸”（推荐）或“A4 纸张并自动横竖、居中缩放”，清晰度可选 2 倍或 3 倍；图像以无损方式嵌入，可直接打印、归档或插入文档。
-
工程 JSON 导出 / 导入：随时保存工程文件，换设备、换浏览器可继续编辑。
-
导出图片与 PDF 时，图纸左上角自动带上标题、右上角带上导出日期与“聚丰祥软件园”署名，交付更正式。
八、视图与界面
-
滚轮缩放、空格或鼠标中键拖动平移，缩放比例实时显示，
Ctrl + 0一键适应画布。 -
一键自动布局、一键适应画布，图面再多也能快速归位。
-
支持浅色 / 深色主题切换，主题偏好会记住。
-
底部状态栏实时统计设备数、链路数与在线/告警/离线数量；左下角常驻状态图例。
-
内置帮助面板，把快捷键和操作要点列全，新同事拿到就能上手。
整体评价：这套工具把“画拓扑、连链路、标属性、看状态、导图纸、存工程”整条链路都收进了一个 HTML 文件里，不用装客户端、不用连内网服务器，拖拖拽拽就能产出一张可用于汇报和归档的园区网络拓扑图，日常运维记录和设备台账也顺手能维护。
