Shape Reference

Runiq provides 57 shapes across 10 categories for building professional diagrams.

Quick Reference

Shape	Syntax	Use Case
Rectangle	@rect	Process steps, general purpose
Rounded Rectangle	@rounded	Terminal points (start/end)
Diamond	@rhombus	Decisions, branching
Hexagon	@hex	Preparation, success states
Circle	@circle	Simple state, connector
Ellipse	@ellipse	Elongated state
Cylinder	@cyl	Databases, storage
Document	@doc	Documents, outputs
Parallelogram	@para	Input/output
Trapezoid	@trap	Manual operation
Cloud	@cloud	Cloud services, external systems
Pentagon	@pent	Process container
Triangle	@triangle	Flow direction
Octagon	@octagon	Stop, halt
Star	@star	Special events

See all 57 shapes below ↓

Categories

1. Actors (8 shapes)

User representations for use case diagrams:

Shape	Syntax	Description
Actor	@actor	Classic stick figure actor
Box Actor	@box-actor	Simplified box actor
Circle Actor	@circle-actor	Circle head with body
Rounded Actor	@rounded-actor	Rounded box actor
Square Actor	@square-actor	Square body actor
Tall Actor	@tall-actor	Tall proportions
Wide Actor	@wide-actor	Wide proportions
Custom Actor	@custom-actor	Configurable actor

Example:

shape User as @actor label: "Customer"
shape Admin as @box-actor label: "Administrator"

2. Circles (10 shapes)

Various circle styles and sizes:

Shape	Syntax	Description
Circle	@circle	Standard circle
Small Circle	@circle-sm	Small circle
Large Circle	@circle-lg	Large circle
XL Circle	@circle-xl	Extra large circle
Double Circle	@double-circle	Concentric circles
Filled Circle	@filled-circle	Solid filled
Dashed Circle	@dashed-circle	Dashed border
Dotted Circle	@dotted-circle	Dotted border
Thick Circle	@thick-circle	Thick border
Thin Circle	@thin-circle	Thin border

Example:

shape Start as @circle label: "A"
shape End as @double-circle label: "Z"

3. UML (2 shapes)

UML-specific shapes:

Shape	Syntax	Description
Use Case Oval	@usecase	UML use case
System Boundary	@system-boundary	System container

Example:

container "Banking System" as @system-boundary {
  shape Login as @usecase label: "User Login"
}

4. Data & Documents (7 shapes)

Documents and data representations:

Shape	Syntax	Description
Document	@doc	Single document
Multi-Document	@multi-doc	Stack of documents
Tape	@tape	Magnetic tape
Stored Data	@stored-data	Data at rest
Display	@display	Screen/monitor
Note	@note	Annotation
Card	@card	Punch card

Example:

shape Report as @doc label: "Monthly Report"
shape Archive as @tape label: "Backup"

5. Data I/O (6 shapes)

Input and output operations:

Shape	Syntax	Description
Parallelogram	@para	General I/O
Input	@input	Data input
Output	@output	Data output
Manual Input	@manual-input	Keyboard entry
Manual Operation	@manual-op	Manual step
Prep	@prep	Preparation

Example:

shape UserInput as @manual-input label: "Enter Data"
shape Process as @rect label: "Validate"
shape Result as @output label: "Display"

6. Storage (6 shapes)

Database and storage systems:

Shape	Syntax	Description
Cylinder	@cyl	Database
Drum	@drum	Direct access storage
Disk	@disk	Magnetic disk
Stored Data	@stored-data	Data at rest
Internal Storage	@internal-storage	RAM, registers
Sequential Data	@seq-data	Sequential access

Example:

shape MainDB as @cyl label: "PostgreSQL"
shape Cache as @internal-storage label: "Redis"

7. Process (9 shapes)

Process and operation steps:

Shape	Syntax	Description
Rectangle	@rect	Process step
Rounded Rectangle	@rounded	Terminal (start/end)
Subroutine	@subroutine	Predefined process
Subprocess	@subprocess	Complex subprocess
Loop Limit	@loop-limit	Loop bounds
Collate	@collate	Sorting, ordering
Sort	@sort	Sort operation
Merge	@merge	Merge operation
Extract	@extract	Extract data

Example:

shape Start as @rounded label: "Start"
shape Process as @rect label: "Process"
shape Sub as @subroutine label: "Validate"
shape End as @rounded label: "End"

8. Specialized (3 shapes)

Special-purpose shapes:

Shape	Syntax	Description
Cloud	@cloud	Cloud service, external system
Delay	@delay	Time delay
Off-page	@off-page	Off-page connector

Example:

shape AWS as @cloud label: "AWS S3"
shape Wait as @delay label: "Wait 5 seconds"

9. Annotations (3 shapes)

Comments and notes:

Shape	Syntax	Description
Note	@note	Annotation
Comment	@comment	Comment block
Callout	@callout	Callout bubble

Example:

shape Step as @rect label: "Process"
shape Info as @note label: "Runs nightly"

10. Pedigree (3 shapes)

Medical/genetic family tree symbols following standard pedigree notation:

Shape	Syntax	Description
Pedigree Male	@pedigree-male	Male individual (square)
Pedigree Female	@pedigree-female	Female individual (circle)
Pedigree Unknown	@pedigree-unknown	Unknown sex individual (diamond)

Properties:

• affected:true - Black fill (has genetic condition)
• carrier:true - Half-fill pattern (carries one copy)
• deceased:true - Diagonal line overlay

Example:

diagram "Family History" {
  direction:TB

  # Parents (both carriers)
  shape father as @pedigree-male label:"Father" carrier:true
  shape mother as @pedigree-female label:"Mother" carrier:true

  # Children
  shape son as @pedigree-male label:"Son" affected:true
  shape daughter as @pedigree-female label:"Daughter"

  # Marriage (no arrow)
  father -> mother arrowType:none

  # Parent-child relationships
  father -> son
  father -> daughter
  mother -> son
  mother -> daughter
}

Pedigree Charts

See the Pedigree Charts Guide for comprehensive documentation on creating medical family trees with inheritance patterns.

All Shapes

Complete table of all 57 shapes:

Shape	Syntax	Category	Use Case
Actor	@actor	Actors	User, role in use case
Box Actor	@box-actor	Actors	Simplified actor
Circle Actor	@circle-actor	Actors	Alternative actor
Rounded Actor	@rounded-actor	Actors	Rounded actor
Square Actor	@square-actor	Actors	Square actor
Tall Actor	@tall-actor	Actors	Tall proportions
Wide Actor	@wide-actor	Actors	Wide proportions
Custom Actor	@custom-actor	Actors	Configurable
Circle	@circle	Circles	State, connector
Small Circle	@circle-sm	Circles	Small state
Large Circle	@circle-lg	Circles	Large state
XL Circle	@circle-xl	Circles	Extra large state
Double Circle	@double-circle	Circles	Final state, accept
Filled Circle	@filled-circle	Circles	Initial state
Dashed Circle	@dashed-circle	Circles	Optional state
Dotted Circle	@dotted-circle	Circles	Tentative state
Thick Circle	@thick-circle	Circles	Emphasized state
Thin Circle	@thin-circle	Circles	De-emphasized state
Use Case	@usecase	UML	UML use case
System Boundary	@system-boundary	UML	System container
Document	@doc	Data & Docs	Report, output
Multi-Document	@multi-doc	Data & Docs	Multiple documents
Tape	@tape	Data & Docs	Backup, archive
Stored Data	@stored-data	Data & Docs	Data at rest
Display	@display	Data & Docs	Screen, monitor
Note	@note	Data & Docs	Annotation
Card	@card	Data & Docs	Punch card
Parallelogram	@para	Data I/O	General I/O
Input	@input	Data I/O	Data input
Output	@output	Data I/O	Data output
Manual Input	@manual-input	Data I/O	Keyboard entry
Manual Operation	@manual-op	Data I/O	Manual step
Prep	@prep	Data I/O	Preparation
Cylinder	@cyl	Storage	Database
Drum	@drum	Storage	Direct access
Disk	@disk	Storage	Magnetic disk
Internal Storage	@internal-storage	Storage	RAM, cache
Sequential Data	@seq-data	Storage	Sequential access
Rectangle	@rect	Process	Process step
Rounded Rectangle	@rounded	Process	Start, end
Subroutine	@subroutine	Process	Predefined process
Subprocess	@subprocess	Process	Complex subprocess
Loop Limit	@loop-limit	Process	Loop bounds
Collate	@collate	Process	Sort, order
Sort	@sort	Process	Sort operation
Merge	@merge	Process	Merge data
Extract	@extract	Process	Extract data
Cloud	@cloud	Specialized	Cloud service
Delay	@delay	Specialized	Time delay
Off-page	@off-page	Specialized	Off-page connector
Note	@note	Annotations	Note, comment
Comment	@comment	Annotations	Comment block
Callout	@callout	Annotations	Callout bubble
Pedigree Male	@pedigree-male	Pedigree	Male individual (square)
Pedigree Female	@pedigree-female	Pedigree	Female individual (circle)
Pedigree Unknown	@pedigree-unknown	Pedigree	Unknown sex (diamond)

Shape Properties

All shapes support these properties:

shape MyShape as @rect
  label: "Display Text"
  fillColor: "#4caf50"
  textColor: "#ffffff"
  strokeColor: "#333333"
  strokeWidth: 2
  opacity: 0.9

Color Properties

• fillColor - Background color (hex or CSS color)
• textColor - Label text color
• strokeColor - Border color
• strokeWidth - Border width in pixels
• opacity - Transparency (0.0 to 1.0)

Layout Properties

• width - Override shape width
• height - Override shape height
• padding - Internal padding

Next Steps

• View Examples → - See shapes in action
• Quick Start → - Build your first diagram
• API Reference → - Programmatic usage

---

Choosing Shapes

When in doubt:

• @rounded for start/end
• @rect for processes
• @rhombus for decisions
• @cyl for databases
• @doc for documents