轻量级网络拓扑图工具：SVG 画出来的 Visio 体验

轻量级网络拓扑图工具：SVG 画出来的 Visio 体验

【免费下载链接】topologyhtml5 network topology, base on SVG.项目地址: https://gitcode.com/gh_mirrors/to/topology

还在用截图加手绘的方式交付网络架构？Topology 把网络拓扑图变成了纯浏览器里的 SVG 画布，轻量级网络拓扑工具，打开网页就能画。

一句话讲清它是什么

Topology 是一套基于 HTML5 的网络拓扑图方案，图形全部用 SVG 渲染，外加一组 UI 套件。说白了，它把"画架构图"这件事从 Office 里搬进了浏览器，不装任何插件。

它能帮你干什么

• 网络规划设计：拖入路由、交换机、服务器图标，连好连线就是一张可交互的架构草图。
• 故障排查：在大画布上放大某个区域，鹰眼导航条随时切回全局视角。
• 文档汇报：一张图画完直接导出 PNG/JPG 贴进 PPT，不用再来回截图。
• 教学演示：课堂上边讲边改拓扑结构，所见即所得。

技术层面值得关注的点

• SVG 矢量化：画布是纯矢量渲染，放大多少倍线路和标签都不糊。
• 类 Visio 编辑：所见即所得，快捷键齐全，右下角有鹰眼小窗做导航。
• 多格式导出：PNG、JPG 位图直接导出；PDF 矢量导出需要服务端 Java 配合。
• 精简内核：仓库里只保留了富客户端核心，核心渲染在 js/topology.min.js，main.html 就是入口页面。

上手前你需要知道的事

• 项目 2013 年起步，仓库里是刻意裁剪过的示例版，代码全部是压缩后的 min.js，没有构建脚本，想读原理得读压缩源码。
• 浏览器要求：Chrome 45+、Firefox 43+ 推荐；IE 全系不支持，官方明确不推荐。
• GPL v2 协议，商用集成前注意评估传染性；撤销重做、移动端适配还挂在 TODO 清单里，社区活跃度不高。

下一步

本地跑起来只需两步：克隆仓库后直接打开根目录的 main.html，选名为 blank 的视图就能开始画：

git clone https://gitcode.com/gh_mirrors/to/topology

【免费下载链接】topologyhtml5 network topology, base on SVG.项目地址: https://gitcode.com/gh_mirrors/to/topology