Drawings in Slidev

This skill covers Slidev's built-in drawing and annotation features powered by drauu, allowing you to draw, highlight, and annotate slides in real-time during presentations.

When to Use This Skill

• Highlighting important content during presentations

• Drawing diagrams on the fly

• Annotating code or images

• Interactive teaching sessions

• Brainstorming visualizations

Enabling Drawings

In Frontmatter

drawings: enabled: true

Full Configuration

drawings: enabled: true persist: false presenterOnly: false syncAll: true

Drawing Options

Option Type Default Description

enabled

boolean/string true

Enable drawings (true , false , 'dev' )

persist

boolean false

Save drawings to .slidev/drawings/

presenterOnly

boolean false

Only presenter can draw

syncAll

boolean true

Sync drawings across all clients

Accessing Drawing Tools

Via UI

• Click the pen/pencil icon in the navigation bar

• Drawing toolbar appears

Toolbar Options

• Pen: Freehand drawing

• Line: Straight lines

• Arrow: Lines with arrowheads

• Rectangle: Draw rectangles

• Ellipse: Draw circles/ellipses

• Eraser: Remove drawings

• Clear: Remove all drawings

Drawing Tools Detailed

Pen Tool

• Freehand drawing

• Adjustable stroke width

• Color selection

Usage: Click and drag to draw Good for: Underlining, circling, quick annotations

Line Tool

• Creates straight lines

• Hold Shift for horizontal/vertical lines

Usage: Click start point, drag to end Good for: Connecting elements, pointing

Arrow Tool

• Lines with arrowheads

• Directional indicators

Usage: Click start, drag to arrow point Good for: Showing flow, indicating direction

Rectangle Tool

• Draw rectangles/squares

• Hold Shift for perfect squares

Usage: Click corner, drag to opposite corner Good for: Highlighting areas, boxing content

Ellipse Tool

• Draw circles/ellipses

• Hold Shift for perfect circles

Usage: Click center, drag to edge Good for: Circling items, attention markers

Eraser

• Remove specific drawings

• Click on drawing to erase it

Usage: Click on drawn elements to remove Good for: Correcting mistakes, cleaning up

Stylus/Pen Support

Automatic Detection

Slidev automatically detects stylus input:

• Pressure sensitivity (if supported)

• Palm rejection

• Natural drawing experience

iPad + Apple Pencil

Works great with:

• Safari on iPad

• Chrome on iPad

• Sidecar (iPad as second display)

Color and Style

Changing Colors

Click color selector in drawing toolbar:

• Preset colors available

• Some themes support custom colors

Stroke Width

Adjust stroke width for:

• Thin lines (precision)

• Thick lines (visibility)

Persisting Drawings

Enable Persistence

drawings: persist: true

Storage Location

Drawings saved to:

.slidev/drawings/[slide-number].svg

Benefits

• Drawings survive page reloads

• Include in exports (PDF, etc.)

• Version control friendly (SVG format)

Clearing Persisted Drawings

Delete files from .slidev/drawings/ or:

• Use "Clear" button in drawing mode

• Clear from presenter mode

Presenter-Only Mode

Configuration

drawings: presenterOnly: true

Behavior

• Only presenter can draw

• Drawings visible to all audiences

• Audience cannot accidentally draw

Synchronization

Sync All Clients

drawings: syncAll: true

All connected clients see drawings in real-time.

Disable Sync

drawings: syncAll: false

Only presenter's drawings are synced to audience.

Best Practices

1. Prepare Key Annotations

Know in advance what you'll highlight:

<!-- ANNOTATIONS:

• Circle the error on line 5
• Arrow from input to output
• Underline the key term -->

2. Use Appropriate Tools

Need Tool

Highlight text Pen (underline)

Point to something Arrow

Group elements Rectangle

Mark important Ellipse

3. Color Choices

• Red: Errors, warnings, important

• Green: Success, correct, good

• Blue: Information, notes

• Yellow: Highlights (if visible on theme)

4. Clean As You Go

• Erase unnecessary drawings before moving on

• Keep drawings minimal and meaningful

• Use "Clear" when starting fresh concept

5. Practice Drawing

• Test stylus pressure/speed

• Practice common shapes

• Know your drawing shortcuts

Keyboard Shortcuts

When drawing mode is active:

Key Action

1

Pen tool

2

Line tool

3

Arrow tool

4

Rectangle tool

5

Ellipse tool

e

Eraser

c

Clear all

Esc

Exit drawing mode

Integration with Slides

Drawing Over Code

Code Review

def calculate(x, y):
    result = x + y  # Circle this line
    return result

Draw a circle around the important line during presentation.

### Drawing Over Diagrams

```markdown
```mermaid
graph LR
    A --> B --> C

Use arrows to trace the flow during explanation.

### Drawing Over Images

```markdown
![Architecture](/images/architecture.png)

Annotate specific components during walkthrough.

Common Patterns

Highlight and Explain

- Show slide content

- Activate drawing mode

- Circle/underline key points

- Explain while pointing

Build Diagram Live

- Show empty/partial diagram

- Draw connections as you explain

- Add labels with rectangles

Code Walkthrough

- Display code block

- Draw arrows showing execution flow

- Circle variables being discussed

- Underline return values

Before/After

- Draw "X" over old approach

- Draw checkmark on new approach

Troubleshooting

Drawings Not Appearing

- Check drawings.enabled: true

- Refresh browser

- Check for CSS conflicts

Sync Issues

- Verify syncAll
 setting

- Check network connection

- Refresh all clients

Persistence Not Working

- Check persist: true

- Verify .slidev/
 directory exists

- Check file permissions

Stylus Not Working

- Check browser compatibility

- Verify stylus is connected

- Try different browser

Output Format

When configuring drawings:

---
drawings:
  enabled: true      # Enable drawing feature
  persist: true      # Save drawings between sessions
  presenterOnly: true # Only presenter can draw
  syncAll: true      # Sync to all viewers
---

DRAWING PLAN FOR SLIDE:

- [What to draw/highlight]

- [Tool to use]

- [Color choice]

- [When in explanation]

CLEANUP:

- Clear before: [yes/no]

- Clear after: [yes/no]