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.
But the scene you draw is not the end of the road. In Scenario mode the same canvas becomes an OpenSCENARIO authoring tool: give the actors phases, events, and triggers, then press play and watch the run execute in the browser on esmini compiled to WebAssembly, with a PASS / FAIL verdict at the end. Authoring and running OpenSCENARIO is a pillar of its own, not a bridge out.
The genuine bridges are the ones that carry a scene sideways into a neighbouring toolchain: export to ASAM OpenDRIVE 1.8 and import Lanelet2 OSM maps and ROS occupancy grids (see Bridges to your simulation and mapping stack below).
It also works where the scenarios already are. Most .xosc files live
in a Git repository, so the
drawtonomy for GitHub Chrome
extension plays them in place on github.com — read a scenario, or page
through a whole folder of them, without cloning the repository or
installing a simulator.
The two are one pipeline, not separate products. What you draw is exactly what runs: the lanes, actors, and geometry from the scene become the road network and entities the scenario plays on. No export step in between, no second tool. Sketch → runnable scenario → shareable link with a PASS / FAIL verdict.
Want proof before reading any further?
Play a real scenario from the esmini repository right now
— one click fetches the .xosc from GitHub and runs it in your
browser. Any public GitHub .xosc link works the same way; see
Open and play a .xosc.
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.
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.
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.2 — 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.
