slidev-drawings

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Drawings in Slidev

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.

本功能介绍Slidev基于drauu实现的内置绘图与注释特性，让你在演示过程中可实时在幻灯片上绘图、高亮内容并添加注释。

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

在Frontmatter中配置

yaml

---
drawings:
  enabled: true
---

yaml

---
drawings:
  enabled: true
---

Full Configuration

完整配置

yaml

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

yaml

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

选项	类型	默认值	描述
`enabled`	布尔值/字符串	`true`	启用绘图功能（可选值： `true` 、 `false` 、 `'dev'` ）
`persist`	布尔值	`false`	将绘图内容保存至 `.slidev/drawings/` 目录
`presenterOnly`	布尔值	`false`	仅允许演示者绘图
`syncAll`	布尔值	`true`	在所有客户端同步绘图内容

Accessing Drawing Tools

打开绘图工具

Via UI

通过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

绘制直线
按住Shift键可绘制水平/垂直线

使用方法：点击起点，拖动至终点
适用场景：连接元素、指向内容

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

绘制矩形/正方形
按住Shift键可绘制完美正方形

使用方法：点击一个角，拖动至对角
适用场景：高亮区域、框选内容

Ellipse Tool

椭圆工具

Draw circles/ellipses
Hold Shift for perfect circles

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

绘制圆形/椭圆形
按住Shift键可绘制完美圆形

使用方法：点击中心点，拖动至边缘
适用场景：圈选条目、标记重点

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

Slidev可自动检测触控笔输入：

压感支持（若设备支持）
防误触
自然的绘图体验

iPad + Apple Pencil

Works great with:

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

完美适配以下场景：

iPad端Safari浏览器
iPad端Chrome浏览器
Sidecar（将iPad作为第二显示屏）

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

启用持久化

yaml

---
drawings:
  persist: true
---

yaml

---
drawings:
  persist: true
---

Storage Location

存储位置

Drawings saved to:

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

绘图内容将保存至：

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

Benefits

优势

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

绘图内容在页面刷新后仍保留
可包含在导出文件中（如PDF等）
友好支持版本控制（SVG格式）

Clearing Persisted Drawings

清除持久化绘图

Delete files from

.slidev/drawings/

or:

Use "Clear" button in drawing mode
Clear from presenter mode

删除

.slidev/drawings/

目录下的文件，或：

在绘图模式下使用「清除」按钮
在演示者模式中清除

Presenter-Only Mode

仅演示者绘图模式

Configuration

配置

yaml

---
drawings:
  presenterOnly: true
---

yaml

---
drawings:
  presenterOnly: true
---

Behavior

行为

Only presenter can draw
Drawings visible to all audiences
Audience cannot accidentally draw

仅演示者可进行绘图
所有观众均可看到绘图内容
观众无法误操作绘图

Synchronization

同步功能

Sync All Clients

全客户端同步

yaml

---
drawings:
  syncAll: true
---

All connected clients see drawings in real-time.

yaml

---
drawings:
  syncAll: true
---

所有连接的客户端将实时看到绘图内容。

Disable Sync

禁用同步

yaml

---
drawings:
  syncAll: false
---

Only presenter's drawings are synced to audience.

yaml

---
drawings:
  syncAll: false
---

仅演示者的绘图内容会同步给观众。

Best Practices

最佳实践

1. Prepare Key Annotations

1. 提前准备关键注释

Know in advance what you'll highlight:

markdown

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

提前规划好要高亮的内容：

markdown

<!--
注释规划：
- 圈出第5行的错误
- 从输入指向输出的箭头
- 下划线标注关键术语
-->

2. Use Appropriate Tools

2. 选择合适的工具

Need	Tool
Highlight text	Pen (underline)
Point to something	Arrow
Group elements	Rectangle
Mark important	Ellipse

需求	工具
高亮文本	钢笔工具（下划线）
指向内容	箭头工具
分组元素	矩形工具
标记重点	椭圆工具

3. Color Choices

3. 颜色选择

Red: Errors, warnings, important
Green: Success, correct, good
Blue: Information, notes
Yellow: Highlights (if visible on theme)

红色：错误、警告、重点内容
绿色：成功、正确、优质内容
蓝色：信息、备注
黄色：高亮（需适配主题可见性）

4. Clean As You Go

4. 及时清理

Erase unnecessary drawings before moving on
Keep drawings minimal and meaningful
Use "Clear" when starting fresh concept

切换页面前擦除不必要的绘图
保持绘图简洁且有意义
讲解新内容时使用「清除」功能

5. Practice Drawing

5. 提前练习

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

绘图模式激活时：

按键	操作
`1`	切换至钢笔工具
`2`	切换至直线工具
`3`	切换至箭头工具
`4`	切换至矩形工具
`5`	切换至椭圆工具
`e`	切换至橡皮擦
`c`	清除所有绘图
`Esc`	退出绘图模式

Integration with Slides

与幻灯片的集成

Drawing Over Code

在代码上绘图

markdown

undefined

markdown

undefined

Code Review

代码评审

python

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

Draw a circle around the important line during presentation.

undefined

python

def calculate(x, y):
    result = x + y  # 圈出此行
    return result

演示时圈出重要代码行。

undefined

Drawing Over Diagrams

在图表上绘图

markdown

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

Use arrows to trace the flow during explanation.

undefined

markdown

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

讲解时用箭头追踪流程。

undefined

Drawing Over Images

在图片上绘图

markdown

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

Annotate specific components during walkthrough.

markdown

![架构图](/images/architecture.png)

讲解时为特定组件添加注释。

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

检查
```
drawings.enabled: true
```
配置
刷新浏览器
检查是否存在CSS冲突

Sync Issues

同步问题

Verify
```
syncAll
```
setting
Check network connection
Refresh all clients

验证
```
syncAll
```
配置
检查网络连接
刷新所有客户端

Persistence Not Working

持久化功能失效

Check
```
persist: true
```
Verify
```
.slidev/
```
directory exists
Check file permissions

检查
```
persist: true
```
配置
确认
```
.slidev/
```
目录存在
检查文件权限

Stylus Not Working

触控笔无法使用

Check browser compatibility
Verify stylus is connected
Try different browser

检查浏览器兼容性
确认触控笔已连接
尝试更换浏览器

Output Format

配置格式

When configuring drawings:

yaml

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

配置绘图功能时：

yaml

---
drawings:
  enabled: true      # 启用绘图功能
  persist: true      # 在会话间保存绘图内容
  presenterOnly: true # 仅允许演示者绘图
  syncAll: true      # 同步至所有观众
---

单页幻灯片绘图规划：

[要绘制/高亮的内容]
[使用的工具]
[颜色选择]
[讲解时机]

清理计划：

之前清除：[是/否]
之后清除：[是/否]