Annotation Tools

Overview #

The Annotation Tools provide a way to add visual documentation, notes, and explanatory elements directly to your workflow canvas. Located on the right side of the workflow builder, these tools help you create clearer, self-documenting workflows.

Annotation Types #

1. Sticky Notes #

• Purpose: Add detailed explanations or reminders to your workflow
• Features:
  • Resizable note area
  • Rich text input
  • Color customization (5 preset colors)
  • Draggable positioning
  • Delete functionality
• Usage:
  1. Drag the note icon (📝) onto the canvas
  2. Type your note content
  3. Choose a background color
  4. Resize by dragging corners
  5. Position anywhere on the canvas

2. Text Annotations #

• Purpose: Add labels, titles, or brief descriptions
• Features:
  • Adjustable font size (12-32px)
  • Width resizing
  • Transparent background
  • Single-line or multi-line text
  • Delete functionality
• Usage:
  1. Drag the text icon (T) onto the canvas
  2. Enter your text
  3. Adjust font size using the slider
  4. Resize width if needed
  5. Position as desired

3. Shapes #

• Purpose: Highlight areas or create visual groupings
• Features:
  • Multiple shape options:
    • Rectangle
    • Circle
    • Triangle
  • Color customization
  • Resizable dimensions
  • Delete functionality
• Usage:
  1. Drag the shape icon (⬚) onto the canvas
  2. Select shape type from dropdown
  3. Choose fill color
  4. Resize to desired dimensions
  5. Position to highlight relevant areas

Common Features #

Drag and Drop #

• All annotation elements can be dragged from the toolbar
• Position anywhere on the workflow canvas
• Click and drag to reposition after placement

Resizing #

• Grab handles appear on selection
• Corners allow proportional resizing
• Edges allow single-dimension resizing
• Minimum sizes enforced to maintain usability

Deletion #

• Hover over any annotation to reveal delete button
• Click the red delete icon to remove
• No undo functionality (be careful!)

Selection #

• Click to select any annotation
• Blue border indicates selection
• Access additional options when selected

Best Practices #

Organization #

1. Color Coding
   • Use consistent colors for similar types of notes
   • Choose colors that contrast well with the workflow background
   • Consider using different colors for different purposes:
     • Yellow for warnings/important notes
     • Blue for technical details
     • Green for success paths
     • Pink for error handling
2. Positioning
   • Place notes close to relevant nodes
   • Avoid overlapping with nodes or connections
   • Group related annotations together
   • Leave space for workflow expansion
3. Content
   • Keep text annotations concise
   • Use sticky notes for longer explanations
   • Include important context and dependencies
   • Document assumptions and requirements

Workflow Documentation #

1. Overview Information
   • Add a title at the top
   • Include version number
   • Document last modified date
   • List primary stakeholders
2. Technical Details
   • Document API endpoints
   • Note required credentials
   • Explain custom configurations
   • List dependencies
3. Process Flow
   • Mark decision points
   • Highlight conditional paths
   • Document expected outcomes
   • Note potential error conditions

Tips for Success #

1. Keep It Clean
   • Remove outdated annotations
   • Align annotations neatly
   • Don’t overcrowd the canvas
   • Use consistent spacing
2. Be Descriptive
   • Write clear, actionable notes
   • Include examples where helpful
   • Document edge cases
   • Explain complex logic
3. Regular Updates
   • Review annotations periodically
   • Update when workflow changes
   • Remove obsolete information
   • Add new context as needed

Troubleshooting #

Common Issues #

1. Cannot Delete Annotation
   • Ensure you’re hovering over the annotation
   • Look for the red delete button
   • Try selecting and then deleting
2. Resizing Problems
   • Check for minimum size restrictions
   • Ensure you’re grabbing the correct handle
   • Try selecting the annotation first
3. Text Not Visible
   • Check font size settings
   • Ensure text color contrasts with background
   • Verify text input is not empty

Keyboard Shortcuts #

• Delete selected annotation: Delete or Backspace
• Cancel annotation placement: Escape
• Multi-select annotations: Shift + Click

Technical Notes #

• Annotations are saved with your workflow
• They don’t affect workflow execution
• Annotations have a lower z-index than nodes
• Maximum recommended annotations per workflow: 20-30

By effectively using annotation tools, you can create self-documenting workflows that are easier to understand and maintain. Remember to keep annotations clear, relevant, and up-to-date for maximum benefit.