Business ArchiMate 2.1 Entities

Application Collaboration

Preview
Usage
Definition

import { ApplicationCollaboration } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationCollaboration/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_COLLABORATION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_COLLABORATION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=collab',
  },
  _width: 100,
  _height: 75,
}

Application Component

Preview
Usage
Definition

import { ApplicationComponent } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationComponent/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_COMPONENT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_COMPONENT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=comp',
  },
  _width: 100,
  _height: 75,
}

Application Function

Preview
Usage
Definition

import { ApplicationFunction } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationFunction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_FUNCTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_FUNCTION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=function',
  },
  _width: 100,
  _height: 75,
}

Application Interaction

Preview
Usage
Definition

import { ApplicationInteraction } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationInteraction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_INTERACTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_INTERACTION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=interaction',
  },
  _width: 100,
  _height: 75,
}

Application Interface

Preview
Usage
Definition

import { ApplicationInterface } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationInterface/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_INTERFACE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_INTERFACE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=interface',
  },
  _width: 100,
  _height: 75,
}

Application Interface 2

Preview
Usage
Definition

import { ApplicationInterface2 } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationInterface2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_INTERFACE_2 } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_INTERFACE_2)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=interface2',
  },
  _width: 100,
  _height: 75,
}

Application Service

Preview
Usage
Definition

import { ApplicationService } from '@dinghy/diagrams/entitiesArchimate2'

<ApplicationService/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APPLICATION_SERVICE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, APPLICATION_SERVICE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.application;appType=service',
  },
  _width: 100,
  _height: 75,
}

Artifact

Preview
Usage
Definition

import { Artifact } from '@dinghy/diagrams/entitiesArchimate2'

<Artifact/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARTIFACT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, ARTIFACT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=artifact',
  },
  _width: 100,
  _height: 75,
}

Assessment

Preview
Usage
Definition

import { Assessment } from '@dinghy/diagrams/entitiesArchimate2'

<Assessment/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ASSESSMENT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, ASSESSMENT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffccff;shape=mxgraph.archimate.motiv;motivType=assess',
  },
  _width: 100,
  _height: 75,
}

Business Actor

Preview
Usage
Definition

import { BusinessActor } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessActor/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_ACTOR } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_ACTOR)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.application;appType=actor',
  },
  _width: 100,
  _height: 75,
}

Business Collaboration

Preview
Usage
Definition

import { BusinessCollaboration } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessCollaboration/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_COLLABORATION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_COLLABORATION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.application;appType=collab',
  },
  _width: 100,
  _height: 75,
}

Business Event

Preview
Usage
Definition

import { BusinessEvent } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessEvent/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_EVENT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_EVENT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.business;busType=event',
  },
  _width: 100,
  _height: 75,
}

Business Function

Preview
Usage
Definition

import { BusinessFunction } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessFunction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_FUNCTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_FUNCTION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.business;busType=function',
  },
  _width: 100,
  _height: 75,
}

Business Interaction

Preview
Usage
Definition

import { BusinessInteraction } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessInteraction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_INTERACTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_INTERACTION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.business;busType=interaction',
  },
  _width: 100,
  _height: 75,
}

Business Interface

Preview
Usage
Definition

import { BusinessInterface } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessInterface/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_INTERFACE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_INTERFACE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.application;appType=interface',
  },
  _width: 100,
  _height: 75,
}

Business Interface 2

Preview
Usage
Definition

import { BusinessInterface2 } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessInterface2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_INTERFACE_2 } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_INTERFACE_2)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.application;appType=interface2',
  },
  _width: 100,
  _height: 75,
}

Business Object

Preview
Usage
Definition

import { BusinessObject } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessObject/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_OBJECT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_OBJECT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.businessObject;overflow=fill',
  },
  _width: 100,
  _height: 75,
}

Business Process

Preview
Usage
Definition

import { BusinessProcess } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessProcess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_PROCESS } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_PROCESS)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.business;busType=process',
  },
  _width: 100,
  _height: 75,
}

Business Role

Preview
Usage
Definition

import { BusinessRole } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessRole/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_ROLE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_ROLE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.application;appType=role',
  },
  _width: 100,
  _height: 75,
}

Business Service

Preview
Usage
Definition

import { BusinessService } from '@dinghy/diagrams/entitiesArchimate2'

<BusinessService/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUSINESS_SERVICE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, BUSINESS_SERVICE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.business;busType=service',
  },
  _width: 100,
  _height: 75,
}

Communications Path

Preview
Usage
Definition

import { CommunicationsPath } from '@dinghy/diagrams/entitiesArchimate2'

<CommunicationsPath/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMMUNICATIONS_PATH } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, COMMUNICATIONS_PATH)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=commPath',
  },
  _width: 100,
  _height: 75,
}

Constraint

Preview
Usage
Definition

import { Constraint } from '@dinghy/diagrams/entitiesArchimate2'

<Constraint/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONSTRAINT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, CONSTRAINT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ccccff;shape=mxgraph.archimate.motiv;motivType=const',
  },
  _width: 100,
  _height: 75,
}

Data Object

Preview
Usage
Definition

import { DataObject } from '@dinghy/diagrams/entitiesArchimate2'

<DataObject/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_OBJECT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, DATA_OBJECT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ffff;shape=mxgraph.archimate.businessObject;overflow=fill',
  },
  _width: 100,
  _height: 75,
}

Deliverable

Preview
Usage
Definition

import { Deliverable } from '@dinghy/diagrams/entitiesArchimate2'

<Deliverable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DELIVERABLE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, DELIVERABLE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffe0e0;shape=mxgraph.archimate.representation',
  },
  _width: 100,
  _height: 75,
}

Device

Preview
Usage
Definition

import { Device } from '@dinghy/diagrams/entitiesArchimate2'

<Device/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DEVICE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, DEVICE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.tech;techType=device',
  },
  _width: 100,
  _height: 75,
}

Driver

Preview
Usage
Definition

import { Driver } from '@dinghy/diagrams/entitiesArchimate2'

<Driver/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DRIVER } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, DRIVER)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffccff;shape=mxgraph.archimate.motiv;motivType=driver',
  },
  _width: 100,
  _height: 75,
}

Gap

Preview
Usage
Definition

import { Gap } from '@dinghy/diagrams/entitiesArchimate2'

<Gap/>

// or

import { extendStyle } from "@dinghy/base-components";
import { GAP } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, GAP)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.gap',
  },
  _width: 100,
  _height: 75,
}

Goal

Preview
Usage
Definition

import { Goal } from '@dinghy/diagrams/entitiesArchimate2'

<Goal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { GOAL } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, GOAL)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ccccff;shape=mxgraph.archimate.motiv;motivType=goal',
  },
  _width: 100,
  _height: 75,
}

Grouping

Preview
Usage
Definition

import { Grouping } from '@dinghy/diagrams/entitiesArchimate2'

<Grouping/>

// or

import { extendStyle } from "@dinghy/base-components";
import { GROUPING } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, GROUPING)}
  />

{
  _style: {
    entity: 'swimlane;html=1;fillColor=#ffffff;whiteSpace=wrap',
  },
  _width: 100,
  _height: 75,
}

Infrastructure Function

Preview
Usage
Definition

import { InfrastructureFunction } from '@dinghy/diagrams/entitiesArchimate2'

<InfrastructureFunction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFRASTRUCTURE_FUNCTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, INFRASTRUCTURE_FUNCTION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.business;busType=function',
  },
  _width: 100,
  _height: 75,
}

Infrastructure Interface

Preview
Usage
Definition

import { InfrastructureInterface } from '@dinghy/diagrams/entitiesArchimate2'

<InfrastructureInterface/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFRASTRUCTURE_INTERFACE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, INFRASTRUCTURE_INTERFACE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=interface',
  },
  _width: 100,
  _height: 75,
}

Infrastructure Interface 2

Preview
Usage
Definition

import { InfrastructureInterface2 } from '@dinghy/diagrams/entitiesArchimate2'

<InfrastructureInterface2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFRASTRUCTURE_INTERFACE_2 } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, INFRASTRUCTURE_INTERFACE_2)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=interface2',
  },
  _width: 100,
  _height: 75,
}

Infrastructure Service

Preview
Usage
Definition

import { InfrastructureService } from '@dinghy/diagrams/entitiesArchimate2'

<InfrastructureService/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFRASTRUCTURE_SERVICE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, INFRASTRUCTURE_SERVICE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.business;busType=service',
  },
  _width: 100,
  _height: 75,
}

Junction

Preview
Usage
Definition

import { Junction } from '@dinghy/diagrams/entitiesArchimate2'

<Junction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JUNCTION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, JUNCTION)}
  />

{
  _style: {
    entity: 'ellipse;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;fillColor=strokeColor',
  },
  _original_width: 10,
  _original_height: 10,

}

Location

Preview
Usage
Definition

import { Location } from '@dinghy/diagrams/entitiesArchimate2'

<Location/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOCATION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, LOCATION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.location',
  },
  _width: 100,
  _height: 75,
}

Meaning

Preview
Usage
Definition

import { Meaning } from '@dinghy/diagrams/entitiesArchimate2'

<Meaning/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MEANING } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, MEANING)}
  />

{
  _style: {
    entity: 'fillColor=#ffff99;whiteSpace=wrap;shape=cloud;html=1;',
  },
  _width: 100,
  _height: 75,
}

Network

Preview
Usage
Definition

import { Network } from '@dinghy/diagrams/entitiesArchimate2'

<Network/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NETWORK } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, NETWORK)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=network',
  },
  _width: 100,
  _height: 75,
}

Node

Preview
Usage
Definition

import { Node } from '@dinghy/diagrams/entitiesArchimate2'

<Node/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NODE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, NODE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=node',
  },
  _width: 100,
  _height: 75,
}

Plateau

Preview
Usage
Definition

import { Plateau } from '@dinghy/diagrams/entitiesArchimate2'

<Plateau/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PLATEAU } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, PLATEAU)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.tech;techType=plateau',
  },
  _width: 100,
  _height: 75,
}

Principle

Preview
Usage
Definition

import { Principle } from '@dinghy/diagrams/entitiesArchimate2'

<Principle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRINCIPLE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, PRINCIPLE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ccccff;shape=mxgraph.archimate.motiv;motivType=princ',
  },
  _width: 100,
  _height: 75,
}

Product

Preview
Usage
Definition

import { Product } from '@dinghy/diagrams/entitiesArchimate2'

<Product/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRODUCT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, PRODUCT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.product;overflow=fill',
  },
  _width: 100,
  _height: 75,
}

Representation

Preview
Usage
Definition

import { Representation } from '@dinghy/diagrams/entitiesArchimate2'

<Representation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REPRESENTATION } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, REPRESENTATION)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffff99;shape=mxgraph.archimate.representation',
  },
  _width: 100,
  _height: 75,
}

Requirement

Preview
Usage
Definition

import { Requirement } from '@dinghy/diagrams/entitiesArchimate2'

<Requirement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REQUIREMENT } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, REQUIREMENT)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ccccff;shape=mxgraph.archimate.motiv;motivType=req',
  },
  _width: 100,
  _height: 75,
}

Stakeholder

Preview
Usage
Definition

import { Stakeholder } from '@dinghy/diagrams/entitiesArchimate2'

<Stakeholder/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STAKEHOLDER } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, STAKEHOLDER)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffccff;shape=mxgraph.archimate.motiv;motivType=stake',
  },
  _width: 100,
  _height: 75,
}

System Software

Preview
Usage
Definition

import { SystemSoftware } from '@dinghy/diagrams/entitiesArchimate2'

<SystemSoftware/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SYSTEM_SOFTWARE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, SYSTEM_SOFTWARE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#99ff99;shape=mxgraph.archimate.application;appType=sysSw',
  },
  _width: 100,
  _height: 75,
}

Value

Preview
Usage
Definition

import { Value } from '@dinghy/diagrams/entitiesArchimate2'

<Value/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VALUE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, VALUE)}
  />

{
  _style: {
    entity: 'fillColor=#ffff99;whiteSpace=wrap;shape=ellipse;html=1;',
  },
  _width: 100,
  _height: 56.25,
}

Work Package

Preview
Usage
Definition

import { WorkPackage } from '@dinghy/diagrams/entitiesArchimate2'

<WorkPackage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WORK_PACKAGE } from '@dinghy/diagrams/entitiesArchimate2'

<Shape 
  {...props}
  _style={extendStyle(props, WORK_PACKAGE)}
  />

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#ffe0e0;shape=mxgraph.archimate.rounded=1',
  },
  _width: 100,
  _height: 75,
}

Application Collaboration​

Application Component​

Application Function​

Application Interaction​

Application Interface​

Application Interface 2​

Application Service​

Artifact​

Assessment​

Business Actor​

Business Collaboration​

Business Event​

Business Function​

Business Interaction​

Business Interface​

Business Interface 2​

Business Object​

Business Process​

Business Role​

Business Service​

Communications Path​

Constraint​

Data Object​

Deliverable​

Device​

Driver​

Gap​

Goal​

Grouping​

Infrastructure Function​

Infrastructure Interface​

Infrastructure Interface 2​

Infrastructure Service​

Junction​

Location​

Meaning​

Network​

Node​

Plateau​

Principle​

Product​

Representation​

Requirement​

Stakeholder​

System Software​

Value​

Work Package​

Application Collaboration

Application Component

Application Function

Application Interaction

Application Interface

Application Interface 2

Application Service

Artifact

Assessment

Business Actor

Business Collaboration

Business Event

Business Function

Business Interaction

Business Interface

Business Interface 2

Business Object

Business Process

Business Role

Business Service

Communications Path

Constraint

Data Object

Deliverable

Device

Driver

Gap

Goal

Grouping

Infrastructure Function

Infrastructure Interface

Infrastructure Interface 2

Infrastructure Service

Junction

Location

Meaning

Network

Node

Plateau

Principle

Product

Representation

Requirement

Stakeholder

System Software

Value

Work Package