Archimate3 Generic Entities

Collaboration

Preview
Usage
Definition

import { Collaboration } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Collaboration/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COLLABORATION } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=collab;archiType=square;',
  },
  _width: 150,
  _height: 75,
}

Collaboration 2

Preview
Usage
Definition

import { Collaboration2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Collaboration2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COLLABORATION_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.collaboration;',
  },
  _width: 60,
  _height: 35,
}

Event

Preview
Usage
Definition

import { Event } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Event/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EVENT } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=event;archiType=rounded',
  },
  _width: 150,
  _height: 75,
}

Event 2

Preview
Usage
Definition

import { Event2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Event2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EVENT_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.event;',
  },
  _width: 60,
  _height: 35,
}

Function

Preview
Usage
Definition

import { Function } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Function/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FUNCTION } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=func;archiType=rounded;',
  },
  _width: 150,
  _height: 75,
}

Function 2

Preview
Usage
Definition

import { Function2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Function2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FUNCTION_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.function;',
  },
  _original_width: 45,
  _original_height: 45,

}

Grouping

Preview
Usage
Definition

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

<Grouping/>

// or

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

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;shape=mxgraph.archimate3.application;appType=grouping;archiType=square;dashed=1;fillColor=none;',
  },
  _width: 150,
  _height: 75,
}

Grouping 2

Preview
Usage
Definition

import { Grouping2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Grouping2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { GROUPING_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;shape=mxgraph.archimate3.grouping;fillColor=none;dashed=1;',
  },
  _width: 60,
  _height: 35,
}

Interaction

Preview
Usage
Definition

import { Interaction } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Interaction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERACTION } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=interaction;archiType=rounded;',
  },
  _width: 150,
  _height: 75,
}

Interaction 2

Preview
Usage
Definition

import { Interaction2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Interaction2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERACTION_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.interaction;',
  },
  _original_width: 45,
  _original_height: 45,

}

Interface

Preview
Usage
Definition

import { Interface } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Interface/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERFACE } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=interface;archiType=square;',
  },
  _width: 150,
  _height: 75,
}

Interface 2

Preview
Usage
Definition

import { Interface2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Interface2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERFACE_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.interface;',
  },
  _width: 70,
  _height: 35,
}

Internal Active Structure Element

Preview
Usage
Definition

import { InternalActiveStructureElement } from '@dinghy/diagrams/entitiesArchimate3Generic'

<InternalActiveStructureElement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERNAL_ACTIVE_STRUCTURE_ELEMENT } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=generic;archiType=square;',
  },
  _width: 150,
  _height: 75,
}

Internal Behavior Element

Preview
Usage
Definition

import { InternalBehaviorElement } from '@dinghy/diagrams/entitiesArchimate3Generic'

<InternalBehaviorElement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERNAL_BEHAVIOR_ELEMENT } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=generic;archiType=rounded;',
  },
  _width: 150,
  _height: 75,
}

Location

Preview
Usage
Definition

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

<Location/>

// or

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

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;shape=mxgraph.archimate3.application;appType=location;archiType=square;fillColor=#efd1e4;',
  },
  _width: 150,
  _height: 75,
}

Location 2

Preview
Usage
Definition

import { Location2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Location2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOCATION_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;shape=mxgraph.archimate3.locationIcon;fillColor=#efd1e4;aspect=fixed;',
  },
  _width: 35,
  _height: 50,
}

Motivation Element

Preview
Usage
Definition

import { MotivationElement } from '@dinghy/diagrams/entitiesArchimate3Generic'

<MotivationElement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MOTIVATION_ELEMENT } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=generic;archiType=oct;',
  },
  _width: 150,
  _height: 75,
}

Passive Structure Element

Preview
Usage
Definition

import { PassiveStructureElement } from '@dinghy/diagrams/entitiesArchimate3Generic'

<PassiveStructureElement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PASSIVE_STRUCTURE_ELEMENT } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=passive;archiType=square',
  },
  _width: 150,
  _height: 75,
}

Passive Structure Element 2

Preview
Usage
Definition

import { PassiveStructureElement2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<PassiveStructureElement2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PASSIVE_STRUCTURE_ELEMENT_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.passive;',
  },
  _width: 60,
  _height: 35,
}

Process

Preview
Usage
Definition

import { Process } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Process/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROCESS } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=proc;archiType=rounded;',
  },
  _width: 150,
  _height: 75,
}

Process 2

Preview
Usage
Definition

import { Process2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Process2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROCESS_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.process;',
  },
  _width: 60,
  _height: 35,
}

Service

Preview
Usage
Definition

import { Service } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Service/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SERVICE } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.application;appType=serv;archiType=rounded',
  },
  _width: 150,
  _height: 75,
}

Service 2

Preview
Usage
Definition

import { Service2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

<Service2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SERVICE_2 } from '@dinghy/diagrams/entitiesArchimate3Generic'

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

{
  _style: {
    entity: 'html=1;outlineConnect=0;whiteSpace=wrap;fillColor=#EBEBEB;shape=mxgraph.archimate3.service;',
  },
  _width: 60,
  _height: 35,
}

Collaboration​

Collaboration 2​

Event​

Event 2​

Function​

Function 2​

Grouping​

Grouping 2​

Interaction​

Interaction 2​

Interface​

Interface 2​

Internal Active Structure Element​

Internal Behavior Element​

Location​

Location 2​

Motivation Element​

Passive Structure Element​

Passive Structure Element 2​

Process​

Process 2​

Service​

Service 2​

Collaboration

Collaboration 2

Event

Event 2

Function

Function 2

Grouping

Grouping 2

Interaction

Interaction 2

Interface

Interface 2

Internal Active Structure Element

Internal Behavior Element

Location

Location 2

Motivation Element

Passive Structure Element

Passive Structure Element 2

Process

Process 2

Service

Service 2