AIUIaiui/docs

Annotations

Annotations let you draw directly on the AIUI canvas to communicate ideas, highlight areas, and add visual notes. Whether you're sketching a quick concept, marking up a design for feedback, or adding directional cues, annotations provide a flexible drawing layer on top of your nodes.

Annotation Tools

Access annotation tools from the toolbar on the left side of the canvas. Three drawing tools are available:

Tool Icon Purpose
Pen Pencil Freehand drawing
Arrow Arrow Directional indicators
Text T Text labels

Click a tool to activate it. Click again or press Escape to deactivate and return to selection mode.

Pen Tool (Freehand)

The pen tool lets you draw freehand strokes on the canvas.

How to Use

  1. Click the pen icon in the toolbar
  2. Click and drag on the canvas to draw
  3. Release to complete the stroke
  4. Continue drawing additional strokes
  5. Press Escape or click another tool to exit

Use Cases

  • Circle important elements
  • Sketch rough layout ideas
  • Draw attention to specific areas
  • Quick wireframe overlays
  • Gesture-based notes

Freehand strokes are vector-based and scale smoothly with canvas zoom.

Arrow Tool

Create arrows to show direction, flow, or connections between elements.

How to Use

  1. Click the arrow icon in the toolbar
  2. Click where you want the arrow to start
  3. Drag to where you want the arrow to end
  4. Release to place the arrow

Arrow Anatomy

  • Tail: The starting point (where you clicked)
  • Head: The ending point with arrowhead (where you released)
  • The arrow points in the direction of your drag

Use Cases

  • Indicate user flow between screens
  • Point to specific UI elements
  • Show reading direction
  • Connect related annotations
  • Highlight cause-and-effect relationships

Text Tool

Add text labels anywhere on the canvas.

How to Use

  1. Click the text icon in the toolbar
  2. Click on the canvas where you want to place text
  3. A text input appears at that location
  4. Type your message
  5. Click outside or press Enter to confirm

Text Editing

To edit existing text annotations:

  1. Switch to selection mode (press Escape or click the cursor tool)
  2. Double-click the text annotation
  3. Edit the text
  4. Click outside to save

Use Cases

  • Label sections or components
  • Add notes and comments
  • Number steps in a flow
  • Title annotation groups
  • Quick documentation

Color Selection

Customize annotation colors to organize and emphasize your drawings.

Changing Colors

  1. With an annotation tool selected, look for the color picker in the toolbar
  2. Click to open the color palette
  3. Select a color
  4. All new annotations use this color

Available Colors

A curated palette of high-contrast colors ensures visibility against various backgrounds:

  • Red (for critical callouts)
  • Orange (for warnings or secondary emphasis)
  • Yellow (for highlights)
  • Green (for approvals or success states)
  • Blue (for information)
  • Purple (for creative notes)
  • Black (for neutral annotations)

Color Consistency

Choose colors strategically:

  • Use red for issues or required changes
  • Use green for approved elements
  • Use blue for informational notes
  • Maintain consistent meaning across your project

Saving and Persistence

Annotations are saved automatically with your project:

  • Draw annotations on any project canvas
  • Close the project—annotations persist
  • Reopen later—annotations are restored exactly as left
  • Annotations sync across devices when using the same account

Each project maintains its own annotation layer. Annotations in one project don't appear in others.

Deleting Annotations

Remove annotations you no longer need:

Delete Single Annotation

  1. Switch to selection mode (press Escape)
  2. Click the annotation to select it
  3. Press Delete or Backspace

Delete Multiple Annotations

  1. Draw a selection box around annotations, or Shift + Click to multi-select
  2. Press Delete to remove all selected

Clear All Annotations

To remove all annotations from the canvas:

  1. Open the annotation menu (right-click on canvas)
  2. Select Clear All Annotations
  3. Confirm the action

This removes all pen strokes, arrows, and text labels from the current project.

Working with Annotations and Nodes

Annotations exist on a layer above nodes:

  • Draw annotations over, around, or pointing to nodes
  • Annotations don't affect node content or code
  • Move nodes without moving annotations (they're independent)
  • Zoom and pan affects both nodes and annotations together

Annotation Positioning

Annotations are positioned in canvas coordinates:

  • They stay where you draw them relative to the canvas
  • If you move a node, you may need to update related annotations
  • Group related annotations near their corresponding nodes

Best Practices

Keep annotations purposeful: Use annotations for communication, not decoration. Each mark should convey meaning.

Use consistent colors: Establish a color code and stick to it. Team members will quickly learn that red means "needs work" and green means "approved."

Clean up regularly: Delete outdated annotations to keep the canvas readable. Resolved feedback should be removed.

Combine with comments: For detailed feedback requiring discussion, use comments instead of text annotations. Annotations are for quick visual marks; comments are for conversations.

Layer thoughtfully: Place annotations where they enhance understanding without obscuring the designs they reference.

Next Steps

Continue learning about AIUI collaboration features: