Software Data Flow Diagram Entities

Activity / Process / Entity / External Interactor

Preview

Usage

import { ActivityProcessEntityExternalInteractor } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<ActivityProcessEntityExternalInteractor/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACTIVITY_PROCESS_ENTITY_EXTERNAL_INTERACTOR } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 50,
}

Check

Preview

Usage

import { Check } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Check/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECK } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;size=0.25',
  },
  _width: 100,
  _height: 50,
}

Check 2

Preview

Usage

import { Check2 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Check2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECK_2 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.check2',
  },
  _width: 100,
  _height: 50,
}

Data Process

Preview

Usage

import { DataProcess } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DataProcess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_PROCESS } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;html=1;dashed=0;whiteSpace=wrap;perimeter=ellipsePerimeter;',
  },
  _original_width: 30,
  _original_height: 30,

}

Data Store

Preview

Usage

import { DataStore } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DataStore/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_STORE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=partialRectangle;right=0;left=0;',
  },
  _width: 100,
  _height: 30,
}

Data Store 2

Preview

Usage

import { DataStore2 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DataStore2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_STORE_2 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=partialRectangle;right=0;',
  },
  _width: 100,
  _height: 30,
}

Data Store 3

Preview

Usage

import { DataStore3 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DataStore3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_STORE_3 } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=cylinder;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;',
  },
  _width: 60,
  _height: 80,
}

Data Store with ID

Preview

Usage

import { DataStoreWithId } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DataStoreWithId/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_STORE_WITH_ID } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.dataStoreID;align=left;spacingLeft=3;points=[[0,0],[0.5,0],[1,0],[0,0.5],[1,0.5],[0,1],[0.5,1],[1,1]];',
  },
  _width: 100,
  _height: 30,
}

Decision / Entity Relationship

Preview

Usage

import { DecisionEntityRelationship } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<DecisionEntityRelationship/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DECISION_ENTITY_RELATIONSHIP } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=rhombus;html=1;dashed=0;whiteSpace=wrap;perimeter=rhombusPerimeter;',
  },
  _original_width: 60,
  _original_height: 50,

}

Entity

Preview

Usage

import { Entity } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Entity/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ENTITY } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=20;fillColor=#ffffff;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;swimlaneFillColor=#ffffff;',
  },
  _width: 100,
  _height: 50,
}

External Entity

Preview

Usage

import { ExternalEntity } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<ExternalEntity/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EXTERNAL_ENTITY } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.externalEntity',
  },
  _width: 0,
  _height: 100,
}

Final Report / Archive

Preview

Usage

import { FinalReportArchive } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<FinalReportArchive/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FINAL_REPORT_ARCHIVE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.archive',
  },
  _original_width: 60,
  _original_height: 60,

}

Information / Data Carrier / SOP

Preview

Usage

import { InformationDataCarrierSop } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<InformationDataCarrierSop/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFORMATION_DATA_CARRIER_SOP } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=document;whiteSpace=wrap;html=1;boundedLbl=1;dashed=0;flipH=1;',
  },
  _width: 100,
  _height: 70,
}

Information/Data Carrier/SOP / Stop State

Preview

Usage

import { InformationDataCarrierSopStopState } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<InformationDataCarrierSopStopState/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFORMATION_DATA_CARRIER_SOP_STOP_STATE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'triangle;whiteSpace=wrap;html=1;dashed=0;direction=south;',
  },
  _original_width: 60,
  _original_height: 60,

}

Loop

Preview

Usage

import { Loop } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Loop/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOOP } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.loop',
  },
  _width: 80,
  _height: 30,
}

Multiple Process / Start State / Multi State

Preview

Usage

import { MultipleProcessStartStateMultiState } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<MultipleProcessStartStateMultiState/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MULTIPLE_PROCESS_START_STATE_MULTI_STATE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'ellipse;shape=doubleEllipse;html=1;dashed=0;whiteSpace=wrap;aspect=fixed;',
  },
  _original_width: 60,
  _original_height: 60,

}

Object

Preview

Usage

import { Object } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Object/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OBJECT } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=cloud;whiteSpace=wrap;html=1;',
  },
  _original_width: 120,
  _original_height: 120,

}

Order / Command

Preview

Usage

import { OrderCommand } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<OrderCommand/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ORDER_COMMAND } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=manualInput;whiteSpace=wrap;html=1;dashed=0;size=15;',
  },
  _width: 100,
  _height: 50,
}

Product / Result

Preview

Usage

import { ProductResult } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<ProductResult/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRODUCT_RESULT } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;dashed=0;',
  },
  _width: 100,
  _height: 50,
}

Reference

Preview

Usage

import { Reference } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<Reference/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REFERENCE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;html=1;dashed=0;whiteSpace=wrap;aspect=fixed;perimeter=ellipsePerimeter;',
  },
  _original_width: 30,
  _original_height: 30,

}

Start / End

Preview

Usage

import { StartEnd } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<StartEnd/>

// or

import { extendStyle } from "@dinghy/base-components";
import { START_END } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'html=1;dashed=0;whiteSpace=wrap;shape=mxgraph.dfd.start',
  },
  _width: 80,
  _height: 30,
}

Stop State

Preview

Usage

import { StopState } from '@dinghy/diagrams/entitiesDataFlowDiagram'

<StopState/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STOP_STATE } from '@dinghy/diagrams/entitiesDataFlowDiagram'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;html=1;dashed=0;whiteSpace=wrap;aspect=fixed;strokeWidth=5;perimeter=ellipsePerimeter;',
  },
  _original_width: 60,
  _original_height: 60,

}