整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
層網(wǎng)絡模型又稱“OSI模型”，它是一個七層、抽象的模型體，它將計算機網(wǎng)絡體系結(jié)構(gòu)劃分為七層,每層都可以供抽象良好的接口。不僅包括一系列抽象的術(shù)語或概念，七層網(wǎng)絡模型（物理層、數(shù)據(jù)鏈路層、網(wǎng)絡層、傳輸層、會話層、表示層和應用層）中包括具體的協(xié)議。
七層網(wǎng)絡模型簡化了相關(guān)的網(wǎng)絡操作，提供了不同廠商之間的兼容性，下層為上層提供服務，各層之間獨立工作，不會影響到其他層工作。隨著信息化的發(fā)展，七層網(wǎng)絡模型已經(jīng)設(shè)計到生活的方方面面。人們所處的任何網(wǎng)絡環(huán)境都有它的存在，不論是我們?nèi)粘？吹降碾娔X，手機，電視機，WIFI，4G，5G，還是我們所瀏覽的網(wǎng)頁或者使用的APP。
網(wǎng)線，光纖和集線器
這類設(shè)備和材料屬于七層網(wǎng)絡模型的第一層物理層。
網(wǎng)頁和APP
這類軟件均基于的是七層網(wǎng)絡模型的第七層應用層。
七層網(wǎng)絡模型的制作方法十分簡單，通過以下幾個步驟，即可輕松繪制出一幅非常實用的七層網(wǎng)絡模型。
第一步：點擊下載“億圖圖示”軟件，或訪問在線版億圖圖示。啟動軟件，開始作圖。
第二步：新建“七層網(wǎng)絡模型”。依次點擊“新建”-搜索框內(nèi)填寫“七層網(wǎng)絡模型”。從億圖軟件呈現(xiàn)的樣板中，選擇一個模板，點擊打開選中的“七層網(wǎng)絡模型”模板。
第三步：選擇相關(guān)的“七層網(wǎng)絡模型”并使用，再點擊右側(cè)屬性面板中可以基于實際情況修改和添加相關(guān)信息，如文本，顏色，連接線等等，通過修改“七層網(wǎng)絡模型”上各個模塊，即可改變當前界面中“七層網(wǎng)絡模型”的信息。
第四步：完成“七層網(wǎng)絡模型”的繪制后，可以點擊左上角的保存、下載、打印、分享等按鈕，對繪制好的七層網(wǎng)絡模型作品進行存儲。也可以將存儲的作品導出為圖片、PDF、Html等常用的格式。
億圖圖示是一款國產(chǎn)綜合型的圖形圖表設(shè)計應用軟件，用戶可以使用它繪制260多種類型的圖表，其中包含常用的：七層網(wǎng)絡模型、TCP/IP模型、物理模型、star模型、半角模型、分析模型、EOQ模型、卡諾模型、DEA模型，RFM模型等等。它能將一些相對復雜的概念模型簡單化的呈現(xiàn)出來，讓難以理解的概念和信息轉(zhuǎn)化為簡單清晰的模型圖。
使用億圖圖示繪制瀑布模型，基于官方的模板庫，直接選用相關(guān)模板，快速呈現(xiàn)七層網(wǎng)絡模型
1、顏值高，易上手
簡約的UI設(shè)計，海量模板可供選擇，僅需拖拽操作，智能對位排版，圖表效果清晰立見。
2、多平臺，多格式、高效同步
支持Windows、Mac和Linux系統(tǒng)，僅需一鍵即可將圖表轉(zhuǎn)化為多種格式，還支持Visio格式的批量導入、導出，還有適時地更新、升級，使軟件總能最配適用戶。
3、保存便捷
作品一鍵保存，強大的云存儲功能保護作品不丟失。
4、功能多樣
可以使用億圖圖示繪制各種圖表——思維導圖、流程圖、商務圖、拓撲圖、平面圖、柱狀圖、甘特圖、地圖、數(shù)據(jù)模型圖以及機構(gòu)組織圖等等，億圖圖示在各個不同領(lǐng)域都是非常不錯的制圖工具。
可以使用JavaScript在瀏覽器中渲染任何您想要的內(nèi)容。這個很好的示例是這個在線建模工具列表，它可以幫助您直接在瀏覽器中輕松創(chuàng)建UML（或ER，BPMN等）圖。這些工具中的大多數(shù)都使用 JavaScript 來渲染圖形形狀并與之交互。但是，如果您想創(chuàng)建自己的圖表或構(gòu)建自己的編輯器怎么辦？別擔心，我們?yōu)槟峁┍Ｕ稀Ｔ谶@篇文章中，我們提供了一個 10+ JavaScript 繪圖庫的列表，用于編寫您自己的可視化工具和/或為您的軟件添加一些圖形建模功能。
我們將 JavaScript 繪圖庫集分為兩個主要類別：
簡而言之，如果您正在尋找一種幾乎現(xiàn)成的方法來將 JavaScript 建模庫集成到您的工具中，請選擇第一組中的庫。如果您正在尋找一個更可調(diào)的解決方案，并且有時間和技能進行一些編程，請考慮從第二組中獲取一個庫并根據(jù)需要對其進行個性化設(shè)置。請注意，我們專注于繪制圖表的庫，如果您只想渲染只讀圖表，您可能需要查看此文本建模工具列表。
用于繪制UML（或BPMN或ERD）圖的JavaScript庫
JointJS可用于創(chuàng)建靜態(tài)圖或完全交互式的圖工具和應用程序構(gòu)建器。它還有一個商業(yè)版本（Rappid，見下文）
以下是它的一些功能：
Rappid是JointJS的商業(yè)擴展。它是一組 JointJS 插件和其他組件，在創(chuàng)建圖表工具時提供了更多可能性和即用型功能。以下是它的一些功能：
MxGraph 是一個交互式 JavaScript HTML 5 圖表庫。mxGraph 是一個完全客戶端的庫，它使用 SVG 和 HTML 來渲染模型。例如，該庫用于 Draw.io。開發(fā)始于 2005 年，雖然原始項目已存檔，但這個分支仍在繼續(xù)工作。
mxGraph 不使用第三方軟件，它不需要插件，幾乎可以集成到任何框架中。mxGraph 包包含一個用 JavaScript 編寫的客戶端軟件，以及一系列用于各種語言的后端。客戶端軟件是一個圖形組件，帶有集成到現(xiàn)有 Web 界面中的可選應用程序包裝器。客戶端需要 Web 服務器將所需的文件傳送到客戶端，或者可以在沒有 Web 服務器的情況下從本地文件系統(tǒng)運行。后端可以按原樣使用，也可以以受支持的語言之一嵌入到現(xiàn)有服務器應用程序中。
GoJS是一個功能豐富的JavaScript / Typescript庫，用于跨現(xiàn)代瀏覽器和平臺實現(xiàn)交互式圖表。GoJS 通過可自定義的模板和布局可以輕松構(gòu)建復雜節(jié)點、鏈接和組的圖表。
GoJS 為用戶交互提供了許多高級功能，例如拖放、復制和粘貼、事務狀態(tài)和撤消管理、調(diào)色板、概述、數(shù)據(jù)綁定模型、事件處理程序以及用于自定義操作的可擴展工具系統(tǒng)。它們提供了 150 多個交互式示例，可幫助您開始使用 BPMN、流程圖、狀態(tài)圖、可視化樹、Sankey 和數(shù)據(jù)流等圖表。該 API 有很好的文檔記錄，以確保您可以立即開始使用。我們在這篇文章中廣泛介紹了GoJS。
用于 UML2 圖表的 HTML5/javascript 庫。它的主要目標是為Web開發(fā)人員提供一種簡單的方法來可視化和編輯UML模型，在我們自己的網(wǎng)站中，沒有其他外部依賴項，并且通過瀏覽器在客戶端完全可執(zhí)行，與此列表中的其他工具不同。jsUML2 庫提供了一個 API，允許 Web 開發(fā)人員使用最新的 Web 瀏覽器以及當前移動設(shè)備支持的 HTML5 技術(shù)在自己的網(wǎng)站中包含可編輯的圖表。
它為特定于 UML 的模型提供了廣泛的有趣功能。特別是，它支持所有主要的UML類型的圖：
支持圖表元素（大小，位置，顏色等）的樣式版本，構(gòu)造型定義，將UML圖表導入/導出到XML和圖像生成。
該工具已于 2017 年停產(chǎn)，但對于所有尋找 UML JavaScript 庫的人來說，它仍然是一個強大的選擇。
圖表工具是100%用JavaScript編寫的，并使用HTML5 Canvas元素進行繪制。該組件可以使用jQuery或Microsoft Ajax?庫進行瀏覽器獨立層和類型系統(tǒng)實現(xiàn)。
它帶有一組豐富的預定義形狀（用于工作流圖、流程架構(gòu)、類圖、樹,...檢查他們的樣本集合）以及定義自己的形狀和自定義選項（例如箭頭形狀）的可能性。為了方便 API 的使用，他們對其進行了大量記錄。您還可以使用自動圖形布局算法。
Nomnoml 是一個較有名的文本建模工具，能夠從文本描述中渲染 UML 圖，但它也提供了一個獨立的 JavaScript 庫，可用于在自己的網(wǎng)頁上呈現(xiàn)圖。唯一的依賴關(guān)系是 lodash 和 dagre。
與nomnoml類似，Mermaid的主要重點是從文本文件生成圖表，在這種情況下，通過簡單的類似markdown的腳本語言。它依賴于 d3 和 dagre-d3 來提供圖形布局和繪圖庫。它提供了一個在線編輯器，但您也可以直接重用打包的美人魚 API 將美人魚集成到您自己的開發(fā)中。它主要涵蓋序列圖和流程圖。
用于創(chuàng)建和顯示圖表的核心庫。它被 BPMN.io（此庫的創(chuàng)建者）用作同一公司許多其他庫的構(gòu)建塊，用于指定業(yè)務流程模型、決策模型和案例計劃模型。
例如，bpmn-js 是渲染 BPMN 2.0 圖的.js擴展。除了使用它來構(gòu)建工作流建模編輯器（正如他們已經(jīng)提供的那樣）之外，bpmn-js 在設(shè)計時還考慮了可擴展性，因此您可以“輕松”構(gòu)建某種執(zhí)行/模擬引擎，例如，在其上構(gòu)建某種執(zhí)行/模擬引擎。
顧名思義，state.js 專注于對分層狀態(tài)機進行建模。狀態(tài).js API 提供：
它是用TypeScript開發(fā)的，并轉(zhuǎn)譯為JavaScript;您可以使用任何一種語言。 : .
Eclipse Sprotty 和 Eclipse GLSP 工具可幫助您為自己的語言創(chuàng)建建模環(huán)境。因此，它們不限于UML，ER或其他特定的圖表類型。相反，這些工具提供了一個后端基礎(chǔ)結(jié)構(gòu)（基于語言服務器協(xié)議的圖形化），以創(chuàng)建您自己的語言，并提供一個基于 JS 的前端來為其構(gòu)建可視化編輯器。
提供面向圖形的建模基元的低級庫（因此，我們在這里不列出只專注于繪制數(shù)據(jù)可視化圖表的庫）。事實上，其中一些已被用于構(gòu)建上面列出的JavaScript建模庫。
D3.js 是一個 JavaScript 庫，用于基于數(shù)據(jù)操作文檔。現(xiàn)在，我會說是同類庫中最受歡迎的圖書館。
D3 可幫助您使用 HTML、SVG 和 CSS 使數(shù)據(jù)栩栩如生。D3 對 Web 標準的強調(diào)為您提供了現(xiàn)代瀏覽器的全部功能，而無需將自己綁定到專有框架，將強大的可視化組件和數(shù)據(jù)驅(qū)動的 DOM 操作方法相結(jié)合。D3 速度極快，支持大型數(shù)據(jù)集以及交互和動畫的動態(tài)行為。D3 的函數(shù)式風格允許通過各種官方和社區(qū)開發(fā)的模塊重用代碼。
Rapha?l 是一個小型的 JavaScript 庫，它應該可以簡化您在 Web 上使用矢量圖形的工作。例如，如果您想創(chuàng)建自己的特定圖表或圖像裁剪和旋轉(zhuǎn)小部件，則可以使用此庫簡單輕松地實現(xiàn)它。Rapha?l 使用 SVG W3C 推薦和 VML 作為創(chuàng)建圖形的基礎(chǔ)。這意味著您創(chuàng)建的每個圖形對象也是一個 DOM 對象，因此您可以附加 JavaScript 事件處理程序或稍后修改它們。Rapha?l的目標是提供一個適配器，使繪制矢量藝術(shù)兼容跨瀏覽器且容易。它最近沒有更新。
使用 Draw2D Javascript 庫創(chuàng)建類似 Visio 的繪圖、圖表或工作流編輯器。用戶界面允許使用標準瀏覽器進行交互式繪圖。它聲稱比拉斐爾簡潔得多。即使開發(fā)停滯不前，甚至還有一個演示頁面。
Fabric 是一個 JavaScript HTML 畫布庫，在 canvas 元素之上提供了一個交互式對象模型。您可以在畫布上創(chuàng)建和填充對象;對象，如簡單的幾何形狀或由多個路徑組成的復雜形狀。Fabric 還具有 SVG 到畫布（和畫布到 SVG）解析器。
Paper.js 是一個運行在 HTML5 Canvas 之上的開源矢量圖形腳本框架。它提供了一個干凈的場景圖/文檔對象模型和許多強大的功能來創(chuàng)建和處理矢量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個精心設(shè)計、一致和干凈的編程界面中。它基于（并且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的腳本環(huán)境。
jsPlumb 提供了一種以可視化連接為核心構(gòu)建應用程序的快速方法。s.它使用 SVG 并在 IE9 及更高版本的所有瀏覽器上運行。JsPlumbToolkit是其商業(yè)擴展。此商業(yè)版本包裝了社區(qū)版，重點關(guān)注基礎(chǔ)數(shù)據(jù)模型，以及幾個有用的 UI 功能，例如布局和提供平移/縮放功能的小部件。
一個 JS 客戶端庫，用于創(chuàng)建圖形和交互式體驗，基于處理的核心原則，使藝術(shù)家、設(shè)計師和教育工作者可以訪問編碼。除了繪圖之外，該項目還提供網(wǎng)絡音頻功能，碰撞檢測，甚至從p5.js草圖生成圖形用戶界面。
高度優(yōu)化的開源圖論網(wǎng)絡庫，可用于圖分析和可視化。與所有現(xiàn)代瀏覽器兼容，并且可通過 JSON 完全（反）序列化。它還包括自動布局，集合論和圖論的算法，從BFS到PageRank。
一個JavaScript庫，充當dagre（在客戶端布置有向圖的javascript庫）的前端，使用D3提供實際的呈現(xiàn)。該項目現(xiàn)已放棄。
Vis.js 是一個基于瀏覽器的動態(tài)可視化庫。該庫設(shè)計為易于使用，可處理大量動態(tài)數(shù)據(jù)，并可對數(shù)據(jù)進行操作。這個項目也被放棄了。
React Diagrams 是一個“一個超級簡單、嚴肅的圖表庫，用 react 編寫，只是工作”。它是一個專注于可視化流程和面向流程的圖表的庫。靈感來自Blender、Labview和虛幻引擎。
它完全用 Typescript 和 React 編寫。它是完全可擴展的，整個庫（包括其核心）可以擴展，重新布線并重新組裝成根本不同的軟件，以滿足您自己的軟件需求。它還旨在提供良好的用戶體驗，但確保設(shè)計人員可以盡快編輯圖表。
Tldraw是此列表中的最新條目之一。Tldraw是一個“微小的繪圖應用程序”，提供了許多形狀來繪制簡單，但清晰和優(yōu)雅的圖表，具有手繪風格和方便的功能，如智能箭頭，捕捉和便箋。甚至還有一個VSCode擴展。
eXt-UI是什么？
NeXt UI 工具包是一個基于 HTML5/JavaScript 的網(wǎng)絡 Web 應用程序工具包。它提供了一個以網(wǎng)絡為中心的拓撲 UI 組件，具有高性能和豐富的功能。NeXt 可以顯示大型復雜網(wǎng)絡拓撲、聚合網(wǎng)絡節(jié)點、流量/路徑/隧道/組可視化，它包括不同的布局算法、地圖疊加和預設(shè)的用戶友好交互。
---轉(zhuǎn)載自NeXt-UI的GItHub地址簡介https://github.com/NeXt-UI/next-bower
雖然NeXt-UI已經(jīng)停止更新了，但是思科仍然在官網(wǎng)上花了很大篇幅展示這個模塊，這也正是我們要學習這個模塊的理由.
好了，話不多說，開始正文部分吧。
首先我們需要在cisco網(wǎng)頁上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip
文件的架構(gòu)大概就是上面的那個類型，然后我們開始構(gòu)建拓撲所需要的文件
一、新建一個index.html文件***/NEXTUI/js/next/css/next.css 這一塊地址可以寫相對路徑也可以寫絕對路徑
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="***/NEXTUI/js/next/css/next.css">
<script type="text/javascript" src="***/NEXTUI/js/next/js/next.js"></script>
</head>
<body>
這是一個新的NeXt-UI文件
</body>
</html>
二、更改app.js的配置，這個是調(diào)用data.js的文件，一般無需更改
(function(nx){
// instantiate NeXt app
var app=new nx.ui.Application();
// configuration object for next
var topologyConfig={
// special configuration for nodes
"nodeConfig": {
"label": "model.name",
"iconType": "router"
},
// special configuration for links
"linkConfig": {
"linkType": "curve",
},
// if true, the nodes' icons are shown, otherwise a user sees a dot instead
"showIcon": true,
// automatically compute the position of nodes
"dataProcessor": "force",
"width": 1920,
"height": 1080,
};
// instantiate Topology class
var topology=new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);
三、更改data.js的路徑，這邊就是寫的設(shè)備的一些信息，主要分為三個部分nodes、links、nodeSet
ndoes:代表某一個設(shè)備，里面的內(nèi)容都是設(shè)備的相關(guān)信息。
links：代表哪幾個設(shè)備相關(guān)聯(lián)，分為source和target
nodeSet；代表哪幾個設(shè)備為一個分組。一個分組可以在頁面展示為一個設(shè)備，需要時可以展開
配置如下
var topologyData={
nodes: [
{
"id": 0,
"name": "New York",
"mgmt_ip": "1.1.1.1",
"icon": "switch"
},
{
"id": 1,
"name": "Los Angeles",
"mgmt_ip": "1.1.1.2",
"icon": "router"
},
{
"id": 2,
"name": "Houston",
"mgmt_ip": "1.1.1.3"
},
{
"id": 3,
"name": "Beijing",
"mgmt_ip": "1.1.1.4"
}
],
links: [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 2
}
],
nodeSet: [
{
"id": 4,
"nodes": [1,2]
}
],
};
現(xiàn)在我們只需要打開index.html文件即可看到網(wǎng)絡拓撲圖了
后面我們可以講一下如何使用nornir+NeXt-UI來自動繪制拓撲
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
