Network Topology

What is a Network Topology Diagram and how can I build one with JsPlumb?

A network topology diagram is a graphical representation of the network structure and the interconnection between devices. It provides a visual map of a network, making it easier to understand the relationships between the various components.

JsPlumb has all of the tools and components you need to produce a professional Network Topology Diagram builder in no time at all. The demo on this page can be used as a base for your own Network Topology Diagram builder.

• Click on a shape or group in the palette to select it. Then, either click on the canvas to drop an object of that type, or click and hold, then drag the mouse, to draw an object to a specific size. This uses JsPlumb's "vertex drawing" plugin, new in 6.24.0.
• You can snag existing nodes/groups on the canvas when you draw a new group, and those objects will be added to the new group.
• Click a node or group to put it into resize node, then drag the handles on the corners to change its dimensions. Notice how when you resize something inside a group, the group's size dynamically adjusts to contain the resized object.
• Click 'Export...' to export to SVG/PNG/JPG
• Click on a node, group or edge to open it in the inspector. Then change various properties as you like.

Angular Network Topology Diagrams

JsPlumb's deep Angular integration makes building an Angular Network Topology Diagram very simple. The Network Topology Diagram builder starter app uses our ControlsComponent, SurfaceComponent, MiniviewComponent and Angular service to provide a fully featured Network Topology Diagram. Tested with Angular 16, 17, 18 and 19.

Our Network Topology Diagram builder also takes advantage of JsPlumb's vertex drawing plugin.

import { Component } from "@angular/core"
import { VertexDrawingPlugin } from "@jsplumbtoolkit/browser-ui"

@Component({
  template:`
  <div class="my-network-topology">
    <div class="canvas">
        <jsplumb-surface [view]='viewOptions'></jsplumb-surface>
        <jsplumb-controls></jsplumb-controls>
    </div>
  </div>`
})
export class MyComponent {

  viewOptions = { 
    nodes:{
      default:{
        component:MyNetworkTopologyObjectComponent
      }   
   }
  
  renderOptions = {
     plugins:[
       VertexDrawingPlugin.type
     ]
   }
}        
        
        

React Network Topology Diagrams

React Network Topology Diagrams with JsPlumb are a snap. Our Network Topology Diagram builder uses JsPlumb's advanced React integration with its providers and support for functional components, to give you a solid foundation on which to base your app. Tested with React 16, 17, 18 and 19.

Our Network Topology Diagram builder also takes advantage of JsPlumb's vertex drawing plugin.

import React from "react"
import { SurfaceProvider, 
         SurfaceComponent, ControlsComponent,
         MiniviewComponent} from "@jsplumbtoolkit/browser-ui-react"

export default function MyNetworkTopology() {

  view = {
    nodes:{
      default:{
        jsx:(ctx) => <MyNetworkTopologyNodeComponent ctx={ctx}/>
      }
    }
  }      

  renderOptions = { 
   ... 
   }

  return <div className="jtk-demo-canvas">
      <SurfaceProvider>
        <SurfaceComponent
          renderOptions={renderOptions}
          viewOptions={view}>
          <ControlsComponent/>
          <MiniviewComponent/>
        </SurfaceComponent>

      </SurfaceProvider>
      </div>      
}                  

Typescript Network Topology Diagrams

JsPlumb is written in Typescript and ships with a full set of type definitions, for a seamless Typescript development experience.

JsPlumb's Surface component is the heart of the Network Topology Diagram builder, and JsPlumb ships a large number of useful helper components such as the Miniview, the Controls component for managing zoom, undo/redo etc, which lets you easily configure drag/drop of new elements, plus a long list of plugins. Our Network Topology Diagram builder also takes advantage of JsPlumb's vertex drawing plugin.

Our Typescript Network Topology Diagram builder starter app provides you with everything you need to get a solid start, and is easily extensible.

<div id="network-topology-wrapper">
  <div id="canvas">
    <div id="controls"></div>
  </div>
  <div id="palette"></div>
</div>                       

import { newInstance,  
  ControlsComponent } from "@jsplumbtoolkit/browser-ui"
         
export class MyNetworkTopology() {
        
  constructor() {
  
    const toolkit = newInstance()
    const surface = toolkit.render(document.querySelector("#canvas"), {
      view:{
        nodes:{
          default:{
            template:`<div data-jtk-target="true"></div>`
          }
        }
      }             
    })
    
    new ControlsComponent(document.querySelector("#controls"), surface)
    
    
      
  }
  

}

Vue Network Topology Diagram

It's easy to build a Vue Network Topology Diagram with JsPlumb - we've done most of the hard work for you in our Vue Network Topology Diagram builder starter app

Our Vue Network Topology Diagram takes advantage of JsPlumb's ability to integrate deeply with Vue, using Vue components to render nodes, and several of JsPlumb's Vue helper components and plugins such as the ControlsComponent, MiniviewComponent. Our Network Topology Diagram builder also takes advantage of JsPlumb's vertex drawing plugin..

<script>
import { defineComponent } from "vue";
import { loadSurface, DEFAULT_VUE_SURFACE_ID } from "@jsplumbtoolkit/browser-ui-vue3"

let surface
let toolkit

export default defineComponent({
  name:"network-topology",
  mounted() {
    loadSurface(DEFAULT_VUE_SURFACE_ID, (s) => {
      surface = s;
      toolkit = surface.toolkitInstance;
    })
  },
  methods:{
    viewParams:function() {
      return {
        nodes:{
          default:{
            component:NodeComponent
          }
        }
      }
    },
    renderParams:function() {
      return {
        // set the size of elements from the width/height values in their backing data
        useModelForSizes:true,
        // on load, zoom the dataset so its all visible
        zoomToFit:true
      }
    }
  }

</script>
<template>
  <div id="app">
    <div class="jtk-demo-canvas">
      <SurfaceComponent :renderOptions="this.renderParams()"
                :viewOptions="this.viewParams()"
                url="mindmap.json">
      </SurfaceComponent>

      <ControlsComponent/>
      <MiniviewComponent/>
    </div>
  </div>
</template>          

Svelte Network Topology Diagrams

JsPlumb's Svelte integration has everything you need to quickly build a Svelte Network Topology Diagram, and what's great is we've already pulled it all together for you in our Svelte Network Topology Diagram builder starter app

Our Svelte Network Topology Diagram uses several of JsPlumb's Svelte components, including the SurfaceComponent, ControlsComponent and MiniviewComponent, and it also takes advantage of JsPlumb's vertex drawing plugin.

<script>

const view = {
      nodes:{
        [DEFAULT]:{
          component:NodeComponent
        }
      }
    }
    
const renderOptions = {
    // set the size of elements from the width/height values in their backing data
    useModelForSizes:true,
    // on load, zoom the dataset so its all visible
    zoomToFit:true
  }
    
    
</script>
<div>
    <SurfaceProvider>

      <SurfaceComponent renderOptions={renderOptions}
                        viewOptions={view}
                        className="jtk-demo-canvas"
                        url="/dataset.json">

        <ControlsComponent/>
        <MiniviewComponent/>
      </SurfaceComponent>

     

    </SurfaceProvider>
</div>