Drawings in Slidev

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

enabled

true

true

false

'dev'

persist

false

.slidev/drawings/

presenterOnly

false

syncAll

true

Accessing Drawing Tools

Via UI

1. Click the pen/pencil icon in the navigation bar
2. 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

• Pressure sensitivity (if supported)
• Palm rejection
• Natural drawing experience

iPad + Apple Pencil

• Safari on iPad
• Chrome on iPad
• Sidecar (iPad as second display)

Color and Style

Changing Colors

• Preset colors available
• Some themes support custom colors

Stroke Width

• Thin lines (precision)
• Thick lines (visibility)

Persisting Drawings

Enable Persistence

---
drawings:
  persist: true
---

Storage Location

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

Benefits

• Drawings survive page reloads
• Include in exports (PDF, etc.)
• Version control friendly (SVG format)

Clearing Persisted Drawings

.slidev/drawings/

• 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
---

Disable Sync

---
drawings:
  syncAll: false
---

Best Practices

1. Prepare Key Annotations

<!--
ANNOTATIONS:
- Circle the error on line 5
- Arrow from input to output
- Underline the key term
-->

2. Use Appropriate Tools

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

1

2

3

4

5

e

c

Esc

Integration with Slides

Drawing Over Code

# Code Review

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

### Drawing Over Diagrams

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

### Drawing Over Images

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

Annotate specific components during walkthrough.

Common Patterns

Highlight and Explain

1. Show slide content
2. Activate drawing mode
3. Circle/underline key points
4. Explain while pointing

Build Diagram Live

1. Show empty/partial diagram
2. Draw connections as you explain
3. Add labels with rectangles

Code Walkthrough

1. Display code block
2. Draw arrows showing execution flow
3. Circle variables being discussed
4. Underline return values

Before/After

1. Draw "X" over old approach
2. Draw checkmark on new approach

Troubleshooting

Drawings Not Appearing

1. Check

   drawings.enabled: true

2. Refresh browser
3. Check for CSS conflicts

Sync Issues

1. Verify

   syncAll

   setting
2. Check network connection
3. Refresh all clients

Persistence Not Working

1. Check

   persist: true

2. Verify

   .slidev/

   directory exists
3. Check file permissions

Stylus Not Working

1. Check browser compatibility
2. Verify stylus is connected
3. Try different browser

Output Format

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

1. [What to draw/highlight]
2. [Tool to use]
3. [Color choice]
4. [When in explanation]

• Clear before: [yes/no]
• Clear after: [yes/no]