drawtonomy — whiteboard for driving scenarios

Find what you need

The docs are organised around four kinds of need. Pick the one that matches what you’re trying to do.

Tutorials Learn by doing. Step-by-step lessons from a blank canvas to a finished scene.

How-to guides Get a specific job done. Recipes for lanes, vehicles, exports, and imports.

Reference Look up the facts. Shortcuts, file formats, shape catalog, and SDK APIs.

Explanation Understand the model. Why drawtonomy works the way it does.

What is drawtonomy?

drawtonomy is a whiteboard for driving scenarios — 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, the scene you sketch out before writing the OpenSCENARIO file.

Open the URL, draw lanes and intersections on an infinite canvas, drop in vehicles, pedestrians, traffic lights, crosswalks, and road markings, then save or export. Nothing to install, no account, nothing uploaded.

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.

What people use it for

Figures for papers and theses

Crisp, vector autonomous-driving scenario figures that embed cleanly in LaTeX, slide decks, and Markdown — exported as drawtonomy.svg, 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

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

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

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

drawtonomy.svg is a regular SVG that previews in browsers, GitHub, and slide decks, and reopens in drawtonomy with every connection intact. The default for figures in documentation and research papers.

Lanelet2 round-trip

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

ASAM OpenDRIVE / OpenSCENARIO

Export OpenDRIVE 1.8 and OpenSCENARIO 1.3 — together as an esmini-ready zip when you want to play your scene back in a simulator.

AI Scene Generator

Describe a scenario in natural language, or paste OpenSCENARIO XML, and get an editable canvas back. The output is a normal drawtonomy scene; refine it like anything else.

For extension developers

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.