Flowchart Shapes

Standard Flowchart Symbols

Process (Rectangle)

The most common flowchart symbol. Represents any processing step, action, or operation in a workflow.

Best Practices

• Use verb phrases: "Calculate total", "Send email"
• Keep descriptions concise (2-5 words)
• One action per box
• Maintain consistent sizing

Decision (Diamond)

Represents a point where the flow branches based on a condition. Always has at least two exit paths (Yes/No, True/False).

Guidelines

• Frame as a yes/no question
• Label output paths clearly (Yes/No, True/False)
• "Yes" typically exits right or down
• "No" typically exits left or down

Example Decision Labels:
- "Is order valid?"
- "User authenticated?"
- "Amount > $1000?"
- "All items processed?"

Database (Cylinder)

Represents data storage, typically a database system. The cylinder shape mimics traditional disk storage.

Use Cases

• Database read/write operations
• Data warehouses
• File systems
• Cache storage

Document

Represents a printed document, report, or form. The wavy bottom edge symbolizes a piece of paper.

When to Use

• Reports being generated
• Forms being created or processed
• Printed output
• Paper documents in a workflow

Predefined Process

A rectangle with vertical bars on the sides. Represents a subroutine, function call, or process defined elsewhere.

Use For

• Function or method calls
• References to other flowcharts
• Reusable process blocks
• Library or API calls

Flow Lines (Arrows)

Arrows connect shapes and show the direction of process flow.

Arrow Conventions

Layout Guidelines

• Start at the top - Begin with start symbol at top center
• Flow downward - Main process flows top to bottom
• Align shapes - Use grid snapping for clean alignment
• Consistent sizing - Keep similar shapes the same size
• Minimize crossings - Rearrange to avoid line crossings
• Label decision branches - Always label Yes/No paths

Quick Access

Scripting (API)

Flowchart symbols are plain shapes, so build them from the console via the global window.Yappy object with the generic createElement(type, x, y, width, height, options) and wire them up with createArrow.

// Start -> Process -> Decision
const start = Yappy.createElement('ellipse', 120, 40, 120, 50, { containerText: 'Start' });
const proc  = Yappy.createElement('rectangle', 120, 130, 120, 60, { containerText: 'Validate input' });
const dec   = Yappy.createElement('diamond', 110, 230, 140, 90, { containerText: 'Valid?' });

Yappy.createArrow(180, 90, 180, 130);   // Start -> Process
Yappy.createArrow(180, 190, 180, 230);  // Process -> Decision

Symbol → type string: Process = rectangle, Decision = diamond, Start/End = ellipse (or circle), Data = parallelogram, Document = document, Database = cylinder, Predefined Process = predefinedProcess, Manual Operation = trapezoid.