Software C4 Entities

Component

Preview

Usage

import { Component } from '@dinghy/diagrams/entitiesC4'

<Component/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#63BEF2;fontColor=#ffffff;align=center;arcSize=6;strokeColor=#2086C9;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 120,
}

Container

Preview

Usage

import { Container } from '@dinghy/diagrams/entitiesC4'

<Container/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTAINER } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;fontSize=11;labelBackgroundColor=none;fillColor=#23A2D9;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0E7DAD;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 120,
}

Data Container

Preview

Usage

import { DataContainer } from '@dinghy/diagrams/entitiesC4'

<DataContainer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_CONTAINER } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'shape=cylinder3;size=15;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;',
  },
  _width: 0,
  _height: 120,
}

External Person

Preview

Usage

import { ExternalPerson } from '@dinghy/diagrams/entitiesC4'

<ExternalPerson/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EXTERNAL_PERSON } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'html=1;fontSize=11;dashed=0;whiteSpace=wrap;fillColor=#6C6477;strokeColor=#4D4D4D;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;',
  },
  _width: 0,
  _height: 180,
}

External Software System

Preview

Usage

import { ExternalSoftwareSystem } from '@dinghy/diagrams/entitiesC4'

<ExternalSoftwareSystem/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EXTERNAL_SOFTWARE_SYSTEM } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#8C8496;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#736782;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 120,
}

Message Bus Container

Preview

Usage

import { MessageBusContainer } from '@dinghy/diagrams/entitiesC4'

<MessageBusContainer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE_BUS_CONTAINER } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'shape=cylinder3;size=15;direction=south;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;',
  },
  _width: 0,
  _height: 120,
}

Microservice Container

Preview

Usage

import { MicroserviceContainer } from '@dinghy/diagrams/entitiesC4'

<MicroserviceContainer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MICROSERVICE_CONTAINER } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'shape=hexagon;size=50;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;rounded=1;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;',
  },
  _width: 0,
  _height: 170,
}

Person

Preview

Usage

import { Person } from '@dinghy/diagrams/entitiesC4'

<Person/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PERSON } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'html=1;fontSize=11;dashed=0;whiteSpace=wrap;fillColor=#083F75;strokeColor=#06315C;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;',
  },
  _width: 0,
  _height: 180,
}

Software System

Preview

Usage

import { SoftwareSystem } from '@dinghy/diagrams/entitiesC4'

<SoftwareSystem/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SOFTWARE_SYSTEM } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#1061B0;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0D5091;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 120,
}

System Context diagram title

Preview

Usage

import { SystemContextDiagramTitle } from '@dinghy/diagrams/entitiesC4'

<SystemContextDiagramTitle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SYSTEM_CONTEXT_DIAGRAM_TITLE } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 40,
}

System scope boundary

Preview

Usage

import { SystemScopeBoundary } from '@dinghy/diagrams/entitiesC4'

<SystemScopeBoundary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SYSTEM_SCOPE_BOUNDARY } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];',
  },
  _width: 0,
  _height: 210,
}

Web Browser Container

Preview

Usage

import { WebBrowserContainer } from '@dinghy/diagrams/entitiesC4'

<WebBrowserContainer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WEB_BROWSER_CONTAINER } from '@dinghy/diagrams/entitiesC4'

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

Definition

{
  _style: {
    entity: 'shape=mxgraph.c4.webBrowserContainer2;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;strokeColor=#118ACD;fillColor=#23A2D9;strokeColor=#118ACD;strokeColor2=#0E7DAD;fontSize=12;fontColor=#ffffff;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;',
  },
  _width: 0,
  _height: 160,
}