Standard Basic Entities

4 Point Star

Preview
Usage
Definition

import { Component4PointStar } from '@dinghy/diagrams/entitiesBasic'

<Component4PointStar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_4_POINT_STAR } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.4_point_star_2;dx=0.8;',
  },
  _original_width: 100,
  _original_height: 100,

}

6 Point Star

Preview
Usage
Definition

import { Component6PointStar } from '@dinghy/diagrams/entitiesBasic'

<Component6PointStar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_6_POINT_STAR } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.6_point_star',
  },
  _original_width: 100,
  _original_height: 90,

}

8 Point Star

Preview
Usage
Definition

import { Component8PointStar } from '@dinghy/diagrams/entitiesBasic'

<Component8PointStar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMPONENT_8_POINT_STAR } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.8_point_star',
  },
  _original_width: 100,
  _original_height: 100,

}

Acute Triangle

Preview
Usage
Definition

import { AcuteTriangle } from '@dinghy/diagrams/entitiesBasic'

<AcuteTriangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACUTE_TRIANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.acute_triangle;dx=0.5;',
  },
  _width: 100,
  _height: 70,
}

Arc

Preview
Usage
Definition

import { Arc } from '@dinghy/diagrams/entitiesBasic'

<Arc/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARC } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.arc;startAngle=0.3;endAngle=0.1;',
  },
  _original_width: 100,
  _original_height: 100,

}

Preview
Usage
Definition

import { Banner } from '@dinghy/diagrams/entitiesBasic'

<Banner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BANNER } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.banner',
  },
  _width: 100,
  _height: 50,
}

Button

Preview
Usage
Definition

import { Button } from '@dinghy/diagrams/entitiesBasic'

<Button/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'labelPosition=center;verticalLabelPosition=middle;align=center;html=1;shape=mxgraph.basic.button;dx=10;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Button (shaded)

Preview
Usage
Definition

import { ButtonShaded } from '@dinghy/diagrams/entitiesBasic'

<ButtonShaded/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SHADED } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'labelPosition=center;verticalLabelPosition=middle;align=center;html=1;shape=mxgraph.basic.shaded_button;dx=10;fillColor=#E6E6E6;strokeColor=none;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Cloud Callout

Preview
Usage
Definition

import { CloudCallout } from '@dinghy/diagrams/entitiesBasic'

<CloudCallout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOUD_CALLOUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.cloud_callout',
  },
  _width: 90,
  _height: 60,
}

Cloud Rectangle

Preview
Usage
Definition

import { CloudRectangle } from '@dinghy/diagrams/entitiesBasic'

<CloudRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOUD_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.cloud_rect',
  },
  _width: 120,
  _height: 90,
}

Cone

Preview
Usage
Definition

import { Cone } from '@dinghy/diagrams/entitiesBasic'

<Cone/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.cone',
  },
  _original_width: 100,
  _original_height: 100,

}

Cone (adjustable)

Preview
Usage
Definition

import { ConeAdjustable } from '@dinghy/diagrams/entitiesBasic'

<ConeAdjustable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONE_ADJUSTABLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.cone2;dx=0.5;dy=0.9;',
  },
  _original_width: 100,
  _original_height: 100,

}

Corner Rounded Rectangle

Preview
Usage
Definition

import { CornerRoundedRectangle } from '@dinghy/diagrams/entitiesBasic'

<CornerRoundedRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CORNER_ROUNDED_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.corner_round_rect;dx=6;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Cylinder Stack

Preview
Usage
Definition

import { CylinderStack } from '@dinghy/diagrams/entitiesBasic'

<CylinderStack/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CYLINDER_STACK } from '@dinghy/diagrams/entitiesBasic'

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

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

Diagonal Rounded Rectangle

Preview
Usage
Definition

import { DiagonalRoundedRectangle } from '@dinghy/diagrams/entitiesBasic'

<DiagonalRoundedRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAGONAL_ROUNDED_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.diag_round_rect;dx=6;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Diagonal Snip Rectangle

Preview
Usage
Definition

import { DiagonalSnipRectangle } from '@dinghy/diagrams/entitiesBasic'

<DiagonalSnipRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAGONAL_SNIP_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.diag_snip_rect;dx=6;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Diagonal Stripe

Preview
Usage
Definition

import { DiagonalStripe } from '@dinghy/diagrams/entitiesBasic'

<DiagonalStripe/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIAGONAL_STRIPE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.diag_stripe;dx=10;',
  },
  _width: 100,
  _height: 60,
}

Document

Preview
Usage
Definition

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

<Document/>

// or

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

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.document',
  },
  _original_width: 100,
  _original_height: 100,

}

Donut

Preview
Usage
Definition

import { Donut } from '@dinghy/diagrams/entitiesBasic'

<Donut/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DONUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.donut;dx=25;',
  },
  _original_width: 100,
  _original_height: 100,

}

Drop

Preview
Usage
Definition

import { Drop } from '@dinghy/diagrams/entitiesBasic'

<Drop/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROP } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.drop',
  },
  _width: 70,
  _height: 100,
}

Flash

Preview
Usage
Definition

import { Flash } from '@dinghy/diagrams/entitiesBasic'

<Flash/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLASH } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.flash',
  },
  _width: 60,
  _height: 100,
}

Frame

Preview
Usage
Definition

import { Frame } from '@dinghy/diagrams/entitiesBasic'

<Frame/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FRAME } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.frame;dx=10;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Frame Corner

Preview
Usage
Definition

import { FrameCorner } from '@dinghy/diagrams/entitiesBasic'

<FrameCorner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FRAME_CORNER } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.frame_corner;dx=10;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Half Circle

Preview
Usage
Definition

import { HalfCircle } from '@dinghy/diagrams/entitiesBasic'

<HalfCircle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HALF_CIRCLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.half_circle',
  },
  _width: 100,
  _height: 50,
}

Heart

Preview
Usage
Definition

import { Heart } from '@dinghy/diagrams/entitiesBasic'

<Heart/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HEART } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.heart',
  },
  _original_width: 100,
  _original_height: 100,

}

Isometric Cube

Preview
Usage
Definition

import { IsometricCube } from '@dinghy/diagrams/entitiesBasic'

<IsometricCube/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ISOMETRIC_CUBE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'html=1;shape=mxgraph.basic.isocube;isoAngle=15;',
  },
  _original_width: 100,
  _original_height: 100,

}

Layered Rectangle

Preview
Usage
Definition

import { LayeredRectangle } from '@dinghy/diagrams/entitiesBasic'

<LayeredRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LAYERED_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.layered_rect;dx=10;outlineConnect=0;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Loud Callout

Preview
Usage
Definition

import { LoudCallout } from '@dinghy/diagrams/entitiesBasic'

<LoudCallout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOUD_CALLOUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.loud_callout',
  },
  _width: 100,
  _height: 60,
}

Message

Preview
Usage
Definition

import { Message } from '@dinghy/diagrams/entitiesBasic'

<Message/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'shape=message;html=1;html=1;outlineConnect=0;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;',
  },
  _width: 60,
  _height: 40,
}

Moon

Preview
Usage
Definition

import { Moon } from '@dinghy/diagrams/entitiesBasic'

<Moon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MOON } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.moon',
  },
  _width: 75,
  _height: 100,
}

No Symbol

Preview
Usage
Definition

import { NoSymbol } from '@dinghy/diagrams/entitiesBasic'

<NoSymbol/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NO_SYMBOL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.no_symbol',
  },
  _original_width: 100,
  _original_height: 100,

}

Obtuse Triangle

Preview
Usage
Definition

import { ObtuseTriangle } from '@dinghy/diagrams/entitiesBasic'

<ObtuseTriangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OBTUSE_TRIANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.obtuse_triangle;dx=0.25;',
  },
  _width: 100,
  _height: 70,
}

Octagon

Preview
Usage
Definition

import { Octagon } from '@dinghy/diagrams/entitiesBasic'

<Octagon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OCTAGON } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.octagon2;align=center;verticalAlign=middle;dx=15;',
  },
  _original_width: 100,
  _original_height: 100,

}

Orthogonal Triangle

Preview
Usage
Definition

import { OrthogonalTriangle } from '@dinghy/diagrams/entitiesBasic'

<OrthogonalTriangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ORTHOGONAL_TRIANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.orthogonal_triangle',
  },
  _width: 100,
  _height: 70,
}

Oval Callout

Preview
Usage
Definition

import { OvalCallout } from '@dinghy/diagrams/entitiesBasic'

<OvalCallout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OVAL_CALLOUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.oval_callout',
  },
  _width: 100,
  _height: 60,
}

Partial Concentric Ellipse

Preview
Usage
Definition

import { PartialConcentricEllipse } from '@dinghy/diagrams/entitiesBasic'

<PartialConcentricEllipse/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_CONCENTRIC_ELLIPSE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.partConcEllipse;startAngle=0.25;endAngle=0.1;arcWidth=0.5;',
  },
  _original_width: 100,
  _original_height: 100,

}

Partial Rectangle

Preview
Usage
Definition

import { PartialRectangle } from '@dinghy/diagrams/entitiesBasic'

<PartialRectangle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.rect;fillColor2=none;strokeWidth=1;size=20;indent=5;',
  },
  _width: 120,
  _height: 60,
}

Partial Rectangle 2

Preview
Usage
Definition

import { PartialRectangle2 } from '@dinghy/diagrams/entitiesBasic'

<PartialRectangle2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_2 } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;top=0;bottom=0;fillColor=none;',
  },
  _width: 120,
  _height: 60,
}

Partial Rectangle 3

Preview
Usage
Definition

import { PartialRectangle3 } from '@dinghy/diagrams/entitiesBasic'

<PartialRectangle3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_3 } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;right=0;top=0;bottom=0;fillColor=none;routingCenterX=-0.5;',
  },
  _width: 120,
  _height: 60,
}

Partial Rectangle 4

Preview
Usage
Definition

import { PartialRectangle4 } from '@dinghy/diagrams/entitiesBasic'

<PartialRectangle4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_4 } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;right=0;fillColor=none;',
  },
  _width: 120,
  _height: 60,
}

Partial Rectangle 5

Preview
Usage
Definition

import { PartialRectangle5 } from '@dinghy/diagrams/entitiesBasic'

<PartialRectangle5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PARTIAL_RECTANGLE_5 } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'shape=partialRectangle;whiteSpace=wrap;html=1;top=0;left=0;fillColor=none;',
  },
  _width: 120,
  _height: 60,
}

Pentagon

Preview
Usage
Definition

import { Pentagon } from '@dinghy/diagrams/entitiesBasic'

<Pentagon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PENTAGON } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.pentagon',
  },
  _original_width: 100,
  _original_height: 90,

}

Pie

Preview
Usage
Definition

import { Pie } from '@dinghy/diagrams/entitiesBasic'

<Pie/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.pie;startAngle=0.2;endAngle=0.9;',
  },
  _original_width: 100,
  _original_height: 100,

}

Plaque

Preview
Usage
Definition

import { Plaque } from '@dinghy/diagrams/entitiesBasic'

<Plaque/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PLAQUE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.plaque;dx=6;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Plaque Frame

Preview
Usage
Definition

import { PlaqueFrame } from '@dinghy/diagrams/entitiesBasic'

<PlaqueFrame/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PLAQUE_FRAME } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.plaque_frame;dx=10;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Pointed Oval

Preview
Usage
Definition

import { PointedOval } from '@dinghy/diagrams/entitiesBasic'

<PointedOval/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POINTED_OVAL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.pointed_oval',
  },
  _width: 50,
  _height: 100,
}

Polygon

Preview
Usage
Definition

import { Polygon } from '@dinghy/diagrams/entitiesBasic'

<Polygon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POLYGON } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.polygon;polyCoords=[[0.25,0],[0.75,0],[1,0.25],[1,0.75],[0.75,1],[0.25,1],[0,0.75],[0,0.25]];polyline=0;',
  },
  _original_width: 100,
  _original_height: 100,

}

Polyline

Preview
Usage
Definition

import { Polyline } from '@dinghy/diagrams/entitiesBasic'

<Polyline/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POLYLINE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.polygon;polyCoords=[[0.25,0],[0.75,0],[1,0.25],[1,0.75],[0.75,1],[0.25,1],[0,0.75],[0,0.25]];polyline=1;fillColor=none;',
  },
  _original_width: 100,
  _original_height: 100,

}

Pyramid

Preview
Usage
Definition

import { Pyramid } from '@dinghy/diagrams/entitiesBasic'

<Pyramid/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PYRAMID } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.pyramid;dx1=0.4;dx2=0.6;dy1=0.9;dy2=0.8;',
  },
  _original_width: 100,
  _original_height: 100,

}

Rectangle with diagonal fill

Preview
Usage
Definition

import { RectangleWithDiagonalFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithDiagonalFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_DIAGONAL_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diag;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangle with diagonal grid fill

Preview
Usage
Definition

import { RectangleWithDiagonalGridFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithDiagonalGridFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_DIAGONAL_GRID_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diagGrid;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangle with grid fill

Preview
Usage
Definition

import { RectangleWithGridFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithGridFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_GRID_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=grid;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangle with horizontal fill

Preview
Usage
Definition

import { RectangleWithHorizontalFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithHorizontalFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_HORIZONTAL_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=hor;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangle with reverse diagonal fill

Preview
Usage
Definition

import { RectangleWithReverseDiagonalFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithReverseDiagonalFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_REVERSE_DIAGONAL_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=diagRev;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangle with vertical fill

Preview
Usage
Definition

import { RectangleWithVerticalFill } from '@dinghy/diagrams/entitiesBasic'

<RectangleWithVerticalFill/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGLE_WITH_VERTICAL_FILL } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.patternFillRect;fillStyle=vert;step=5;fillStrokeWidth=0.2;fillStrokeColor=#dddddd;',
  },
  _width: 120,
  _height: 60,
}

Rectangular Callout

Preview
Usage
Definition

import { RectangularCallout } from '@dinghy/diagrams/entitiesBasic'

<RectangularCallout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RECTANGULAR_CALLOUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.rectCallout;dx=30;dy=15;boundedLbl=1;',
  },
  _width: 100,
  _height: 60,
}

Rounded Frame

Preview
Usage
Definition

import { RoundedFrame } from '@dinghy/diagrams/entitiesBasic'

<RoundedFrame/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ROUNDED_FRAME } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.rounded_frame;dx=10;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Rounded Rectangle (three corners)

Preview
Usage
Definition

import { RoundedRectangleThreeCorners } from '@dinghy/diagrams/entitiesBasic'

<RoundedRectangleThreeCorners/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ROUNDED_RECTANGLE_THREE_CORNERS } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.three_corner_round_rect;dx=6;whiteSpace=wrap;',
  },
  _width: 100,
  _height: 60,
}

Rounded Rectangular Callout

Preview
Usage
Definition

import { RoundedRectangularCallout } from '@dinghy/diagrams/entitiesBasic'

<RoundedRectangularCallout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ROUNDED_RECTANGULAR_CALLOUT } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;shape=mxgraph.basic.roundRectCallout;dx=30;dy=15;size=5;boundedLbl=1;',
  },
  _width: 100,
  _height: 60,
}

Smiley

Preview
Usage
Definition

import { Smiley } from '@dinghy/diagrams/entitiesBasic'

<Smiley/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SMILEY } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.smiley',
  },
  _original_width: 100,
  _original_height: 100,

}

Star

Preview
Usage
Definition

import { Star } from '@dinghy/diagrams/entitiesBasic'

<Star/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STAR } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.star',
  },
  _original_width: 100,
  _original_height: 95,

}

Sun

Preview
Usage
Definition

import { Sun } from '@dinghy/diagrams/entitiesBasic'

<Sun/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUN } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.sun',
  },
  _original_width: 100,
  _original_height: 100,

}

Tick

Preview
Usage
Definition

import { Tick } from '@dinghy/diagrams/entitiesBasic'

<Tick/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TICK } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.tick',
  },
  _original_width: 85,
  _original_height: 100,

}

Wave

Preview
Usage
Definition

import { Wave } from '@dinghy/diagrams/entitiesBasic'

<Wave/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WAVE } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.wave2;dy=0.3;',
  },
  _width: 100,
  _height: 60,
}

X

Preview
Usage
Definition

import { X } from '@dinghy/diagrams/entitiesBasic'

<X/>

// or

import { extendStyle } from "@dinghy/base-components";
import { X_CONST } from '@dinghy/diagrams/entitiesBasic'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.x',
  },
  _original_width: 100,
  _original_height: 100,

}

4 Point Star​

6 Point Star​

8 Point Star​

Acute Triangle​

Arc​

Banner​

Button​

Button (shaded)​

Cloud Callout​

Cloud Rectangle​

Cone​

Cone (adjustable)​

Corner Rounded Rectangle​

Cylinder Stack​

Diagonal Rounded Rectangle​

Diagonal Snip Rectangle​

Diagonal Stripe​

Document​

Donut​

Drop​

Flash​

Frame​

Frame Corner​

Half Circle​

Heart​

Isometric Cube​

Layered Rectangle​

Loud Callout​

Message​

Moon​

No Symbol​

Obtuse Triangle​

Octagon​

Orthogonal Triangle​

Oval Callout​

Partial Concentric Ellipse​

Partial Rectangle​

Partial Rectangle 2​

Partial Rectangle 3​

Partial Rectangle 4​

Partial Rectangle 5​

Pentagon​

Pie​

Plaque​

Plaque Frame​

Pointed Oval​

Polygon​

Polyline​

Pyramid​

Rectangle with diagonal fill​

Rectangle with diagonal grid fill​

Rectangle with grid fill​

Rectangle with horizontal fill​

Rectangle with reverse diagonal fill​

Rectangle with vertical fill​

Rectangular Callout​

Rounded Frame​

Rounded Rectangle (three corners)​

Rounded Rectangular Callout​

Smiley​

Star​

Sun​

Tick​

Wave​

X​

4 Point Star

6 Point Star

8 Point Star

Acute Triangle

Arc

Banner

Button

Button (shaded)

Cloud Callout

Cloud Rectangle

Cone

Cone (adjustable)

Corner Rounded Rectangle

Cylinder Stack

Diagonal Rounded Rectangle

Diagonal Snip Rectangle

Diagonal Stripe

Document

Donut

Drop

Flash

Frame

Frame Corner

Half Circle

Heart

Isometric Cube

Layered Rectangle

Loud Callout

Message

Moon

No Symbol

Obtuse Triangle

Octagon

Orthogonal Triangle

Oval Callout

Partial Concentric Ellipse

Partial Rectangle

Partial Rectangle 2

Partial Rectangle 3

Partial Rectangle 4

Partial Rectangle 5

Pentagon

Pie

Plaque

Plaque Frame

Pointed Oval

Polygon

Polyline

Pyramid

Rectangle with diagonal fill

Rectangle with diagonal grid fill

Rectangle with grid fill

Rectangle with horizontal fill

Rectangle with reverse diagonal fill

Rectangle with vertical fill

Rectangular Callout

Rounded Frame

Rounded Rectangle (three corners)

Rounded Rectangular Callout

Smiley

Star

Sun

Tick

Wave

X