Standard General Entities

Actor

Preview
Usage
Definition

import { Actor } from '@dinghy/diagrams/entitiesGeneral'

<Actor/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACTOR } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;',
  },
  _width: 30,
  _height: 60,
}

And

Preview
Usage
Definition

import { And } from '@dinghy/diagrams/entitiesGeneral'

<And/>

// or

import { extendStyle } from "@dinghy/base-components";
import { AND } from '@dinghy/diagrams/entitiesGeneral'

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

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

Callout

Preview
Usage
Definition

import { Callout } from '@dinghy/diagrams/entitiesGeneral'

<Callout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CALLOUT } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=callout;whiteSpace=wrap;html=1;perimeter=calloutPerimeter;',
  },
  _width: 120,
  _height: 80,
}

Card

Preview
Usage
Definition

import { Card } from '@dinghy/diagrams/entitiesGeneral'

<Card/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD } from '@dinghy/diagrams/entitiesGeneral'

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

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

Circle

Preview
Usage
Definition

import { Circle } from '@dinghy/diagrams/entitiesGeneral'

<Circle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CIRCLE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'ellipse;whiteSpace=wrap;html=1;aspect=fixed;',
  },
  _original_width: 80,
  _original_height: 80,

}

Cloud

Preview
Usage
Definition

import { Cloud } from '@dinghy/diagrams/entitiesGeneral'

<Cloud/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOUD } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;',
  },
  _width: 120,
  _height: 80,
}

Container

Preview
Usage
Definition

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

<Container/>

// or

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

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

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

}

Container 2

Preview
Usage
Definition

import { Container2 } from '@dinghy/diagrams/entitiesGeneral'

<Container2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTAINER_2 } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'swimlane;whiteSpace=wrap;html=1;',
  },
  _original_width: 200,
  _original_height: 200,

}

Cube

Preview
Usage
Definition

import { Cube } from '@dinghy/diagrams/entitiesGeneral'

<Cube/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CUBE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;',
  },
  _width: 120,
  _height: 80,
}

Cylinder

Preview
Usage
Definition

import { Cylinder } from '@dinghy/diagrams/entitiesGeneral'

<Cylinder/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CYLINDER } from '@dinghy/diagrams/entitiesGeneral'

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

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

Data Storage

Preview
Usage
Definition

import { DataStorage } from '@dinghy/diagrams/entitiesGeneral'

<DataStorage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DATA_STORAGE } from '@dinghy/diagrams/entitiesGeneral'

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

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

Diamond

Preview
Usage
Definition

import { Diamond } from '@dinghy/diagrams/entitiesGeneral'

<Diamond/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAMOND } from '@dinghy/diagrams/entitiesGeneral'

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

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

}

Document

Preview
Usage
Definition

import { Document } from '@dinghy/diagrams/entitiesGeneral'

<Document/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOCUMENT } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=document;whiteSpace=wrap;html=1;boundedLbl=1;',
  },
  _width: 120,
  _height: 80,
}

Ellipse

Preview
Usage
Definition

import { Ellipse } from '@dinghy/diagrams/entitiesGeneral'

<Ellipse/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ELLIPSE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'ellipse;whiteSpace=wrap;html=1;',
  },
  _width: 120,
  _height: 80,
}

Hexagon

Preview
Usage
Definition

import { Hexagon } from '@dinghy/diagrams/entitiesGeneral'

<Hexagon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HEXAGON } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;',
  },
  _width: 120,
  _height: 80,
}

Horizontal Container

Preview
Usage
Definition

import { HorizontalContainer } from '@dinghy/diagrams/entitiesGeneral'

<HorizontalContainer/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_CONTAINER } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'swimlane;horizontal=0;whiteSpace=wrap;html=1;',
  },
  _original_width: 200,
  _original_height: 200,

}

Internal Storage

Preview
Usage
Definition

import { InternalStorage } from '@dinghy/diagrams/entitiesGeneral'

<InternalStorage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INTERNAL_STORAGE } from '@dinghy/diagrams/entitiesGeneral'

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

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

}

List

Preview
Usage
Definition

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

<List/>

// or

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

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

{
  _style: {
    entity: 'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;',
  },
  _width: 0,
  _height: 120,
}

List Item

Preview
Usage
Definition

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

<ListItem/>

// or

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

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

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

Note

Preview
Usage
Definition

import { Note } from '@dinghy/diagrams/entitiesGeneral'

<Note/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NOTE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;darkOpacity=0.05;',
  },
  _width: 80,
  _height: 100,
}

Or

Preview
Usage
Definition

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

<Or/>

// or

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

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

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

Parallelogram

Preview
Usage
Definition

import { Parallelogram } from '@dinghy/diagrams/entitiesGeneral'

<Parallelogram/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARALLELOGRAM } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fixedSize=1;',
  },
  _width: 120,
  _height: 60,
}

Process

Preview
Usage
Definition

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

<Process/>

// or

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

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

{
  _style: {
    entity: 'shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;',
  },
  _width: 120,
  _height: 60,
}

Rectangle

Preview
Usage
Definition

import { Rectangle } from '@dinghy/diagrams/entitiesGeneral'

<Rectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'rounded=0;whiteSpace=wrap;html=1;',
  },
  _width: 120,
  _height: 60,
}

Rounded Rectangle

Preview
Usage
Definition

import { RoundedRectangle } from '@dinghy/diagrams/entitiesGeneral'

<RoundedRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ROUNDED_RECTANGLE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;',
  },
  _width: 120,
  _height: 60,
}

Square

Preview
Usage
Definition

import { Square } from '@dinghy/diagrams/entitiesGeneral'

<Square/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SQUARE } from '@dinghy/diagrams/entitiesGeneral'

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

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

}

Step

Preview
Usage
Definition

import { Step } from '@dinghy/diagrams/entitiesGeneral'

<Step/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEP } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;',
  },
  _width: 120,
  _height: 80,
}

Tape

Preview
Usage
Definition

import { Tape } from '@dinghy/diagrams/entitiesGeneral'

<Tape/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TAPE } from '@dinghy/diagrams/entitiesGeneral'

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

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

Text

Preview
Usage
Definition

import { Text } from '@dinghy/diagrams/entitiesGeneral'

<Text/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;',
  },
  _width: 60,
  _height: 30,
}

Textbox

Preview
Usage
Definition

import { Textbox } from '@dinghy/diagrams/entitiesGeneral'

<Textbox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXTBOX } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;',
  },
  _width: 180,
  _height: 120,
}

Trapezoid

Preview
Usage
Definition

import { Trapezoid } from '@dinghy/diagrams/entitiesGeneral'

<Trapezoid/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRAPEZOID } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;fixedSize=1;',
  },
  _width: 120,
  _height: 60,
}

Triangle

Preview
Usage
Definition

import { Triangle } from '@dinghy/diagrams/entitiesGeneral'

<Triangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRIANGLE } from '@dinghy/diagrams/entitiesGeneral'

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

{
  _style: {
    entity: 'triangle;whiteSpace=wrap;html=1;',
  },
  _width: 60,
  _height: 80,
}

Actor​

And​

Callout​

Card​

Circle​

Cloud​

Container​

Container 2​

Cube​

Cylinder​

Data Storage​

Diamond​

Document​

Ellipse​

Hexagon​

Horizontal Container​

Internal Storage​

List​

List Item​

Note​

Or​

Parallelogram​

Process​

Rectangle​

Rounded Rectangle​

Square​

Step​

Tape​

Text​

Textbox​

Trapezoid​

Triangle​

Actor

And

Callout

Card

Circle

Cloud

Container

Container 2

Cube

Cylinder

Data Storage

Diamond

Document

Ellipse

Hexagon

Horizontal Container

Internal Storage

List

List Item

Note

Or

Parallelogram

Process

Rectangle

Rounded Rectangle

Square

Step

Tape

Text

Textbox

Trapezoid

Triangle