Sticky Notes

Add visual annotations and documentation directly to your workflows with rich text sticky notes.

Overview

Sticky notes are non-executing documentation nodes that function like digital post-it notes. They provide context, explanations, and reminders without affecting workflow execution.

Key Features

Rich Text Editing

• Dual editing modes: Edit directly in the note or use the side panel editor
• Formatting options: Bold, italic, underline, bullet lists, numbered lists
• Real-time sync: Changes sync instantly between inline and side panel editors
• Floating toolbar: Appears when you select text for quick formatting
• Keyboard shortcuts: Standard text editing shortcuts (Ctrl/Cmd+B for bold, etc.)

Visual Customization

• 8 color options: Yellow (default), green, red, blue, purple, orange, light yellow, lavender
• Resizable: Drag the corner handle to resize (minimum 120×80px)
• Collapsible: Minimize to a compact header when not needed
• Custom title: Set a custom name that appears when minimized

Non-Executing Nature

• No connection handles: Sticky notes don't connect to other nodes
• No validation warnings: Since they don't execute, they have no error states
• Excluded from execution: The workflow executor automatically skips sticky notes
• Documentation only: Perfect for team collaboration and workflow documentation

How to Add Sticky Notes

Method 1: Drag from Sidebar

1. Open the Nodes panel in the left sidebar
2. Find "Sticky Note" at the top of the core nodes list (yellow background)
3. Drag it onto the workflow canvas

Method 2: Right-Click Context Menu

1. Right-click on an empty area of the canvas
2. Select "Add" → "Sticky Note"
3. The note appears at the click location

Editing Sticky Notes

Inline Editing

1. Click in the content area (not the header bar) to start typing
2. The cursor changes to a text cursor when hovering over the content
3. Select text to see the floating formatting toolbar
4. Changes save automatically when you click outside

Side Panel Editor

1. Click on the sticky note to select it
2. The configuration panel opens on the right side
3. Edit the note title in the "Note Title" field
4. Use the rich text editor with the formatting toolbar
5. Change the background color using the color picker
6. All changes sync in real-time with the canvas note

Controls and Interactions

Header Bar Controls

• Drag handle: Click and drag the header bar to move the note
• Color picker: Click the palette icon to change background color
• Delete button: Click the X to remove the note
• Minimize/Maximize: Click to collapse or expand the note

Resizing

• Drag the resize handle in the bottom-right corner
• Minimum size: 120×80 pixels
• Default size: 200×150 pixels
• Size is preserved when saving workflows

Minimizing

• Click the minimize icon in the header to collapse
• When minimized, shows only the header with the note title
• Click maximize to expand back to full size
• Content continues to sync even when minimized

Best Practices

Use Cases

• Workflow documentation: Explain complex logic or decision points
• Team collaboration: Leave notes for other team members
• TODOs and reminders: Track improvements or issues
• Section labels: Group and label different parts of large workflows
• Debug notes: Document testing observations or known issues

Color Coding Strategy

• Yellow: General notes and explanations
• Red: Warnings, important information, or blockers
• Green: Completed sections or success notes
• Blue: Links, references, or external dependencies
• Purple: Future enhancements or ideas
• Orange: Testing notes or temporary markers

Keyboard Shortcuts

Advanced Features

Real-Time Collaboration

When working with teams, sticky notes provide immediate visual feedback about workflow changes and decisions. Use them to communicate intent and document decisions for future reference.

Workflow Documentation Patterns

1. Section Headers: Use different colored notes as visual dividers
2. Decision Documentation: Place notes near condition nodes to explain logic
3. API Documentation: Document required headers, responses, and rate limits
4. Error Handling Notes: Document known issues and workarounds

Technical Details

Storage Format

Sticky notes are saved as part of the workflow with these properties:

• type: 'note' - Identifies it as a sticky note
• content - HTML content preserving rich text formatting
• displayName - Custom title shown when minimized
• position - X/Y coordinates on the canvas
• noteWidth / noteHeight - Custom dimensions
• backgroundColor - Selected color
• isMinimized - Collapsed state

Performance

• Minimal performance impact on workflow execution
• Rich text rendered using native browser capabilities
• Content syncs efficiently between editing modes
• Excluded from execution graph processing

Troubleshooting

Common Issues

• Can't type in note: Make sure you're clicking in the content area, not the header
• Note keeps moving: Use the header bar to drag, not the content area
• Formatting not working: Select text first, then use toolbar buttons
• Changes not saving: Click outside the note or switch to another node to save

Browser Compatibility

• Rich text editing requires a modern browser with contentEditable support
• All major browsers (Chrome, Firefox, Safari, Edge) are fully supported
• Some advanced formatting may vary slightly between browsers

Examples

Example 1: API Documentation

Place a yellow sticky note near your HTTP Request node:

API Configuration
• Required headers: Authorization, Content-Type
• Rate limit: 100 requests/minute
• Expected response: JSON with 'data' array

Example 2: Workflow Section Header

Use a green sticky note to mark major sections:

Data Processing Pipeline
This section handles data transformation and validation before sending to the API.

Example 3: Debug Information

Add a red sticky note for important warnings:

⚠️ Known Issue
API timeout on datasets > 1000 records
Workaround: Reduce batch size to 100
TODO: Implement retry logic

Related Documentation

• Node Types Overview
• Building Workflows
• Keyboard Shortcuts
• Getting Started