Skip to main content
Version: 1.0 archive

Smart Lines and Arrows

Smart Line and Smart Arrow are native editable objects for clean whiteboard diagrams. They are not generic SVG hacks.

Under the hood, Scribe Animator stores them as:

  • smartLine
  • smartArrow

Use them for process diagrams, concept maps, before/after flows, product walkthroughs, callouts, and educational explainers.

Visual orientation​

Scribe Animator desktop canvas toolbar with the Smart Line split-button menu open
The connector control is a split button: the main half inserts the currently displayed route, while the chevron opens the Smart Line and Smart Arrow families.
Screenshot callouts
  1. Current connector
    Click the main button to insert the displayed Smart Line or Smart Arrow route immediately.
  2. Variant chevron
    Open the family menu without inserting an object.
  3. Smart Line
    Choose a non-directional connector, then select Straight, Curved, or Elbow.
  4. Smart Arrow
    Choose a directional connector with the same three route families.
Product UI verification

This capture and its control locations were checked against the running desktop editor with browser-based UI review on July 26, 2026. For real selection, attachment, endpoint, waypoint, styling, Desktop, and Mobile Lite steps, follow Select, arrange, group, and connect objects.

Variants​

Smart Lines and Smart Arrows support three route variants:

  • Straight
  • Curved
  • Elbow

Use Smart Line for a non-directional relationship between ideas. Use Smart Arrow when you need to show flow, sequence, dependency, or cause and effect.

Common Uses​

  • Process diagram animation
  • Concept maps
  • Before/after flows
  • Product walkthroughs
  • Callouts
  • Educational explainers
  • Arrows between concepts

Basic Workflow​

  1. Choose Smart Line or Smart Arrow from the toolbar.
  2. Choose a straight, curved, or elbow route.
  3. Place it on the canvas.
  4. Edit the route and style.
  5. Animate or reveal it as part of the scene.

Template Authoring Guidance​

When writing or generating templates, do not fake arrows with inline SVG if the intent is an editable relationship arrow.

Prefer native smartLine and smartArrow objects in AI-generated templates. They stay editable in the editor and work better for repeatable whiteboard explainer layouts.