技术栈.md 3.2 KB
📌 拓扑图选型
拓扑图（Topology Graph）是一种用于展示网络结构、系统架构或流程的图形化工具。在前端开发中，选择合适的库来绘制和操作拓扑图至关重要。以下是一些流行的 JavaScript 库及其简要介绍：
📈 ECharts
- 简介: 百度开源的可视化库，提供关系图、图表等丰富组件。
- 背景: 百度，国产
- 官网: https://echarts.apache.org/zh/index.html
📈 maotu-webtopo
- 简介: 基于Vue3开发的开源Web组态引擎库。
- 背景: 国产，开源
- 官网: https://mt-edit.yaolm.top/
- 仓库: https://gitee.com/yaolunmao/maotu-webtopo
📚 hightopo ⭐
闭源商用。如果有授权或能够使用这个库，这是最直接的方案
- 简介: 高性能的拓扑图绘制库，支持大规模数据渲染。
- 背景: 个人开发，国产
- 官网: http://www.hightopo.com/
- 示例: http://www.hightopo.cn/demo/electric-bling/index.html 、https://www.hightopo.com/demo/2deditor/HT-2D-Editor.html
🐜 AntV G6 ⭐⭐
社区强、文档好；布局 & 拓扑 + 交互强；可以自定义节点样式。
- 简介: 图可视化引擎，提供绘制、布局、分析、交互、动画等基础能力。
- 背景: 蚂蚁金服 AntV，国产
- 官网: https://g6.antv.antgroup.com/
- 示例: https://g6.antv.antgroup.com/examples
🔌 jsPlumb
- 简介: 强大的绘图组件，主要用于连接网页上的元素。
- 背景: 个人，国外
- 官网: https://jsplumbtoolkit.com/
- GitHub: https://github.com/jsplumb/community-edition
- 中文案例整理: https://github.com/wangduanduan/jsplumb-chinese-tutorial
- 二次封装:
🖊️ Le5le-topology ⭐⭐⭐⭐
电气 /组态 /拓扑类支持好；TypeScript 支持；易于自定义元件样式。
- 简介: 可视化在线绘图工具，基于 Canvas + TypeScript。支持拓扑图、UML、微服务架构、SCADA 等场景。
- 背景: 个人，国产
- 官网: https://le5le.com/enterprise/solution
- 仓库: GitHub
🎨 jTopo
- 简介: jTopo (Javascript Topology library) 是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。
- 背景: 个人开发，国产
- 官网: http://www.jtopo.com
- 示例: https://github.com/fivge/jTopo、https://github.com/wenyuan/jtopo_topology
WebTopo
- 简介: 基于VUE的web组态（组态，拓扑图，拓扑编辑器）
- 背景: 个人、国外
- GitHub: https://github.com/phynos/WebTopo
🌐 Vis.js
- 简介: 基于 HTML5 Canvas 的动态可视化库，支持大规模数据、交互与动态操作。
- 背景: Almende B.V，国外
- 官网: https://visjs.org/
- 示例: https://visjs.github.io/vis-network/examples/
🔗 JointJS
- 简介: 开源前端框架，支持流程图、工作流图等。商业版 Rappid 提供增强插件。
- 背景: 国外公司
- 官网: https://www.jointjs.com/
📊 D3.js
- 简介: 数据驱动文档 (Data-Driven Documents)，强大的可视化库。
- 特点: 几乎需要完全手写实现，灵活度极高。
- 官网: https://d3js.org/