Network 2018 Entities
Biometric Reader
- Preview
- Usage
- Definition
import { BiometricReader } from '@dinghy/diagrams/entitiesNetwork'
<BiometricReader/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BIOMETRIC_READER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, BIOMETRIC_READER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.biometric_reader;',
},
_width: 60,
_height: 100,
}
Bus
- Preview
- Usage
- Definition
import { Bus } from '@dinghy/diagrams/entitiesNetwork'
<Bus/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BUS } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, BUS)}
/>
{
_style: {
entity: 'html=1;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.bus;gradientColor=none;gradientDirection=north;fontColor=#ffffff;perimeter=backbonePerimeter;backboneSize=20;',
},
_width: 260,
_height: 140,
}
Bus 2
- Preview
- Usage
- Definition
import { Bus2 } from '@dinghy/diagrams/entitiesNetwork'
<Bus2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BUS_2 } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, BUS_2)}
/>
{
_style: {
entity: 'strokeColor=#6881B3;edgeStyle=none;rounded=0;endArrow=none;html=1;strokeWidth=2;',
},
_width: 1,
_height: 140,
}
Bus 3
- Preview
- Usage
- Definition
import { Bus3 } from '@dinghy/diagrams/entitiesNetwork'
<Bus3/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BUS_3 } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, BUS_3)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.bus;gradientColor=none;gradientDirection=north;fontColor=#ffffff;perimeter=backbonePerimeter;backboneSize=20;',
},
_width: 200,
_height: 20,
}
Business Center
- Preview
- Usage
- Definition
import { BusinessCenter } from '@dinghy/diagrams/entitiesNetwork'
<BusinessCenter/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_CENTER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, BUSINESS_CENTER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.business_center;',
},
_original_width: 90,
_original_height: 100,
}
Cloud
- Preview
- Usage
- Definition
import { Cloud } from '@dinghy/diagrams/entitiesNetwork'
<Cloud/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CLOUD } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, CLOUD)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.cloud;fontColor=#ffffff;',
},
_width: 90,
_height: 50,
}
Comm Link (Icon)
- Preview
- Usage
- Definition
import { CommLinkIcon } from '@dinghy/diagrams/entitiesNetwork'
<CommLinkIcon/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COMM_LINK_ICON } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, COMM_LINK_ICON)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.comm_link;',
},
_width: 30,
_height: 100,
}
Community
- Preview
- Usage
- Definition
import { Community } from '@dinghy/diagrams/entitiesNetwork'
<Community/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COMMUNITY } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, COMMUNITY)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.community;',
},
_original_width: 95,
_original_height: 100,
}
Copier
- Preview
- Usage
- Definition
import { Copier } from '@dinghy/diagrams/entitiesNetwork'
<Copier/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COPIER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, COPIER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.copier;',
},
_original_width: 100,
_original_height: 100,
}
Desktop PC
- Preview
- Usage
- Definition
import { DesktopPc } from '@dinghy/diagrams/entitiesNetwork'
<DesktopPc/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DESKTOP_PC } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, DESKTOP_PC)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.desktop_pc;',
},
_width: 30,
_height: 60,
}
External Storage
- Preview
- Usage
- Definition
import { ExternalStorage } from '@dinghy/diagrams/entitiesNetwork'
<ExternalStorage/>
// or
import { extendStyle } from "@dinghy/base-components";
import { EXTERNAL_STORAGE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, EXTERNAL_STORAGE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.external_storage;',
},
_original_width: 90,
_original_height: 100,
}
Firewall
- Preview
- Usage
- Definition
import { Firewall } from '@dinghy/diagrams/entitiesNetwork'
<Firewall/>
// or
import { extendStyle } from "@dinghy/base-components";
import { FIREWALL } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, FIREWALL)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.firewall;',
},
_original_width: 100,
_original_height: 100,
}
Gamepad
- Preview
- Usage
- Definition

import { Gamepad } from '@dinghy/diagrams/entitiesNetwork'
<Gamepad/>
// or
import { extendStyle } from "@dinghy/base-components";
import { GAMEPAD } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, GAMEPAD)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.gamepad;',
},
_width: 100,
_height: 70,
}
Hub
- Preview
- Usage
- Definition
import { Hub } from '@dinghy/diagrams/entitiesNetwork'
<Hub/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HUB } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, HUB)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.hub;',
},
_width: 100,
_height: 30,
}
Laptop
- Preview
- Usage
- Definition
import { Laptop } from '@dinghy/diagrams/entitiesNetwork'
<Laptop/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LAPTOP } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, LAPTOP)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.laptop;',
},
_width: 100,
_height: 55,
}
Load Balancer
- Preview
- Usage
- Definition
import { LoadBalancer } from '@dinghy/diagrams/entitiesNetwork'
<LoadBalancer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LOAD_BALANCER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, LOAD_BALANCER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.load_balancer;',
},
_width: 100,
_height: 30,
}
Mail Server
- Preview
- Usage
- Definition
import { MailServer } from '@dinghy/diagrams/entitiesNetwork'
<MailServer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MAIL_SERVER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, MAIL_SERVER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.mail_server;',
},
_original_width: 105,
_original_height: 105,
}
Mainframe
- Preview
- Usage
- Definition
import { Mainframe } from '@dinghy/diagrams/entitiesNetwork'
<Mainframe/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MAINFRAME } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, MAINFRAME)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.mainframe;',
},
_width: 80,
_height: 100,
}
Mobile
- Preview
- Usage
- Definition
import { Mobile } from '@dinghy/diagrams/entitiesNetwork'
<Mobile/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MOBILE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, MOBILE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.mobile;',
},
_width: 50,
_height: 100,
}
Modem
- Preview
- Usage
- Definition
import { Modem } from '@dinghy/diagrams/entitiesNetwork'
<Modem/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MODEM } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, MODEM)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.modem;',
},
_width: 100,
_height: 30,
}
Monitor
- Preview
- Usage
- Definition
import { Monitor } from '@dinghy/diagrams/entitiesNetwork'
<Monitor/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MONITOR } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, MONITOR)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.monitor;',
},
_original_width: 80,
_original_height: 65,
}
NAS Filer
- Preview
- Usage
- Definition
import { NasFiler } from '@dinghy/diagrams/entitiesNetwork'
<NasFiler/>
// or
import { extendStyle } from "@dinghy/base-components";
import { NAS_FILER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, NAS_FILER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.nas_filer;',
},
_width: 100,
_height: 35,
}
Patch Panel
- Preview
- Usage
- Definition
import { PatchPanel } from '@dinghy/diagrams/entitiesNetwork'
<PatchPanel/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PATCH_PANEL } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PATCH_PANEL)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.patch_panel;',
},
_width: 100,
_height: 35,
}
PC
- Preview
- Usage
- Definition
import { Pc } from '@dinghy/diagrams/entitiesNetwork'
<Pc/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PC } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PC)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.pc;',
},
_width: 100,
_height: 70,
}
Phone
- Preview
- Usage
- Definition

import { Phone } from '@dinghy/diagrams/entitiesNetwork'
<Phone/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PHONE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PHONE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.phone_1;',
},
_width: 100,
_height: 70,
}
Phone 2
- Preview
- Usage
- Definition
import { Phone2 } from '@dinghy/diagrams/entitiesNetwork'
<Phone2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PHONE_2 } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PHONE_2)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.phone_2;',
},
_original_width: 100,
_original_height: 90,
}
Printer
- Preview
- Usage
- Definition
import { Printer } from '@dinghy/diagrams/entitiesNetwork'
<Printer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PRINTER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PRINTER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.printer;',
},
_original_width: 100,
_original_height: 100,
}
Proxy Server
- Preview
- Usage
- Definition
import { ProxyServer } from '@dinghy/diagrams/entitiesNetwork'
<ProxyServer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PROXY_SERVER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, PROXY_SERVER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.proxy_server;',
},
_original_width: 105,
_original_height: 105,
}
Rack
- Preview
- Usage
- Definition
import { Rack } from '@dinghy/diagrams/entitiesNetwork'
<Rack/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RACK } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, RACK)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.rack;',
},
_width: 50,
_height: 100,
}
Radio Tower
- Preview
- Usage
- Definition

import { RadioTower } from '@dinghy/diagrams/entitiesNetwork'
<RadioTower/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RADIO_TOWER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, RADIO_TOWER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.radio_tower;',
},
_width: 55,
_height: 100,
}
Ring Bus
- Preview
- Usage
- Definition
import { RingBus } from '@dinghy/diagrams/entitiesNetwork'
<RingBus/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RING_BUS } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, RING_BUS)}
/>
{
_style: {
entity: 'html=1;fillColor=#CCCCCC;strokeColor=#6881B3;shape=ellipse;perimeter=ellipsePerimeter;gradientColor=none;gradientDirection=north;fontColor=#ffffff;strokeWidth=2;',
},
_original_width: 100,
_original_height: 100,
}
Ring Bus 2
- Preview
- Usage
- Definition
import { RingBus2 } from '@dinghy/diagrams/entitiesNetwork'
<RingBus2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RING_BUS_2 } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, RING_BUS_2)}
/>
{
_style: {
entity: 'strokeColor=#6881B3;edgeStyle=none;rounded=0;endArrow=none;dashed=0;html=1;strokeWidth=2;',
},
_width: 1,
_height: 100,
}
Router
- Preview
- Usage
- Definition
import { Router } from '@dinghy/diagrams/entitiesNetwork'
<Router/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ROUTER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, ROUTER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.router;',
},
_width: 100,
_height: 30,
}
Satellite
- Preview
- Usage
- Definition

import { Satellite } from '@dinghy/diagrams/entitiesNetwork'
<Satellite/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SATELLITE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SATELLITE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.satellite;',
},
_original_width: 100,
_original_height: 100,
}
Satellite Dish
- Preview
- Usage
- Definition

import { SatelliteDish } from '@dinghy/diagrams/entitiesNetwork'
<SatelliteDish/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SATELLITE_DISH } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SATELLITE_DISH)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.satellite_dish;',
},
_original_width: 90,
_original_height: 100,
}
Scanner
- Preview
- Usage
- Definition

import { Scanner } from '@dinghy/diagrams/entitiesNetwork'
<Scanner/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SCANNER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SCANNER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.scanner;',
},
_width: 100,
_height: 75,
}
Secured
- Preview
- Usage
- Definition
import { Secured } from '@dinghy/diagrams/entitiesNetwork'
<Secured/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SECURED } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SECURED)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.secured;',
},
_width: 80,
_height: 100,
}
Security Camera
- Preview
- Usage
- Definition

import { SecurityCamera } from '@dinghy/diagrams/entitiesNetwork'
<SecurityCamera/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SECURITY_CAMERA } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SECURITY_CAMERA)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.security_camera;',
},
_width: 100,
_height: 75,
}
Server
- Preview
- Usage
- Definition
import { Server } from '@dinghy/diagrams/entitiesNetwork'
<Server/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SERVER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SERVER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.server;',
},
_original_width: 90,
_original_height: 100,
}
Server Storage
- Preview
- Usage
- Definition
import { ServerStorage } from '@dinghy/diagrams/entitiesNetwork'
<ServerStorage/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SERVER_STORAGE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SERVER_STORAGE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.server_storage;',
},
_original_width: 105,
_original_height: 105,
}
Storage
- Preview
- Usage
- Definition
import { Storage } from '@dinghy/diagrams/entitiesNetwork'
<Storage/>
// or
import { extendStyle } from "@dinghy/base-components";
import { STORAGE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, STORAGE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.storage;',
},
_original_width: 100,
_original_height: 100,
}
Supercomputer
- Preview
- Usage
- Definition
import { Supercomputer } from '@dinghy/diagrams/entitiesNetwork'
<Supercomputer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SUPERCOMPUTER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SUPERCOMPUTER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.supercomputer;',
},
_original_width: 100,
_original_height: 100,
}
Switch
- Preview
- Usage
- Definition
import { Switch } from '@dinghy/diagrams/entitiesNetwork'
<Switch/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SWITCH } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, SWITCH)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.switch;',
},
_width: 100,
_height: 30,
}
Tablet
- Preview
- Usage
- Definition
import { Tablet } from '@dinghy/diagrams/entitiesNetwork'
<Tablet/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TABLET } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, TABLET)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.tablet;',
},
_width: 100,
_height: 70,
}
Tape Storage
- Preview
- Usage
- Definition
import { TapeStorage } from '@dinghy/diagrams/entitiesNetwork'
<TapeStorage/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TAPE_STORAGE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, TAPE_STORAGE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.tape_storage;',
},
_original_width: 105,
_original_height: 105,
}
Terminal
- Preview
- Usage
- Definition
import { Terminal } from '@dinghy/diagrams/entitiesNetwork'
<Terminal/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TERMINAL } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, TERMINAL)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.terminal;',
},
_original_width: 80,
_original_height: 65,
}
Unsecure
- Preview
- Usage
- Definition
import { Unsecure } from '@dinghy/diagrams/entitiesNetwork'
<Unsecure/>
// or
import { extendStyle } from "@dinghy/base-components";
import { UNSECURE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, UNSECURE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.unsecure;',
},
_width: 80,
_height: 100,
}
UPS Enterprise
- Preview
- Usage
- Definition
import { UpsEnterprise } from '@dinghy/diagrams/entitiesNetwork'
<UpsEnterprise/>
// or
import { extendStyle } from "@dinghy/base-components";
import { UPS_ENTERPRISE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, UPS_ENTERPRISE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.ups_enterprise;',
},
_original_width: 100,
_original_height: 100,
}
UPS Small
- Preview
- Usage
- Definition
import { UpsSmall } from '@dinghy/diagrams/entitiesNetwork'
<UpsSmall/>
// or
import { extendStyle } from "@dinghy/base-components";
import { UPS_SMALL } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, UPS_SMALL)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.ups_small;',
},
_width: 70,
_height: 100,
}
USB Stick
- Preview
- Usage
- Definition
import { UsbStick } from '@dinghy/diagrams/entitiesNetwork'
<UsbStick/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USB_STICK } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, USB_STICK)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.usb_stick;',
},
_width: 45,
_height: 100,
}
User Female
- Preview
- Usage
- Definition
import { UserFemale } from '@dinghy/diagrams/entitiesNetwork'
<UserFemale/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USER_FEMALE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, USER_FEMALE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.user_female;',
},
_width: 40,
_height: 100,
}
User Male
- Preview
- Usage
- Definition
import { UserMale } from '@dinghy/diagrams/entitiesNetwork'
<UserMale/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USER_MALE } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, USER_MALE)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.user_male;',
},
_width: 40,
_height: 100,
}
Users
- Preview
- Usage
- Definition
import { Users } from '@dinghy/diagrams/entitiesNetwork'
<Users/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USERS } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, USERS)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.users;',
},
_original_width: 90,
_original_height: 100,
}
Video Projector
- Preview
- Usage
- Definition
import { VideoProjector } from '@dinghy/diagrams/entitiesNetwork'
<VideoProjector/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIDEO_PROJECTOR } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, VIDEO_PROJECTOR)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.video_projector;',
},
_width: 100,
_height: 35,
}
Video Projector Screen
- Preview
- Usage
- Definition
import { VideoProjectorScreen } from '@dinghy/diagrams/entitiesNetwork'
<VideoProjectorScreen/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIDEO_PROJECTOR_SCREEN } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, VIDEO_PROJECTOR_SCREEN)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.video_projector_screen;',
},
_width: 80,
_height: 100,
}
Virtual PC
- Preview
- Usage
- Definition
import { VirtualPc } from '@dinghy/diagrams/entitiesNetwork'
<VirtualPc/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIRTUAL_PC } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, VIRTUAL_PC)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.virtual_pc;',
},
_width: 115,
_height: 85,
}
Virtual Server
- Preview
- Usage
- Definition

import { VirtualServer } from '@dinghy/diagrams/entitiesNetwork'
<VirtualServer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIRTUAL_SERVER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, VIRTUAL_SERVER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.virtual_server;',
},
_width: 110,
_height: 120,
}
Virus
- Preview
- Usage
- Definition

import { Virus } from '@dinghy/diagrams/entitiesNetwork'
<Virus/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIRUS } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, VIRUS)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.virus;',
},
_original_width: 100,
_original_height: 90,
}
Web Server
- Preview
- Usage
- Definition

import { WebServer } from '@dinghy/diagrams/entitiesNetwork'
<WebServer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { WEB_SERVER } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, WEB_SERVER)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.web_server;',
},
_original_width: 105,
_original_height: 105,
}
Wireless Hub
- Preview
- Usage
- Definition
import { WirelessHub } from '@dinghy/diagrams/entitiesNetwork'
<WirelessHub/>
// or
import { extendStyle } from "@dinghy/base-components";
import { WIRELESS_HUB } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, WIRELESS_HUB)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.wireless_hub;',
},
_original_width: 100,
_original_height: 85,
}
Wireless Modem
- Preview
- Usage
- Definition
import { WirelessModem } from '@dinghy/diagrams/entitiesNetwork'
<WirelessModem/>
// or
import { extendStyle } from "@dinghy/base-components";
import { WIRELESS_MODEM } from '@dinghy/diagrams/entitiesNetwork'
<Shape
{...props}
_style={extendStyle(props, WIRELESS_MODEM)}
/>
{
_style: {
entity: 'fontColor=#0066CC;verticalAlign=top;verticalLabelPosition=bottom;labelPosition=center;align=center;html=1;outlineConnect=0;fillColor=#CCCCCC;strokeColor=#6881B3;gradientColor=none;gradientDirection=north;strokeWidth=2;shape=mxgraph.networks.wireless_modem;',
},
_original_width: 100,
_original_height: 85,
}