Diagram Shapes

5 min read

The Shape Library provides pre-built shapes for flowcharts, UML diagrams, and network diagrams.

Creating Shapes

const shape = app.diagramSystem.createShape('process', {
  position: new paper.Point(400, 300),
  width: 150,
  height: 80,
  label: 'My Process',
  style: {
    fillColor: 'rgba(59, 130, 246, 0.2)',
    strokeColor: '#3b82f6',
    strokeWidth: 2
  }
});

Shape Categories

Flowchart Shapes

Shape ID Name Description Default Size
process Process Rectangle with rounded corners 120 x 60
decision Decision Diamond shape 100 x 100
terminal Terminal Stadium/pill shape (start/end) 120 x 50
data Data Parallelogram (I/O) 120 x 60
document Document Wavy bottom rectangle 120 x 70
database Database Cylinder shape 80 x 100
preparation Preparation Hexagon 120 x 60 
// Flowchart example
const start = app.diagramSystem.createShape('terminal', {
  position: new paper.Point(400, 50),
  label: 'Start'
});

const input = app.diagramSystem.createShape('data', {
  position: new paper.Point(400, 150),
  label: 'Read Input'
});

const process = app.diagramSystem.createShape('process', {
  position: new paper.Point(400, 250),
  label: 'Process'
});

const decision = app.diagramSystem.createShape('decision', {
  position: new paper.Point(400, 370),
  label: 'Valid?'
});

const output = app.diagramSystem.createShape('document', {
  position: new paper.Point(400, 500),
  label: 'Output'
});

const end = app.diagramSystem.createShape('terminal', {
  position: new paper.Point(400, 620),
  label: 'End'
});

UML Shapes

Shape ID Name Description Default Size
uml-class Class 3-compartment box 150 x 120
uml-usecase Use Case Ellipse 140 x 70
uml-actor Actor Stick figure 40 x 80 
// UML class diagram
const userClass = app.diagramSystem.createShape('uml-class', {
  position: new paper.Point(200, 200),
  label: 'User',
  width: 180,
  height: 140
});

const actor = app.diagramSystem.createShape('uml-actor', {
  position: new paper.Point(50, 200),
  label: 'Admin'
});

const useCase = app.diagramSystem.createShape('uml-usecase', {
  position: new paper.Point(350, 200),
  label: 'Login'
});

Network Shapes

Shape ID Name Description Default Size
cloud Cloud Cloud service icon 140 x 90
server Server Server rack icon 60 x 80 
// Network diagram
const cloud = app.diagramSystem.createShape('cloud', {
  position: new paper.Point(400, 100),
  label: 'AWS'
});

const webServer = app.diagramSystem.createShape('server', {
  position: new paper.Point(250, 250),
  label: 'Web'
});

const dbServer = app.diagramSystem.createShape('server', {
  position: new paper.Point(400, 250),
  label: 'Database'
});

const appServer = app.diagramSystem.createShape('server', {
  position: new paper.Point(550, 250),
  label: 'App'
});

Basic Shapes

Shape ID Name Description Default Size
rectangle Rectangle Basic rectangle 120 x 80
circle Circle Basic circle 80 x 80
triangle Triangle Basic triangle 100 x 86
star Star 5-point star 80 x 80

Getting Available Shapes

// Get all shapes
const allShapes = app.diagramSystem.getShapes();

// Get shapes by category
const flowchartShapes = app.diagramSystem.getShapes('flowchart');
const umlShapes = app.diagramSystem.getShapes('uml');
const networkShapes = app.diagramSystem.getShapes('network');
const basicShapes = app.diagramSystem.getShapes('basic');

Shape Properties

All shapes created through the diagram system have:

shape.data = {
  shapeType: 'process',      // Shape ID
  diagramShape: true,        // Marker for diagram shapes
  isDraggable: true,         // Can be moved
  selectable: true,          // Can be selected
  category: 'flowchart'      // Shape category
};

Shape Styling

Each shape category has default colors that can be overridden:

// Custom styled process
const styledProcess = app.diagramSystem.createShape('process', {
  position: new paper.Point(400, 300),
  label: 'Custom Style',
  style: {
    fillColor: 'rgba(239, 68, 68, 0.2)',   // Red tint
    strokeColor: '#ef4444',                 // Red stroke
    strokeWidth: 3
  }
});

Default Colors by Category

Category Fill Stroke
Flowchart (process) rgba(59, 130, 246, 0.15) #3b82f6
Flowchart (decision) rgba(139, 92, 246, 0.15) #8b5cf6
Flowchart (terminal) rgba(16, 185, 129, 0.15) #10b981
Flowchart (data) rgba(236, 72, 153, 0.15) #ec4899
UML rgba(59, 130, 246, 0.1) #3b82f6
Network rgba(96, 165, 250, 0.15) #60a5fa

Automatic Port Assignment

All diagram shapes automatically receive standard ports (top, bottom, left, right) for connector attachment:

const shape = app.diagramSystem.createShape('process', { ... });

// Ports are automatically added
const ports = app.diagramSystem.getPorts(shape);
// Returns: [{ position: 'top', type: 'both' }, { position: 'bottom', ... }, ...]

Labels

Shapes can have centered labels:

// With label
const labeled = app.diagramSystem.createShape('process', {
  position: new paper.Point(400, 300),
  label: 'Process Step'
});

// Labels are automatically centered in the shape
// Font: Inter, 14px, white (#ffffff)

Integration

Shapes integrate with the standard PinePaper systems:

// Select a shape
app.select(shape);

// Modify a shape
app.modify(shape, {
  x: 500,
  y: 400,
  scale: 1.2
});

// Animate a shape
app.animate(shape, { animationType: 'pulse' });

// Delete a shape
app.delete(shape);