1.le5le-topology：
介紹：A diagram (topology, UML) framework uses canvas and typescript. 一個用 canvas+typescript 寫的繪圖【核心庫，不依賴框架】（微服務架構圖、拓撲圖、流程圖、類圖等 ULM 圖，動畫、視頻支持）。本框架目前已經實現了拖拽、縮放、旋轉、自定義屬性等基礎操作，開發者只用關心圖表繪畫實現即可。其次，流暢、高性能 - 使用 canvas 和多個場景離屏，操作過程流暢；完全不用擔心 SVG 方式 dom 元素過多，性能高效。其三，自帶部分動畫效果，能滿足基本的需求。使用 TypeScript 語言。chrome、firefox、ie11 等瀏覽器是沒有問題的。IE9 以下版本沒有測試，僅僅是繪圖引擎，只需要支持 canvas+html5 標准即可
演示 demo：http://topology.le5le.com/
github：https://github.com/le5le-com/topology
gitee：https://gitee.com/mirrors/topology
VUE 版本：https://github.com/le5le-com/topology-vue
2.mxgraph：
介紹：開源免費，但是需要解決的問題很多，國內學習參考資料少。但是，可視化組態的實現基本都是借助於這個框架來實現的。
演示 demo：https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
mxgraph 官方文檔 API：http://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
最大的交流社區：https://forum.jgraph.com/tags/swimlane/index.html
交流社區 2：https://stackoverflow.com/questions/tagged/mxgraph
github：https://github.com/jgraph/mxgraph
效果：
3.draw.io
介紹：和 mxgraph 相比，在其基礎上加了一些東西，更加完善。但是都是出自同一家公司之手。
演示 demo：https://www.draw.io/
github:https://github.com/jgraph/drawio
社區博客：https://about.draw.io/blog/
效果：
4.HT-2D/3D
演示 demo：http://www.hightopo.com/demo/2deditor/HT-2D-Editor.html
全部 demo：http://www.hightopo.com/demos/index.html
github：圖撲軟件
社區博客：https://www.hightopo.com/blog/
效果：
5.3D 可視化樓宇管理：
介紹：3D 可視化樓宇管理系統，實時監測樓宇相關的各方面的數據。提到工業互聯網往往會涉及：物聯網、IoT、5G、數字孿生、邊緣計算、PaaS 平台、SaaS 應用、產業互聯網、互聯網 +、工業 4.0、智慧城市、智慧園區、智慧樓宇、智能制造等概念，但本文將圍繞可視化的話題，圍繞更基礎的 HTML5/WebGL/WebVR 等底層技術，我們覺得業界還沒達到智能化、平台化的成熟階段，走得太快即使是 GE Predix 也會從明星變流星，了解垂直行業需求，采集足夠多有效數據，做好實時的、穩定的、美觀的、Web 化的 2D 和 3D 數據可視化呈現，是工業互聯網需要走好的第一步。
演示 demo:http://www.hightopo.com/demo/ht-smart-building/
github：圖撲軟件
社區博客：
效果：
6、前端設計 Mqtt（訂閱、發布）時
參考：https://github.com/UsrIot/usrCloudDemo_js/blob/master/web/mqttws31.js
7.OSHMI
效果：
介紹：適用於變電站，物聯網和自動化應用的移動和雲友好型 SCADA HMI。
github:https://github.com/riclolsen/OSHMI
官網：https://oshmiopensubstationhmi.sourceforge.io/
博客：http://ricolsen1supervc.wordpress.com（被牆）
圖形參考來源 1：https://www.freepik.com/search?dates=any&format=search&page=1&query=%E5%B7%A5%E4%B8%9A&sort=popular
8.HslControls 控件庫
效果：
介紹：HslControls 是一個工業物聯網的控件庫，基於 C# 開發，配套 HslCommunication 組件可以實現工業上位機軟件的快速開發，支持常用的工業圖形化控件，快速的集成界面開發。 主要包含了按鈕，開關，進度條，信號燈，數碼管，時鍾，曲線顯示控件，儀表盤控件，管道控件，瓶子控件，餅圖控件，傳送帶控件，溫度計控件，鼓風機控件，閥門控件，電池控件等等。
開發語言：c#
github：https://github.com/dathlin/HslControlsDemo
博客：https://www.cnblogs.com/dathlin/p/7703805.html
注意：前端主要是 JavaScript 語言開發，c# 我也不懂，只是做參考，看看人家的思路啥的。
9.VUE 組態 - 支持拖動
效果：
介紹：個人基於 vue+quasar 的 web 組態，核心代碼基於 vue，quasar 僅僅是為了方便構建 github 預覽訪問如下地址：https://phynos.github.io/WebTopo/dist/spa
demo：https://phynos.github.io/WebTopo/dist/spa/
github：https://github.com/phynos/WebTopo
博客：https://phynos.github.io/WebTopo/dist/spa
感悟：當你自己一點一滴去實現每一個功能而沒有參考的時候，你才會發現和別人的差距，開源不易，很多公司基於別人的開源項目二次開發，最后研發自己的軟件，貼上自己的廣告。大多數看着很相似，但是人家就說是自己實現的，你有什么辦法呢？而且這一塊開源的非常之少，不過對於物聯網公司算是一個大的需求了，也許未來的某一天，學生坐在教室，看着 8k 屏幕上的實驗室或者科創空間的傳回來的可視化畫面和實時數據的時候，我們也會感到欣慰，致敬每一個在幕后默默付出，用行動踐行工業 4.0 的人！
————————————————
版權聲明：本文為 CSDN 博主「爾嶸」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/XU441520/article/details/103073202