Skip to content

drawtonomy — whiteboard for driving scenarios

A free, browser-based whiteboard for driving scenarios. Sketch lanes, intersections, and traffic scenes for papers, slides, design reviews, and scenario authoring — and play any .xosc you have in the same browser, built on esmini-WASM. No install. No account.

drawtonomy is a free, browser-based whiteboard for driving scenarios — self-driving (AV), autonomous driving (AD), and ADAS alike.

Place lanes, intersections, vehicles, pedestrians, traffic lights, and road markings as first-class shapes. No install, no account, nothing uploaded. When you need it, the same scene also exports to ASAM OpenDRIVE 1.8, OpenSCENARIO 1.3, and esmini-ready zip bundles, and imports Lanelet2 OSM maps and ROS occupancy grids — but those are bridges out, not the main event (see Bridges to your simulation and mapping stack below).

Use it for the figures you put in a paper, the slide you sketch before a design review, the diagram you draw on a call when you’re trying to explain a corner case to the rest of the team, or the scene you sketch out before writing the OpenSCENARIO file. The same canvas works for self-driving (AV) research figures, autonomous-driving (AD) design reviews, and ADAS test-scenario sketches — cut-in, lane change, unprotected left, roundabout entry, pedestrian crossing, lead-vehicle braking, and other common scenarios are all routine sketches here.

The lane / vehicle / intersection vocabulary is general enough that the same canvas also works for driving-school lesson plans, road safety education materials, traffic-engineering concept figures, and quick personal sketches of road scenes — see use cases for the full list.

The canvas also ships a Math (LaTeX) tool that renders equations with KaTeX, so you can drop a typeset cost function or controller equation next to the scenario it describes. It works just as well as a standalone, free, browser-based LaTeX equation editor for paper figures, slide decks, Notion, or blog posts — see equations in research paper figures and equations in slides and blog posts.

The reason it exists: generic drawing tools and slide decks don’t know what a lane is, so the road geometry has to be rebuilt every time something moves. drawtonomy treats lanes, intersections, and the rest of the driving-scenario vocabulary as built-in shapes, so the figure stays correct as you iterate.

The whiteboard is the main thing, but the same canvas also doubles as a lightweight, browser-based front-end for these adjacent jobs:

Pick the entry point that matches what you came here for.

Figures for papers and theses

Crisp, vector scenario figures for self-driving (AV), autonomous-driving (AD), and ADAS papers that embed cleanly in LaTeX, slide decks, and Markdown — exported as .drawtonomy.svg (drawtonomy’s native, re-editable SVG format), PDF, or EPS.

Diagrams for design discussion

Sketch a lane-change manoeuvre, an unprotected left, or an occlusion case in seconds. Share the result and pick up the discussion in the same canvas tomorrow.

Scenario sketches before authoring

Draw the scene before writing the OpenSCENARIO XML — and export to .xosc / .xodr when the sketch is ready.

Map and ROS annotation

Trace lanes over a satellite background, edit Lanelet2 OSM maps, or annotate a ROS occupancy grid with paths and obstacles.

Why it’s faster than a generic drawing tool

Section titled “Why it’s faster than a generic drawing tool”

Driving-domain shapes

Lanes, intersections, crosswalks, traffic lights, road markings, vehicles, and pedestrians come built in. You can also add your own SVG templates and contribute them by PR.

Topology-aware lanes

Each lane carries Next / Previous / Left / Right connections. Two lanes that share a boundary share the same boundary points, so dragging once moves both.

Infinite canvas, satellite backgrounds

An infinite canvas for driving scenarios — pan and zoom across arbitrarily large layouts. Drop in a satellite or roadmap background and trace from a real location. Snap and shared points keep geometry aligned without manual cleanup.

Free and browser-only

No install, no account, no upload. Reopen a saved drawtonomy.svg later and the scene comes back exactly as you left it, connections and overlap relationships included.

Bridges to your simulation and mapping stack

Section titled “Bridges to your simulation and mapping stack”

The whiteboard is the main thing; these are how the diagram flows out to the rest of the workflow.

Re-editable SVG for papers and slides

The .drawtonomy.svg format is a regular SVG that previews in browsers, GitHub, and slide decks, and reopens in drawtonomy with every connection intact. The default to reach for whenever a figure might need editing later — papers, slides, documentation, blog posts.

Lanelet2 round-trip

Open Lanelet2 OSM maps for editing and export back to OSM — including Autoware sample maps and their regulatory elements. Useful for sketching changes against an existing HD map.

ASAM OpenDRIVE round-trip

Open OpenDRIVE .xodr maps, edit lanes and connections visually, and export OpenDRIVE 1.8 + OpenSCENARIO 1.3 — together as an esmini-ready zip. Roads you don’t touch round-trip verbatim through carry-through.

OpenDRIVE ⇄ Lanelet2 bridge

Both formats land in the same internal lane model, so drawtonomy works as a browser bridge between OpenDRIVE and Lanelet2: import one, edit visually, export the other. Lanes, junctions, and regulatory elements (signals, signs, right-of-way) convert in both directions.

Once the evaluation phase is done and you actually want to draw, the docs are organised around four kinds of need. Pick the one that matches what you’re trying to do.

If you want to build on top of drawtonomy rather than only use it, see Extending drawtonomy. The SDK source, examples, and reference live alongside this site at github.com/kosuke55/drawtonomy.