Archimate3 Technology Entities
Artifact
- Preview
- Usage
- Definition
import { Artifact } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Artifact/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ARTIFACT } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, ARTIFACT)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=artifact;archiType=square;',
},
_width: 150,
_height: 75,
}
Artifact 2
- Preview
- Usage
- Definition
import { Artifact2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Artifact2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ARTIFACT_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, ARTIFACT_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=note;size=14;',
},
_width: 70,
_height: 35,
}
Collaboration
- Preview
- Usage
- Definition
import { Collaboration } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Collaboration/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COLLABORATION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, COLLABORATION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.collaboration;',
},
_width: 60,
_height: 35,
}
Communication Network
- Preview
- Usage
- Definition
import { CommunicationNetwork } from '@dinghy/diagrams/entitiesArchimate3Technology'
<CommunicationNetwork/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COMMUNICATION_NETWORK } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, COMMUNICATION_NETWORK)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=netw;archiType=square;',
},
_width: 150,
_height: 75,
}
Communication Network 2
- Preview
- Usage
- Definition
import { CommunicationNetwork2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<CommunicationNetwork2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { COMMUNICATION_NETWORK_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, COMMUNICATION_NETWORK_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.network;',
},
_original_width: 65,
_original_height: 50,
}
Device
- Preview
- Usage
- Definition
import { Device } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Device/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DEVICE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, DEVICE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=device;',
},
_width: 150,
_height: 75,
}
Device 2
- Preview
- Usage
- Definition
import { Device2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Device2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DEVICE_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, DEVICE_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.device;',
},
_width: 70,
_height: 35,
}
Distribution Network
- Preview
- Usage
- Definition
import { DistributionNetwork } from '@dinghy/diagrams/entitiesArchimate3Technology'
<DistributionNetwork/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DISTRIBUTION_NETWORK } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, DISTRIBUTION_NETWORK)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=distribution;archiType=square;',
},
_width: 150,
_height: 75,
}
Distribution Network 2
- Preview
- Usage
- Definition
import { DistributionNetwork2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<DistributionNetwork2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DISTRIBUTION_NETWORK_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, DISTRIBUTION_NETWORK_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.distribution;strokeWidth=4;',
},
_width: 70,
_height: 30,
}
Equipment
- Preview
- Usage
- Definition
import { Equipment } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Equipment/>
// or
import { extendStyle } from "@dinghy/base-components";
import { EQUIPMENT } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, EQUIPMENT)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=equipment;archiType=square;',
},
_width: 150,
_height: 75,
}
Equipment 2
- Preview
- Usage
- Definition

import { Equipment2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Equipment2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { EQUIPMENT_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, EQUIPMENT_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.equipment;',
},
_original_width: 50,
_original_height: 50,
}
Event
- Preview
- Usage
- Definition
import { Event } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Event/>
// or
import { extendStyle } from "@dinghy/base-components";
import { EVENT } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, EVENT)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.event;',
},
_width: 60,
_height: 35,
}
Facility
- Preview
- Usage
- Definition
import { Facility } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Facility/>
// or
import { extendStyle } from "@dinghy/base-components";
import { FACILITY } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, FACILITY)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=facility;archiType=square;',
},
_width: 150,
_height: 75,
}
Facility 2
- Preview
- Usage
- Definition
import { Facility2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Facility2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { FACILITY_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, FACILITY_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.facility;',
},
_width: 60,
_height: 40,
}
Function
- Preview
- Usage
- Definition
import { Function } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Function/>
// or
import { extendStyle } from "@dinghy/base-components";
import { FUNCTION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, FUNCTION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.function;',
},
_width: 60,
_height: 40,
}
Interaction
- Preview
- Usage
- Definition
import { Interaction } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Interaction/>
// or
import { extendStyle } from "@dinghy/base-components";
import { INTERACTION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, INTERACTION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.interaction;',
},
_original_width: 40,
_original_height: 40,
}
Interface
- Preview
- Usage
- Definition
import { Interface } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Interface/>
// or
import { extendStyle } from "@dinghy/base-components";
import { INTERFACE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, INTERFACE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.interface;',
},
_width: 70,
_height: 35,
}
Material
- Preview
- Usage
- Definition
import { Material } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Material/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MATERIAL } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, MATERIAL)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=material;archiType=square;',
},
_width: 150,
_height: 75,
}
Material 2
- Preview
- Usage
- Definition
import { Material2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Material2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { MATERIAL_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, MATERIAL_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.material;',
},
_original_width: 60,
_original_height: 50,
}
Node
- Preview
- Usage
- Definition
import { Node } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Node/>
// or
import { extendStyle } from "@dinghy/base-components";
import { NODE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, NODE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=node;archiType=square;',
},
_width: 150,
_height: 75,
}
Node 2
- Preview
- Usage
- Definition
import { Node2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Node2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { NODE_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, NODE_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.node;',
},
_width: 70,
_height: 40,
}
Path
- Preview
- Usage
- Definition
import { Path } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Path/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PATH } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, PATH)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=path;archiType=square;',
},
_width: 150,
_height: 75,
}
Path 2
- Preview
- Usage
- Definition
import { Path2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Path2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PATH_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, PATH_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.path;strokeWidth=6;',
},
_width: 100,
_height: 30,
}
Process
- Preview
- Usage
- Definition
import { Process } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Process/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PROCESS } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, PROCESS)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.process;',
},
_width: 70,
_height: 35,
}
Service
- Preview
- Usage
- Definition
import { Service } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Service/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SERVICE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, SERVICE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.service;',
},
_width: 60,
_height: 35,
}
System Software
- Preview
- Usage
- Definition
import { SystemSoftware } from '@dinghy/diagrams/entitiesArchimate3Technology'
<SystemSoftware/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SYSTEM_SOFTWARE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, SYSTEM_SOFTWARE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=sysSw;archiType=square;',
},
_width: 150,
_height: 75,
}
System Software 2
- Preview
- Usage
- Definition
import { SystemSoftware2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<SystemSoftware2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { SYSTEM_SOFTWARE_2 } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, SYSTEM_SOFTWARE_2)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.sysSw;',
},
_original_width: 40,
_original_height: 40,
}
Technology Collaboration
- Preview
- Usage
- Definition
import { TechnologyCollaboration } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyCollaboration/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_COLLABORATION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_COLLABORATION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=collab;archiType=square;',
},
_width: 150,
_height: 75,
}
Technology Event
- Preview
- Usage
- Definition
import { TechnologyEvent } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyEvent/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_EVENT } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_EVENT)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=event;archiType=rounded',
},
_width: 150,
_height: 75,
}
Technology Function
- Preview
- Usage
- Definition
import { TechnologyFunction } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyFunction/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_FUNCTION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_FUNCTION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=func;archiType=square;',
},
_width: 150,
_height: 75,
}
Technology Interaction
- Preview
- Usage
- Definition
import { TechnologyInteraction } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyInteraction/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_INTERACTION } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_INTERACTION)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=interaction;archiType=rounded;',
},
_width: 150,
_height: 75,
}
Technology Interface
- Preview
- Usage
- Definition
import { TechnologyInterface } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyInterface/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_INTERFACE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_INTERFACE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=interface;archiType=square;',
},
_width: 150,
_height: 75,
}
Technology Process
- Preview
- Usage
- Definition
import { TechnologyProcess } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyProcess/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_PROCESS } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_PROCESS)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=proc;archiType=rounded;',
},
_width: 150,
_height: 75,
}
Technology Service
- Preview
- Usage
- Definition
import { TechnologyService } from '@dinghy/diagrams/entitiesArchimate3Technology'
<TechnologyService/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TECHNOLOGY_SERVICE } from '@dinghy/diagrams/entitiesArchimate3Technology'
<Shape
{...props}
_style={extendStyle(props, TECHNOLOGY_SERVICE)}
/>
{
_style: {
entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#AFFFAF;shape=mxgraph.archimate3.application;appType=serv;archiType=rounded',
},
_width: 150,
_height: 75,
}