Standard Misc Entities
Cross-Functional Flowchart
- Preview
- Usage
- Definition
import { CrossFunctionalFlowchart } from '@dinghy/diagrams/entitiesMisc'
<CrossFunctionalFlowchart/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CROSS_FUNCTIONAL_FLOWCHART } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, CROSS_FUNCTIONAL_FLOWCHART)}
/>
{
_style: {
entity: 'shape=table;childLayout=tableLayout;startSize=40;collapsible=0;recursiveResize=0;expand=0;fontSize=16;',
},
_original_width: 400,
_original_height: 400,
}
Diamond Sketch
- Preview
- Usage
- Definition

import { DiamondSketch } from '@dinghy/diagrams/entitiesMisc'
<DiamondSketch/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DIAMOND_SKETCH } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DIAMOND_SKETCH)}
/>
{
_style: {
entity: 'rhombus;whiteSpace=wrap;html=1;strokeWidth=2;fillWeight=-1;hachureGap=8;fillStyle=cross-hatch;fillColor=#006600;sketch=1;',
},
_width: 120,
_height: 60,
}
Double Circle
- Preview
- Usage
- Definition
import { DoubleCircle } from '@dinghy/diagrams/entitiesMisc'
<DoubleCircle/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_CIRCLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DOUBLE_CIRCLE)}
/>
{
_style: {
entity: 'ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;',
},
_original_width: 80,
_original_height: 80,
}
Double Ellipse
- Preview
- Usage
- Definition

import { DoubleEllipse } from '@dinghy/diagrams/entitiesMisc'
<DoubleEllipse/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_ELLIPSE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DOUBLE_ELLIPSE)}
/>
{
_style: {
entity: 'ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;',
},
_width: 100,
_height: 60,
}
Double Rectangle
- Preview
- Usage
- Definition
import { DoubleRectangle } from '@dinghy/diagrams/entitiesMisc'
<DoubleRectangle/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_RECTANGLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DOUBLE_RECTANGLE)}
/>
{
_style: {
entity: 'shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;',
},
_width: 120,
_height: 80,
}
Double Rounded Rectangle
- Preview
- Usage
- Definition
import { DoubleRoundedRectangle } from '@dinghy/diagrams/entitiesMisc'
<DoubleRoundedRectangle/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_ROUNDED_RECTANGLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DOUBLE_ROUNDED_RECTANGLE)}
/>
{
_style: {
entity: 'shape=ext;double=1;rounded=1;whiteSpace=wrap;html=1;',
},
_width: 120,
_height: 80,
}
Double Square
- Preview
- Usage
- Definition
import { DoubleSquare } from '@dinghy/diagrams/entitiesMisc'
<DoubleSquare/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DOUBLE_SQUARE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, DOUBLE_SQUARE)}
/>
{
_style: {
entity: 'shape=ext;double=1;whiteSpace=wrap;html=1;aspect=fixed;',
},
_original_width: 80,
_original_height: 80,
}
Ellipse Sketch
- Preview
- Usage
- Definition

import { EllipseSketch } from '@dinghy/diagrams/entitiesMisc'
<EllipseSketch/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ELLIPSE_SKETCH } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, ELLIPSE_SKETCH)}
/>
{
_style: {
entity: 'ellipse;whiteSpace=wrap;html=1;strokeWidth=2;fillWeight=2;hachureGap=8;fillColor=#990000;fillStyle=dots;sketch=1;',
},
_width: 120,
_height: 60,
}
Horizontal Backbone
- Preview
- Usage
- Definition
import { HorizontalBackbone } from '@dinghy/diagrams/entitiesMisc'
<HorizontalBackbone/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_BACKBONE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_BACKBONE)}
/>
{
_style: {
entity: 'line;strokeWidth=4;html=1;perimeter=backbonePerimeter;points=[];outlineConnect=0;',
},
_width: 160,
_height: 10,
}
Horizontal Crossbar
- Preview
- Usage
- Definition
import { HorizontalCrossbar } from '@dinghy/diagrams/entitiesMisc'
<HorizontalCrossbar/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_CROSSBAR } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_CROSSBAR)}
/>
{
_style: {
entity: 'shape=crossbar;whiteSpace=wrap;html=1;rounded=1;',
},
_width: 120,
_height: 20,
}
Horizontal Line
- Preview
- Usage
- Definition
import { HorizontalLine } from '@dinghy/diagrams/entitiesMisc'
<HorizontalLine/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_LINE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_LINE)}
/>
{
_style: {
entity: 'line;strokeWidth=2;html=1;',
},
_width: 160,
_height: 10,
}
HTML Table 4
- Preview
- Usage
- Definition
import { HtmlTable4 } from '@dinghy/diagrams/entitiesMisc'
<HtmlTable4/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HTML_TABLE_4 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, HTML_TABLE_4)}
/>
{
_style: {
entity: 'text;html=1;whiteSpace=wrap;strokeColor=none;fillColor=none;overflow=fill;',
},
_original_width: 180,
_original_height: 180,
}
Icon
- Preview
- Usage
- Definition
![]()
import { Icon } from '@dinghy/diagrams/entitiesMisc'
<Icon/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ICON } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, ICON)}
/>
{
_style: {
entity: 'icon;html=1;image=img/clipart/Gear_128x128.png',
},
_original_width: 60,
_original_height: 60,
}
Image (Fixed Aspect)
- Preview
- Usage
- Definition

import { ImageFixedAspect } from '@dinghy/diagrams/entitiesMisc'
<ImageFixedAspect/>
// or
import { extendStyle } from "@dinghy/base-components";
import { IMAGE_FIXED_ASPECT } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, IMAGE_FIXED_ASPECT)}
/>
{
_style: {
entity: 'shape=image;html=1;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=1;aspect=fixed;image=img/clipart/Gear_128x128.pngstrokeColor=none;',
},
_original_width: 52,
_original_height: 61,
}
Image (Variable Aspect)
- Preview
- Usage
- Definition
import { ImageVariableAspect } from '@dinghy/diagrams/entitiesMisc'
<ImageVariableAspect/>
// or
import { extendStyle } from "@dinghy/base-components";
import { IMAGE_VARIABLE_ASPECT } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, IMAGE_VARIABLE_ASPECT)}
/>
{
_style: {
entity: 'shape=image;html=1;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;image=img/clipart/Gear_128x128.pngstrokeColor=none;',
},
_original_width: 50,
_original_height: 60,
}
Isometric Cube
- Preview
- Usage
- Definition
import { IsometricCube } from '@dinghy/diagrams/entitiesMisc'
<IsometricCube/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ISOMETRIC_CUBE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, ISOMETRIC_CUBE)}
/>
{
_style: {
entity: 'html=1;whiteSpace=wrap;shape=isoCube2;backgroundOutline=1;isoAngle=15;',
},
_original_width: 90,
_original_height: 100,
}
Isometric Square
- Preview
- Usage
- Definition

import { IsometricSquare } from '@dinghy/diagrams/entitiesMisc'
<IsometricSquare/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ISOMETRIC_SQUARE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, ISOMETRIC_SQUARE)}
/>
{
_style: {
entity: 'html=1;whiteSpace=wrap;aspect=fixed;shape=isoRectangle;',
},
_width: 150,
_height: 90,
}
Label 1
- Preview
- Usage
- Definition

import { Label1 } from '@dinghy/diagrams/entitiesMisc'
<Label1/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LABEL_1 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, LABEL_1)}
/>
{
_style: {
entity: 'label;whiteSpace=wrap;html=1;image=img/clipart/Gear_128x128.png',
},
_width: 140,
_height: 60,
}
Label 2
- Preview
- Usage
- Definition

import { Label2 } from '@dinghy/diagrams/entitiesMisc'
<Label2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LABEL_2 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, LABEL_2)}
/>
{
_style: {
entity: 'label;whiteSpace=wrap;html=1;align=center;verticalAlign=bottom;spacingLeft=0;spacingBottom=4;imageAlign=center;imageVerticalAlign=top;image=img/clipart/Gear_128x128.png',
},
_width: 120,
_height: 80,
}
Left Curly Bracket
- Preview
- Usage
- Definition
import { LeftCurlyBracket } from '@dinghy/diagrams/entitiesMisc'
<LeftCurlyBracket/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LEFT_CURLY_BRACKET } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, LEFT_CURLY_BRACKET)}
/>
{
_style: {
entity: 'shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;labelPosition=left;verticalLabelPosition=middle;align=right;verticalAlign=middle;',
},
_width: 20,
_height: 120,
}
Note
- Preview
- Usage
- Definition
import { Note } from '@dinghy/diagrams/entitiesMisc'
<Note/>
// or
import { extendStyle } from "@dinghy/base-components";
import { NOTE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, NOTE)}
/>
{
_style: {
entity: 'shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;fontColor=#000000;darkOpacity=0.05;fillColor=#FFF9B2;strokeColor=none;fillStyle=solid;direction=west;gradientDirection=north;gradientColor=#FFF2A1;shadow=1;size=20;pointerEvents=1;',
},
_width: 140,
_height: 160,
}
Partial Rectangle
- Preview
- Usage
- Definition
import { PartialRectangle } from '@dinghy/diagrams/entitiesMisc'
<PartialRectangle/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, PARTIAL_RECTANGLE)}
/>
{
_style: {
entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;left=0;right=0;fillColor=none;',
},
_width: 120,
_height: 60,
}
Partial Rectangle 2
- Preview
- Usage
- Definition
import { PartialRectangle2 } from '@dinghy/diagrams/entitiesMisc'
<PartialRectangle2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_2 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, PARTIAL_RECTANGLE_2)}
/>
{
_style: {
entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;top=0;fillColor=none;',
},
_width: 120,
_height: 60,
}
Partial Rectangle 3
- Preview
- Usage
- Definition
import { PartialRectangle3 } from '@dinghy/diagrams/entitiesMisc'
<PartialRectangle3/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_3 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, PARTIAL_RECTANGLE_3)}
/>
{
_style: {
entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;right=0;fillColor=none;',
},
_width: 120,
_height: 60,
}
Partial Rectangle 4
- Preview
- Usage
- Definition
import { PartialRectangle4 } from '@dinghy/diagrams/entitiesMisc'
<PartialRectangle4/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_4 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, PARTIAL_RECTANGLE_4)}
/>
{
_style: {
entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;bottom=1;right=1;left=1;top=0;fillColor=none;routingCenterX=-0.5;',
},
_width: 120,
_height: 60,
}
Rectangle Sketch
- Preview
- Usage
- Definition

import { RectangleSketch } from '@dinghy/diagrams/entitiesMisc'
<RectangleSketch/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_SKETCH } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, RECTANGLE_SKETCH)}
/>
{
_style: {
entity: 'rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillWeight=4;hachureGap=8;hachureAngle=45;fillColor=#1ba1e2;sketch=1;',
},
_width: 120,
_height: 60,
}
Right Curly Bracket
- Preview
- Usage
- Definition
import { RightCurlyBracket } from '@dinghy/diagrams/entitiesMisc'
<RightCurlyBracket/>
// or
import { extendStyle } from "@dinghy/base-components";
import { RIGHT_CURLY_BRACKET } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, RIGHT_CURLY_BRACKET)}
/>
{
_style: {
entity: 'shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;flipH=1;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;',
},
_width: 20,
_height: 120,
}
Table
- Preview
- Usage
- Definition
import { Table } from '@dinghy/diagrams/entitiesMisc'
<Table/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TABLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, TABLE)}
/>
{
_style: {
entity: 'childLayout=tableLayout;recursiveResize=0;strokeColor=#98bf21;fillColor=#A7C942;shadow=1;',
},
_width: 280,
_height: 160,
}
Table 3
- Preview
- Usage
- Definition
import { Table3 } from '@dinghy/diagrams/entitiesMisc'
<Table3/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TABLE_3 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, TABLE_3)}
/>
{
_style: {
entity: 'childLayout=tableLayout;recursiveResize=0;shadow=0;fillColor=none;strokeColor=#C0C0C0;',
},
_width: 180,
_height: 140,
}
Table 4
- Preview
- Usage
- Definition
import { Table4 } from '@dinghy/diagrams/entitiesMisc'
<Table4/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TABLE_4 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, TABLE_4)}
/>
{
_style: {
entity: 'childLayout=tableLayout;recursiveResize=0;shadow=0;fillColor=none;',
},
_width: 180,
_height: 140,
}
Timestamp
- Preview
- Usage
- Definition
import { Timestamp } from '@dinghy/diagrams/entitiesMisc'
<Timestamp/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TIMESTAMP } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, TIMESTAMP)}
/>
{
_style: {
entity: 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;',
},
_width: 0,
_height: 20,
}
Title
- Preview
- Usage
- Definition
import { Title } from '@dinghy/diagrams/entitiesMisc'
<Title/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TITLE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, TITLE)}
/>
{
_style: {
entity: 'text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;',
},
_width: 100,
_height: 40,
}
Unordered List
- Preview
- Usage
- Definition
import { UnorderedList } from '@dinghy/diagrams/entitiesMisc'
<UnorderedList/>
// or
import { extendStyle } from "@dinghy/base-components";
import { UNORDERED_LIST } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, UNORDERED_LIST)}
/>
{
_style: {
entity: 'text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;',
},
_width: 100,
_height: 80,
}
Vertical Backbone
- Preview
- Usage
- Definition
import { VerticalBackbone } from '@dinghy/diagrams/entitiesMisc'
<VerticalBackbone/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_BACKBONE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_BACKBONE)}
/>
{
_style: {
entity: 'line;strokeWidth=4;direction=south;html=1;perimeter=backbonePerimeter;points=[];outlineConnect=0;',
},
_width: 10,
_height: 160,
}
Vertical Crossbar
- Preview
- Usage
- Definition
import { VerticalCrossbar } from '@dinghy/diagrams/entitiesMisc'
<VerticalCrossbar/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_CROSSBAR } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_CROSSBAR)}
/>
{
_style: {
entity: 'shape=crossbar;whiteSpace=wrap;html=1;rounded=1;direction=south;',
},
_width: 20,
_height: 120,
}
Vertical Line
- Preview
- Usage
- Definition
import { VerticalLine } from '@dinghy/diagrams/entitiesMisc'
<VerticalLine/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_LINE } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_LINE)}
/>
{
_style: {
entity: 'line;strokeWidth=2;direction=south;html=1;',
},
_width: 10,
_height: 160,
}
Vertical List 2
- Preview
- Usage
- Definition
import { VerticalList2 } from '@dinghy/diagrams/entitiesMisc'
<VerticalList2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_LIST_2 } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_LIST_2)}
/>
{
_style: {
entity: 'text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;align=center;verticalAlign=middle;fontColor=#0000EE;fontStyle=4;',
},
_width: 0,
_height: 40,
}
Waypoint
- Preview
- Usage
- Definition
import { Waypoint } from '@dinghy/diagrams/entitiesMisc'
<Waypoint/>
// or
import { extendStyle } from "@dinghy/base-components";
import { WAYPOINT } from '@dinghy/diagrams/entitiesMisc'
<Shape
{...props}
_style={extendStyle(props, WAYPOINT)}
/>
{
_style: {
entity: 'shape=waypoint;sketch=0;fillStyle=solid;size=6;pointerEvents=1;points=[];fillColor=none;resizable=0;rotatable=0;perimeter=centerPerimeter;snapToPoint=1;',
},
_original_width: 20,
_original_height: 20,
}