Standard Advanced Entities

Arrow Down

Preview
Usage
Definition

import { ArrowDown } from '@dinghy/diagrams/entitiesAdvanced'

<ArrowDown/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARROW_DOWN } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=singleArrow;direction=south;whiteSpace=wrap;html=1;',
  },
  _width: 60,
  _height: 100,
}

Arrow Left

Preview
Usage
Definition

import { ArrowLeft } from '@dinghy/diagrams/entitiesAdvanced'

<ArrowLeft/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARROW_LEFT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=singleArrow;direction=west;whiteSpace=wrap;html=1;',
  },
  _width: 100,
  _height: 60,
}

Arrow Right

Preview
Usage
Definition

import { ArrowRight } from '@dinghy/diagrams/entitiesAdvanced'

<ArrowRight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARROW_RIGHT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=singleArrow;whiteSpace=wrap;html=1;',
  },
  _width: 100,
  _height: 60,
}

Arrow Up

Preview
Usage
Definition

import { ArrowUp } from '@dinghy/diagrams/entitiesAdvanced'

<ArrowUp/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARROW_UP } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=singleArrow;direction=north;whiteSpace=wrap;html=1;',
  },
  _width: 60,
  _height: 100,
}

Collate

Preview
Usage
Definition

import { Collate } from '@dinghy/diagrams/entitiesAdvanced'

<Collate/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COLLATE } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Container

Preview
Usage
Definition

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

<Container/>

// or

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

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

{
  _style: {
    entity: 'swimlane;',
  },
  _original_width: 200,
  _original_height: 200,

}

Corner

Preview
Usage
Definition

import { Corner } from '@dinghy/diagrams/entitiesAdvanced'

<Corner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CORNER } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Cross

Preview
Usage
Definition

import { Cross } from '@dinghy/diagrams/entitiesAdvanced'

<Cross/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CROSS } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Data Store

Preview
Usage
Definition

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

<DataStore/>

// or

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

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

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

}

Delay

Preview
Usage
Definition

import { Delay } from '@dinghy/diagrams/entitiesAdvanced'

<Delay/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DELAY } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=delay;whiteSpace=wrap;html=1;',
  },
  _width: 80,
  _height: 40,
}

Display

Preview
Usage
Definition

import { Display } from '@dinghy/diagrams/entitiesAdvanced'

<Display/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISPLAY } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=display;whiteSpace=wrap;html=1;',
  },
  _width: 80,
  _height: 40,
}

Double Arrow

Preview
Usage
Definition

import { DoubleArrow } from '@dinghy/diagrams/entitiesAdvanced'

<DoubleArrow/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_ARROW } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=doubleArrow;whiteSpace=wrap;html=1;',
  },
  _width: 100,
  _height: 60,
}

Double Arrow Vertical

Preview
Usage
Definition

import { DoubleArrowVertical } from '@dinghy/diagrams/entitiesAdvanced'

<DoubleArrowVertical/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_ARROW_VERTICAL } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=doubleArrow;direction=south;whiteSpace=wrap;html=1;',
  },
  _width: 60,
  _height: 100,
}

Ellipse with horizontal divider

Preview
Usage
Definition

import { EllipseWithHorizontalDivider } from '@dinghy/diagrams/entitiesAdvanced'

<EllipseWithHorizontalDivider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ELLIPSE_WITH_HORIZONTAL_DIVIDER } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=lineEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;backgroundOutline=1;',
  },
  _original_width: 80,
  _original_height: 80,

}

Ellipse with vertical divider

Preview
Usage
Definition

import { EllipseWithVerticalDivider } from '@dinghy/diagrams/entitiesAdvanced'

<EllipseWithVerticalDivider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ELLIPSE_WITH_VERTICAL_DIVIDER } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=lineEllipse;line=vertical;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;backgroundOutline=1;',
  },
  _original_width: 80,
  _original_height: 80,

}

Horizontal Flow Layout

Preview
Usage
Definition

import { HorizontalFlowLayout } from '@dinghy/diagrams/entitiesAdvanced'

<HorizontalFlowLayout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FLOW_LAYOUT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;html=1;startSize=20;horizontal=0;childLayout=flowLayout;flowOrientation=west;resizable=0;interRankCellSpacing=50;containerType=tree;fontSize=12;',
  },
  _width: 0,
  _height: 150,
}

Horizontal Pool 1

Preview
Usage
Definition

import { HorizontalPool1 } from '@dinghy/diagrams/entitiesAdvanced'

<HorizontalPool1/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_POOL_1 } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;childLayout=stackLayout;resizeParent=1;resizeParentMax=0;horizontal=1;startSize=20;horizontalStack=0;html=1;',
  },
  _width: 480,
  _height: 380,
}

Horizontal Pool 2

Preview
Usage
Definition

import { HorizontalPool2 } from '@dinghy/diagrams/entitiesAdvanced'

<HorizontalPool2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_POOL_2 } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;childLayout=stackLayout;resizeParent=1;resizeParentMax=0;horizontal=0;startSize=20;horizontalStack=0;html=1;',
  },
  _width: 480,
  _height: 360,
}

Horizontal Tree Layout

Preview
Usage
Definition

import { HorizontalTreeLayout } from '@dinghy/diagrams/entitiesAdvanced'

<HorizontalTreeLayout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_TREE_LAYOUT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;startSize=20;horizontal=0;childLayout=treeLayout;horizontalTree=1;sortEdges=1;resizable=0;containerType=tree;fontSize=12;',
  },
  _width: 310,
  _height: 160,
}

List

Preview
Usage
Definition

import { List } from '@dinghy/diagrams/entitiesAdvanced'

<List/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;fillColor=none;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;html=1;',
  },
  _width: 0,
  _height: 110,
}

List Item

Preview
Usage
Definition

import { ListItem } from '@dinghy/diagrams/entitiesAdvanced'

<ListItem/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_ITEM } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;html=1;',
  },
  _width: 0,
  _height: 26,
}

Loop Limit

Preview
Usage
Definition

import { LoopLimit } from '@dinghy/diagrams/entitiesAdvanced'

<LoopLimit/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOOP_LIMIT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=loopLimit;whiteSpace=wrap;html=1;',
  },
  _width: 100,
  _height: 80,
}

Manual Input

Preview
Usage
Definition

import { ManualInput } from '@dinghy/diagrams/entitiesAdvanced'

<ManualInput/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MANUAL_INPUT } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Off Page Connector

Preview
Usage
Definition

import { OffPageConnector } from '@dinghy/diagrams/entitiesAdvanced'

<OffPageConnector/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OFF_PAGE_CONNECTOR } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Or

Preview
Usage
Definition

import { Or } from '@dinghy/diagrams/entitiesAdvanced'

<Or/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OR } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=orEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;backgroundOutline=1;',
  },
  _original_width: 80,
  _original_height: 80,

}

Process Bar

Preview
Usage
Definition

import { ProcessBar } from '@dinghy/diagrams/entitiesAdvanced'

<ProcessBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROCESS_BAR } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;childLayout=stackLayout;horizontal=1;fillColor=none;horizontalStack=1;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;strokeColor=none;stackBorder=10;stackSpacing=-12;resizable=1;align=center;points=[];whiteSpace=wrap;html=1;',
  },
  _width: 296,
  _height: 100,
}

Sort

Preview
Usage
Definition

import { Sort } from '@dinghy/diagrams/entitiesAdvanced'

<Sort/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SORT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=sortShape;perimeter=rhombusPerimeter;whiteSpace=wrap;html=1;',
  },
  _original_width: 80,
  _original_height: 80,

}

Sum

Preview
Usage
Definition

import { Sum } from '@dinghy/diagrams/entitiesAdvanced'

<Sum/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUM } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=sumEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;backgroundOutline=1;',
  },
  _original_width: 80,
  _original_height: 80,

}

Switch

Preview
Usage
Definition

import { Switch } from '@dinghy/diagrams/entitiesAdvanced'

<Switch/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

Tape Data

Preview
Usage
Definition

import { TapeData } from '@dinghy/diagrams/entitiesAdvanced'

<TapeData/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TAPE_DATA } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=tapeData;whiteSpace=wrap;html=1;perimeter=ellipsePerimeter;',
  },
  _original_width: 80,
  _original_height: 80,

}

Tee

Preview
Usage
Definition

import { Tee } from '@dinghy/diagrams/entitiesAdvanced'

<Tee/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEE } from '@dinghy/diagrams/entitiesAdvanced'

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

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

}

User

Preview
Usage
Definition

import { User } from '@dinghy/diagrams/entitiesAdvanced'

<User/>

// or

import { extendStyle } from "@dinghy/base-components";
import { USER } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'shape=actor;whiteSpace=wrap;html=1;',
  },
  _width: 40,
  _height: 60,
}

Vertical Flow Layout

Preview
Usage
Definition

import { VerticalFlowLayout } from '@dinghy/diagrams/entitiesAdvanced'

<VerticalFlowLayout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_FLOW_LAYOUT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;startSize=20;horizontal=1;childLayout=flowLayout;flowOrientation=north;resizable=0;interRankCellSpacing=50;containerType=tree;fontSize=12;',
  },
  _width: 0,
  _height: 280,
}

Vertical Pool 1

Preview
Usage
Definition

import { VerticalPool1 } from '@dinghy/diagrams/entitiesAdvanced'

<VerticalPool1/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_POOL_1 } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;childLayout=stackLayout;resizeParent=1;resizeParentMax=0;startSize=20;html=1;',
  },
  _width: 360,
  _height: 480,
}

Vertical Pool 2

Preview
Usage
Definition

import { VerticalPool2 } from '@dinghy/diagrams/entitiesAdvanced'

<VerticalPool2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_POOL_2 } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;childLayout=stackLayout;resizeParent=1;resizeParentMax=0;startSize=20;horizontal=0;horizontalStack=1;',
  },
  _width: 380,
  _height: 480,
}

Vertical Tree Layout

Preview
Usage
Definition

import { VerticalTreeLayout } from '@dinghy/diagrams/entitiesAdvanced'

<VerticalTreeLayout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_TREE_LAYOUT } from '@dinghy/diagrams/entitiesAdvanced'

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

{
  _style: {
    entity: 'swimlane;startSize=20;horizontal=1;childLayout=treeLayout;horizontalTree=0;sortEdges=1;resizable=0;containerType=tree;fontSize=12;',
  },
  _width: 280,
  _height: 190,
}

Arrow Down​

Arrow Left​

Arrow Right​

Arrow Up​

Collate​

Container​

Corner​

Cross​

Data Store​

Delay​

Display​

Double Arrow​

Double Arrow Vertical​

Ellipse with horizontal divider​

Ellipse with vertical divider​

Horizontal Flow Layout​

Horizontal Pool 1​

Horizontal Pool 2​

Horizontal Tree Layout​

List​

List Item​

Loop Limit​

Manual Input​

Off Page Connector​

Or​

Process Bar​

Sort​

Sum​

Switch​

Tape Data​

Tee​

User​

Vertical Flow Layout​

Vertical Pool 1​

Vertical Pool 2​

Vertical Tree Layout​

Arrow Down

Arrow Left

Arrow Right

Arrow Up

Collate

Container

Corner

Cross

Data Store

Delay

Display

Double Arrow

Double Arrow Vertical

Ellipse with horizontal divider

Ellipse with vertical divider

Horizontal Flow Layout

Horizontal Pool 1

Horizontal Pool 2

Horizontal Tree Layout

List

List Item

Loop Limit

Manual Input

Off Page Connector

Or

Process Bar

Sort

Sum

Switch

Tape Data

Tee

User

Vertical Flow Layout

Vertical Pool 1

Vertical Pool 2

Vertical Tree Layout