Software C4 Entities
Component
- Preview
- Usage
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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,
}