drawtonomy

Free Whiteboard for Creating Driving Diagrams 🚗

Intuitively place lanes, vehicles, pedestrians, and traffic lights.
Free and browser-based. For autonomous driving development, traffic planning, and driving education.

🌐 Try it now at drawtonomy.com | 💬 Report issues / Request features

✨ Features

• 🎨 Infinite Canvas - Freely draw extensive road networks
• 🛣️ Lane Connection Management - Edit with understanding of lane relationships
• ⚡ Lane Tool - Auto-generate from centerline or create from existing boundaries
• ➕ Intersection Templates - Place complex intersections with one click
• 🚙 Rich Drawing Tools & Templates - Various vehicles, pedestrians, traffic lights
• 🧲 Snap Function - Auto-snap to existing points and lines
• 🔗 Point Sharing - Connect shapes by sharing existing points
• 🎨 Style Customization - Set color, opacity, width, and style individually
• 💾 Editable Save Format - Re-edit while preserving lane connection info
• 🗺️ Lanelet2 Support - Import OSM format maps

🎯 Main Features

🛣️ Lane Connection Management

Edit with understanding of lane relationships. Moving boundaries auto-transforms connected lanes. Set direction and adjacency with Next/Previous/Left/Right Lane.

⚡ Lane Tool

Auto-generate left and right boundaries by clicking the centerline. Efficiently create multiple lanes by specifying width, and draw connected lanes continuously. You can also create lanes by selecting two existing Linestrings.

➕ Intersection

Place complex intersection structures with templates in one click.

🚙 Rich Drawing Tools & Templates

Drawing tools and shape templates for easily expressing autonomous driving scenarios.

🚗 Autonomous Driving Focused:

• Linestring (continuous lines for lane boundaries, etc.)
• Lane
• Vehicle (Sedan, Bus, Truck, Motorcycle templates)
• Pedestrian (Walking, Simple templates)
• Path (Arrow style, Band style)
• Polygon
• Crosswalk
• TrafficLight (vehicle and pedestrian signals)
• Intersection

✏️ Basic Shapes:

• LineArrow
• Arrow
• Text
• Freehand
• Rectangle
• Ellipse
• Image

🧲 Snap Function

Auto-snaps to existing points and lines. Hold Shift while drawing to temporarily disable snapping.

🔗 Point Sharing

Hold Alt(Option) and click to share existing points and connect Linestring, Polygon, and Path.

🎨 Style Customization

Set color, opacity, width, and style individually. Change default values from the hamburger menu.

✏️ Segment Editing

Double-click Linestring, Lane, or Polygon to select and edit segments (between two points). Click on a segment to add new points for fine shape adjustments.

📦 Export/Import

Supported Formats

Format	Export	Import	Note
SVG	✓	✓
PNG	✓	✓
JPG	✓	✓
PDF	✓
EPS	✓		No transparency
drawtonomy.svg	✓	✓	Re-editable
OSM (Lanelet2)		✓

Note on EPS export: EPS format does not support transparency. When exporting shapes with opacity settings, the exported EPS will show shapes at full opacity, which may differ from the canvas display. For accurate transparency rendering, use PDF export instead.

Lanelet2 Import

Import Lanelet2 OSM format maps for editing. Sample maps: Autoware Documentation

You can also select and import only specific lanes. For optimal performance, we recommend keeping the number of lanes under 500.

⌨️ Keyboard Shortcuts

Tool Switching

Key	Function
M	Hand (pan tool)
V	Select tool
L	Create Linestring
N	Create Lane
P	Participants (Vehicle/Pedestrian)
H	Create Path
G	Create Polygon
X	Create Crosswalk
I	Create Intersection
W	Create LineArrow
T	Create Text
D	Create Freehand

Edit Operations

Key	Function
Ctrl+Z / Cmd+Z	Undo
Ctrl+Shift+Z / Cmd+Shift+Z	Redo
Ctrl+C / Cmd+C	Copy
Ctrl+V / Cmd+V	Paste
Delete / Backspace	Delete
Shift	Temporarily disable snap (while drawing)
Alt + Click	Share existing point (Linestring/Polygon/Path)
Double-click	Segment editing (Linestring/Lane/Polygon)