Skip to content

Smart shape

What is smart shape? In DGM.js, we call smart shape that can be scripted, have extended properties, and can have constraints. All primitive shapes are smart shapes.

  • extended properties allows to define additional metadata of the shapes.
  • constraints allows to define the behaviors of the shape. (e.g. aligning, sizing, styling, …)
  • scripts allows to define how to draw or outline of the shape.

By combining the above three things, you can create complex and special shapes. For example, it is possible to define shape elements for UML Class Diagram, Sequence Diagram, UI Wireframe or whatever.

Extended Properties

You can define additional metadata of the shapes by creating extended properties. Each extended property should have it’s name and type. Here are the types of extended properties you can create:

  • string
  • number
  • boolean
  • enum
  • text (multi-lines)

The extended properties can be used in constraints and scripts.


Constraint can be used to impose specific constraints on a shape. Followings are the supported constraint types for a shape:


This constraint aligns children shapes.

  • orient : top, bottom, left, right, center.
  • align : left, left-outside, left-border, center, right, right-outside, right-border, top, top-border, top-outside, middle, bottom, bottom-border, bottom-outside, fill.
  • query : Align only the matched children shapes. For example, if the query is #compartment, aligns only the children shapes which has #compartment tag.
  • fillLast : Fill the last child shape.



This constraint aligns the shape relative to its parent.

  • horz : none, left, left-outside, left-border, right, right-outside, right-border, center, border, outside, fill.
  • vert : none, top, top-border, top-outside, bottom, bottom-border, bottom-outside, middle, border, outside, fill.
  • horzOffset : Horizontal offset.
  • vertOffset : Vertical offset.



This constraint makes an anchor to the it’s parent. When the parent shape moves, the anchored shape also move along. This is used for the text shape which is attached to a connector.


This constraint inherits styles automatically from it’s parent shape.

  • stroke : Inherit stroke styles.
  • fill : Inherit fill styles.
  • font : Inherit font styles.
  • textAlignment : : Inherit text alignments.


This constraint automatically adjust route of a connector. This is used for routing a connector.


This constraint automatically changes a state of the shape.

  • query : Query to find a shape from children to change state.
  • state : State to change: enable, visible, connectable, containable, editable, text.
  • property : An extended property to be used as state value.


This constraint automatically changes the size of the shape.

  • width : ignore, children, text, text-min, parent, value.
  • height : ignore, children, text, text-min, parent, value.
  • widthValue : The actual value when width is value.
  • heightValue : The actual value when height is value.


This constraint automatically changes the form of a line shape.

  • type : free, horzontal, vertical.


User can redefine of shape’s default behaviors how to rendering and outlining. The followings are supported script types of a shape:

  • render
  • outline


The script bound to render should code how to draw the shape. The below code is to draw a triagle inside a box.

render (triangle)
(def! l (. shape :left))
(def! r (. shape :right))
(def! t (. shape :top))
(def! b (. shape :bottom))
(def! xc (/ (+ l r) 2))
(def! seed (. shape :getSeed))
(. canvas :polygon [[xc t] [r b] [l b]] seed)
(. shape :renderText canvas))

You can use the shape’s default rendering behavor. The below code is draw the cross mark over the rectangle’s default rendering.

render (cross box)
(def! l (. shape :left))
(def! r (. shape :right))
(def! t (. shape :top))
(def! b (. shape :bottom))
(def! seed (. shape :getSeed))
(. shape :renderDefault canvas)
(. canvas :line l t r b seed)
(. canvas :line r t l b seed))


The script bound to outline should express a vector of points that constitutes the outline of the shape. The below is to define the outline of a triangle.

outline (triangle)
(def! l (. shape :left))
(def! r (. shape :right))
(def! t (. shape :top))
(def! b (. shape :bottom))
(def! xc (/ (+ l r) 2))
[[xc t] [r b] [l b] [xc t]])