Sketchnote Shapes

Adding Sketchnote Shapes

The sketchnote vocabulary lives in the Sketchnote & People group on the toolbar (icons, faces, people, containers, dividers and markers). Drop them onto the canvas like any other shape:

1. Open the Sketchnote & People group in the toolbar, or press / to open the command palette and search by name (e.g. "lightbulb", "thumbs up", "wavy divider").
2. Pick a shape, then click once on the canvas to drop it at a default size, or click-drag to size it while placing.
3. Double-click a container shape (sticky note, scroll, banner, speech bubble) to type a label inside it.
4. Use the Properties panel to set stroke and fill colour, and increase Roughness for a loose, hand-drawn look.
5. Switch the drawing style to Sketch for the classic sketchnote feel, or Architectural for clean lines — every shape renders in both.

Icons & Symbols

People & Expressions

Emotion Faces

Containers & Frames

Status & Markers

Growth & Connection

Dividers & Separators

• Wavy Divider - Organic section separator
• Dashed Line - Subtle separation
• Arrow Trail - Directional flow between sections

Sketchnoting Tips

Start Simple

• Begin with basic shapes (circles, squares, triangles)
• Add simple icons to convey meaning
• Use containers to group related ideas

Create Visual Hierarchy

• Size - Bigger = more important
• Color - Use accent colors for key points
• Position - Top/center for main ideas
• Containers - Frame important content

Connect Ideas

• Use arrows to show relationships
• Group related items visually
• Create flow with directional elements

Add Personality

• Include people and faces
• Use hand-drawn style (increase roughness)
• Add small decorative elements

Layout Patterns

• Linear - Top to bottom, like a list
• Radial - Central topic with branches
• Path - Follow a journey or timeline
• Modular - Grid of related sections
• Popcorn - Scattered, organic placement

Scripting (API)

Sketchnote shapes are ordinary Yappy elements, so you can generate a whole visual note from code. The API is exposed on the global window.Yappy object. Use Yappy.createElement(type, x, y, width, height, options) with a sketchnote type string, then adjust it with Yappy.updateElement(id, { ... }).

Element Types

Compose a Sketchnote

// window.Yappy is the global scripting entry point.

// A key insight, called out with a lightbulb and a banner label
const idea = Yappy.createElement('lightbulb', 120, 120, 80, 100, {
    strokeColor: '#f59e0b',
    roughness: 2               // loose, hand-drawn line
});

const banner = Yappy.createElement('doubleBanner', 240, 130, 220, 60, {
    containerText: 'Big Idea', // label rendered inside the container
    strokeColor: '#1e293b'
});

// A to-do marker and a happy face for a positive outcome
Yappy.createElement('checkbox', 120, 280, 40, 40);
Yappy.createElement('faceHappy', 200, 275, 50, 50, {
    strokeColor: '#16a34a'
});

// Show a relationship between two ideas
Yappy.connect(idea, banner, { type: 'arrow' });

Restyle a Shape Later

// Give the banner a solid fill and a new label
Yappy.updateElement(banner, {
    backgroundColor: '#fef3c7',
    fillStyle: 'solid',
    containerText: 'Key Takeaway'
});