diff --git a/README.ja.md b/README.ja.md new file mode 100644 index 0000000..49cfee0 --- /dev/null +++ b/README.ja.md @@ -0,0 +1,102 @@ +# drawtonomy + +

+ シーンを描く。シナリオを走らせる。🚗 +

+ +

+ 無料のブラウザ完結型、運転シナリオ用ホワイトボード。
+ インストールもアカウント登録も不要です。 +

+ +

+ 🎬 シナリオを再生してみる | + 🎨 今すぐ描く | + 📖 ドキュメント | + 💬 Issues +

+ +

+ +

+ +drawtonomy には二つの顔があります。 + +- **🎨 シーンモード**：レーンも車両も交差点も、繋がりを保ったまま描ける図形です。図として SVG や PDF に、マップとして OpenDRIVE や Lanelet2 に書き出せます。 +- **🎬 シナリオモード**：描いたシーンにイベントとトリガーを与えて再生ボタンを押すだけ。[esmini](https://github.com/esmini/esmini) が WebAssembly でブラウザ内実行し、PASS / FAIL まで判定します。 + +## 🎨 シーンモード + +- **[レーンの接続](https://docs.drawtonomy.com/ja/guides/lane-connections/)** — 接続関係を保ったまま編集できます +- **[レーンツール](https://docs.drawtonomy.com/ja/guides/lane-tool/)** — センターラインをクリックするだけ +- **[地図からレーンを生成](https://docs.drawtonomy.com/ja/guides/lane-from-map/)** — 衛星写真から実際の道路をトレース +- **[交差点・ラウンドアバウト](https://docs.drawtonomy.com/ja/guides/intersections/)** — テンプレートでワンクリック配置 +- **[運転シーン向けテンプレート](https://docs.drawtonomy.com/ja/guides/participants/)** — 車両・歩行者・標識など +- **[スナップとポイント共有](https://docs.drawtonomy.com/ja/guides/snap/)** — ジオメトリの接続を自動維持 +- **[パスフットプリント](https://docs.drawtonomy.com/ja/guides/path-footprint/)** — パスに沿って自動配置 +- **[数式ツール](https://docs.drawtonomy.com/ja/guides/math-equations/)** — LaTeX の組版もキャンバス上に +- **[`.drawtonomy.svg`](https://docs.drawtonomy.com/ja/reference/drawtonomy-svg/)** — 開けば接続関係もそのまま復元 + +📖 **[デモ動画で見る機能ツアー](docs/feature-tour.md)** · +[docs.drawtonomy.com](https://docs.drawtonomy.com/ja/) + +## 🎬 シナリオモード + +まっさらなシーンから、あるいは読み込んだシナリオから、イベントとトリガーを組み立てて OpenSCENARIO のストーリーボードを自分の手で作れます。 + +- **[ビジュアルオーサリング](https://docs.drawtonomy.com/ja/scenario/first-scenario/)** — フェーズ・イベント・アクション・トリガーを組み立て +- **[開いて編集](https://docs.drawtonomy.com/ja/scenario/open-and-play/)** — `.xosc` はファイルでも GitHub の URL でも開いてそのまま編集可能 +- **[再生機能](https://docs.drawtonomy.com/ja/scenario/playback/)** — シーク・Follow Ego・ゴーストトレイル・`.webm` 書き出し +- **[PASS / FAIL 判定](https://docs.drawtonomy.com/ja/scenario/end-and-fail-conditions/)** — 実行のたびに判定 +- **[esmini 対応 zip](https://docs.drawtonomy.com/ja/guides/export-asam/)** — `.xodr` + `.xosc` を書き出し + +GitHub 上の公開 `.xosc` はワンクリックで再生できます: +**[シナリオを再生してみる](https://drawtonomy.com/?open=https://github.com/esmini/esmini/blob/master/resources/xosc/acc-test.xosc)**。 +[**drawtonomy for GitHub**](https://docs.drawtonomy.com/ja/integrations/github-extension/) +拡張を使えば、シナリオは GitHub 上の置かれた場所でそのまま再生されます: + +
+ +
+ +## 🔄 対応フォーマット + +OpenDRIVE、Lanelet2、OpenSCENARIO、ROS マップ、SVG/PDF などの図版まで対応。 +→ [フォーマット表を見る](docs/feature-tour.md#-exportimport) · +[エクスポート形式リファレンス](https://docs.drawtonomy.com/ja/reference/export-formats/) + +## 🤖 AI・自動化 + +- **[AI Scene Generator](extensions/ai-scene-generator/)** — 自然言語や OpenSCENARIO XML からシーンを生成 — by [@vishwesh5](https://github.com/vishwesh5) +- **[MCP Server](https://www.npmjs.com/package/@drawtonomy/mcp-server)** — AI エージェントにシーンを描かせる +- **[Headless SDK](https://www.npmjs.com/package/@drawtonomy/sdk)** — ブラウザなしで Node.js からシーンを生成・書き出し + +## 🔒 プライバシー + +ブラウザだけで完結します。バックエンドもアカウントもテレメトリもなく、 +esmini のシナリオエンジンもローカルで WebAssembly として動作します。 +([詳細](https://docs.drawtonomy.com/ja/security/)) + +## 🧩 拡張して使う + +iframe ベースの拡張システムを、SDK と postMessage API で構築できます: + +```bash +pnpm add -g @drawtonomy/dev-server +drawtonomy-dev-server +# 続けて http://localhost:3000/?ext=http://localhost:3001/manifest.json を開く +``` + +📖 [drawtonomy を拡張する](https://docs.drawtonomy.com/ja/extend/) · +[拡張開発ガイド](docs/extensions.ja.md) · +[エクスポーター開発ガイド](docs/exporter.ja.md) + +## 📚 その他 + +- 🎞️ [機能ツアー](docs/feature-tour.md) +- ⌨️ [キーボードショートカット](https://docs.drawtonomy.com/ja/reference/shortcuts/) +- ⚖️ [他ツールとの比較](https://docs.drawtonomy.com/ja/compare/) +- 💡 [活用事例](https://docs.drawtonomy.com/ja/use-cases/) +- ❓ [FAQ](https://docs.drawtonomy.com/ja/faq/) + +[English](README.md) diff --git a/README.md b/README.md index f79377a..a28d25f 100644 --- a/README.md +++ b/README.md @@ -1,307 +1,106 @@ -# drawtonomy +# drawtonomy

- Whiteboard for Driving Diagrams 🚗 + Draw driving scenes. Run driving scenarios. 🚗

- Intuitively place lanes, vehicles, pedestrians, and traffic lights.
- Browser-based. For autonomous driving development, traffic planning, and driving education. + A free, browser-based whiteboard for driving scenarios.
+ No install. No account.

- 🌐 Try it now at drawtonomy.com | + 🎬 Play a live scenario | + 🎨 Start drawing | 📖 Docs | - 💬 Report issues / Request features + 💬 Issues

-## ✨ Features +Two modes, one canvas: -- 🎨 **Infinite Canvas** - Draw extensive road networks -- 🛣️ **Lane Connection Management** - Edit with understanding of lane relationships -- ⚡ **Lane Tool** - Auto-generate from centerline or create from existing boundaries. Smooth boundaries with one click -- 🛰️ **Lane Generator (Satellite Map → Lane)** - Click or drag on road/satellite map to generate lanes from OSM data -- ➕ **Intersection Templates** - Place complex intersections with one click -- 🚙 **Rich Drawing Tools & Templates** - Various vehicles, pedestrians, traffic lights. [Add your own](templates/TEMPLATE_GUIDE.md) -- 🧲 **Snap Function** - Auto-snap to existing points and lines -- 🔗 **Point Sharing** - Connect shapes by sharing existing points -- 👣 **Path Footprint** - Auto-place footprints on paths with synced style, size, and orientation -- 🎨 **Style Customization** - Set color, opacity, width, and style individually -- 🧮 **Math Tool (LaTeX)** - Place typeset LaTeX equations on the canvas, re-editable anytime (KaTeX) -- 💾 **Editable Save Format** - Re-edit while preserving lane connection info -- 🗺️ **[Lanelet2](https://github.com/fzi-forschungszentrum-informatik/Lanelet2) Support** - Import and export OSM format maps -- 🤖 **ROS Map Support** - Import OccupancyGrid maps (.pgm + .yaml) from SLAM -- 🚗 **[ASAM Export](docs/exporter.md)** - Export OpenDRIVE / OpenSCENARIO and esmini-ready zip bundles -- ▶️ **Scenario Simulator** - Drop a `.xosc` + `.xodr` and play it back in the browser (powered by [esmini](https://github.com/esmini/esmini) WebAssembly) -- 🤖 **[AI Scene Generator](extensions/ai-scene-generator/)** - Generate editable scenes from natural language, OpenSCENARIO XML, or DSL +- **🎨 Scene mode — draw the scene.** Topology-aware lanes, vehicles, and + intersections. Export figures (SVG / PDF) or maps (OpenDRIVE, Lanelet2). +- **🎬 Scenario mode — make it move.** Add events and triggers, press play — + [esmini](https://github.com/esmini/esmini)-WASM runs it in the browser, + PASS / FAIL verdict included. -## 🎯 Main Features +## 🎨 Scene mode -### 🛣️ Lane Connection Management +- **[Topology-aware lanes](https://docs.drawtonomy.com/guides/lane-connections/)** — connections follow when you edit +- **[Lane tool](https://docs.drawtonomy.com/guides/lane-tool/)** — click a centerline, get both boundaries +- **[Map → lanes](https://docs.drawtonomy.com/guides/lane-from-map/)** — trace real roads from satellite/OSM data +- **[Intersection & roundabout templates](https://docs.drawtonomy.com/guides/intersections/)** — one click +- **[Vehicles, pedestrians, signs, and more](https://docs.drawtonomy.com/guides/participants/)** — a full driving-domain library +- **[Snap & point sharing](https://docs.drawtonomy.com/guides/snap/)** — geometry stays connected +- **[Path footprints](https://docs.drawtonomy.com/guides/path-footprint/)** — auto-placed and style-synced +- **[Math (LaTeX)](https://docs.drawtonomy.com/guides/math-equations/)** — typeset equations on the canvas +- **[Re-editable saves](https://docs.drawtonomy.com/reference/drawtonomy-svg/)** — `.drawtonomy.svg` reopens with everything intact -Edit with understanding of lane relationships. Moving boundaries auto-transforms connected lanes. Set direction and adjacency with Next/Previous/Left/Right Lane. +📖 **[Feature tour with demo videos](docs/feature-tour.md)** · +[docs.drawtonomy.com](https://docs.drawtonomy.com) - +## 🎬 Scenario mode -### ⚡ Lane Tool +Start from a blank scene or an imported one, add events and triggers, and +author a full OpenSCENARIO storyboard yourself. -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. +- **[Visual authoring](https://docs.drawtonomy.com/scenario/first-scenario/)** — phases, events, actions, and triggers on the scene you drew +- **[Open and edit any `.xosc`](https://docs.drawtonomy.com/scenario/open-and-play/)** — from disk or a GitHub URL, fully editable +- **[Full playback](https://docs.drawtonomy.com/scenario/playback/)** — seek, Follow Ego, ghost trails, `.webm` export +- **[PASS / FAIL verdicts](https://docs.drawtonomy.com/scenario/end-and-fail-conditions/)** on every run +- **[esmini-ready export](https://docs.drawtonomy.com/guides/export-asam/)** — `.xodr` + `.xosc` zip for desktop esmini - +Any public `.xosc` on GitHub runs with one click: +**[Play a live scenario](https://drawtonomy.com/?open=https://github.com/esmini/esmini/blob/master/resources/xosc/acc-test.xosc)**. +The [**drawtonomy for GitHub**](https://docs.drawtonomy.com/integrations/github-extension/) +extension plays them right where they live: -Smooth lane boundaries with one click from the Attribute Panel. +
+ +
- +## 🔄 Formats -### 🛰️ Lane Generator (Satellite Map → Lane) +OpenDRIVE, Lanelet2, OpenSCENARIO, ROS maps, and figures like SVG/PDF. +→ [Full format table](docs/feature-tour.md#-exportimport) · +[export formats reference](https://docs.drawtonomy.com/reference/export-formats/) -Switch on the road or satellite map background, then click a road to generate a single lane, or drag to enclose a region and generate every road inside it. OSM road data is fetched and converted into editable Lane shapes aligned to the map. +## 🤖 AI & automation - +- **[AI Scene Generator](extensions/ai-scene-generator/)** — generate scenes from natural language or OpenSCENARIO XML — by [@vishwesh5](https://github.com/vishwesh5) +- **[MCP Server](https://www.npmjs.com/package/@drawtonomy/mcp-server)** — let AI agents draw scenes for you +- **[Headless SDK](https://www.npmjs.com/package/@drawtonomy/sdk)** — generate and export scenes from Node.js, no browser -### ➕ Intersection +## 🔒 Privacy -Place complex intersection structures with templates in one click. +Browser-only. No backend, no account, no telemetry — files never leave your +browser, even the esmini engine runs locally as WebAssembly. +([details](https://docs.drawtonomy.com/security/)) - +## 🧩 Build on it -### 🚙 Rich Drawing Tools & Templates - -Drawing tools and shape templates for easily expressing autonomous driving scenarios. You can also [add custom SVG templates](templates/TEMPLATE_GUIDE.md) via PR. - -**🚗 Autonomous Driving Focused:** - -- Linestring (continuous lines for lane boundaries, etc.) -- Lane -- Participants — Vehicle (Sedan, Bus, Truck, Motorcycle templates) and Pedestrian (Walking, Simple templates) -- Path (Arrow style, Band style) -- Polygon -- Crosswalk -- TrafficLight (vehicle and pedestrian signals) -- TrafficSign -- RoadMarking -- Intersection -- Others (additional road/scene templates) - -**✏️ 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. - - - -### 👣 Path Footprint - -Generate footprints on a Path with the Generate button. Rectangle or any vehicle template (Sedan, Bus, Truck, etc.) can be set as footprints. Changing the style of one footprint syncs to all — color, template, opacity, and size changes are applied to every footprint simultaneously while maintaining equal intervals. Footprint orientation is automatically calculated from the Path direction, including smooth curves. The Anchor Offset slider lets you shift the reference point along the travel direction — for example, aligning to the base link or front bumper position instead of the center. - - - -### 🧮 Math Tool (LaTeX) - -Place typeset LaTeX equations anywhere on the canvas with the `fx` tool. The source stays editable and renders with KaTeX, so you can write anything from a simple formula to full multi-line systems. - -

- -

- -### 📦 Export/Import - -#### Supported Formats - -| Format | Export | Import | Note | -| ------------------ | :----: | :----: | --------------------- | -| **SVG** | ✓ | ✓ | | -| **PNG** | ✓ | ✓ | | -| **JPG** | ✓ | ✓ | | -| **PDF** | ✓ | | | -| **EPS** | ✓ | | No transparency | -| **drawtonomy.svg** | ✓ | ✓ | Re-editable | -| **OSM (Lanelet2)** | ✓ | ✓ | Export lanes as a Lanelet2 map | -| **PGM+YAML (ROS)** | | ✓ | OccupancyGrid map | -| **OpenDRIVE (.xodr)** | ✓ | ✓ | ASAM 1.8 | -| **OpenSCENARIO (.xosc)** | ✓ | | ASAM 1.3 | -| **esmini bundle (.zip)** | ✓ | | .xodr + .xosc together | - -> **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](https://github.com/fzi-forschungszentrum-informatik/Lanelet2) Import / Export - -**Import** Lanelet2 OSM format maps for editing. Load the whole map, or pick out -only the lanes you need before importing — handy for working on a small part of a -large map. Sample maps: [Autoware Documentation](https://autowarefoundation.github.io/autoware-documentation/main/demos/planning-sim/#download-the-sample-map). - -**Export** the lanes you draw back out as a Lanelet2 OSM map. Round-trips -preserve the original IDs and tags, so maps survive an import/edit/export cycle. - - - - - -#### OpenDRIVE (.xodr) Import / Export - -**Import** ASAM OpenDRIVE (.xodr) maps for editing. As with Lanelet2, load the -whole map or select only the lanes you need. Plan-view geometry (line / arc / -clothoid) is evaluated analytically and lane/junction connectivity is rebuilt. - -**Export** your scene back out as an OpenDRIVE map. Lane types, road marks, and -junction connectivity are preserved for high-fidelity round-trips, verified by -playback in esmini 3.3.0. Implemented in `@drawtonomy/sdk` — see the [Exporter Developer Guide](docs/exporter.md). - - - -#### ROS OccupancyGrid Map Import - -Import SLAM-generated maps from ROS `map_server` format (.pgm + .yaml). Select both files together in the file dialog. The map is automatically colored (occupied=black, free=white, unknown=gray) and scaled to match lane dimensions. - -- `.pgm` + `.yaml` → Uses YAML settings (resolution, thresholds) -- `.pgm` only → Uses defaults (resolution=0.05 m/px) - -Compatible with nav2, cartographer, gmapping, and other SLAM tools. - -

- -

- -#### ASAM Export (OpenDRIVE / OpenSCENARIO / esmini) - -Export the current scene as an ASAM-format file or a single zip bundle ready -for [esmini](https://github.com/esmini/esmini) to play back. Use the **Export -for esmini** menu item to produce a zip containing both `.xodr` and `.xosc`. - -The exporter is implemented in `@drawtonomy/sdk` and is the main extension -point for adding new shapes, animation features, or entirely new target -formats (CARLA, Unity, SUMO, …). - -The clip below is a single round-trip: draw an intersection, draw a path, -generate footprints, export the esmini zip, then play the exported `.xosc` -back in esmini — the vehicle follows the trajectory built from the path. - - - -📖 **[Exporter Developer Guide](docs/exporter.md)** | [日本語](docs/exporter.ja.md) | 🧪 **[Exporter Playground extension](extensions/exporter-playground/)** for canvas-driven verification - -### ▶️ Scenario Simulator - -Drop an OpenSCENARIO `.xosc` together with its OpenDRIVE `.xodr` onto the canvas and the storyboard plays back in the browser — seek the timeline, follow the ego vehicle, show ghost trails, and export the run as `.webm`. - -The simulation core is [esmini](https://github.com/esmini/esmini) compiled to WebAssembly, used here under [MPL-2.0](https://github.com/esmini/esmini/blob/master/LICENSE) with all credit for the OpenSCENARIO 1.x runtime going to the esmini maintainers. - - - -### 🤖 [AI Scene Generator](extensions/ai-scene-generator/) - -Generate editable driving scenes on the canvas from natural language descriptions, OpenSCENARIO XML, or DSL input. -AI automatically interprets the scenario and places lanes, vehicles, pedestrians, and other elements as fully editable shapes. -Supports Anthropic Claude, OpenAI GPT, and Google Gemini as AI providers. -Open from the **Extensions** button at the bottom-right of the canvas. - -#### Natural Language - -> *Prompt: "A 3-lane highway going left-to-right. An ego sedan (blue) in the center lane, a truck (grey) in the right lane slightly ahead. Show a dashed path for the ego vehicle changing to the left lane."* - - - -#### OpenSCENARIO - -Generated from [ASAM OpenSCENARIO DSL - Euro NCAP scenario example](https://publications.pages.asam.net/standards/ASAM_OpenSCENARIO/ASAM_OpenSCENARIO_DSL/latest/annexes/examples.html#_euro_ncap): - - - -**Contributors:** [@vishwesh5](https://github.com/vishwesh5) - -## ⌨️ 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 | -| Y | Create Traffic Sign | -| R | Create Road Marking | -| O | Create Others (road/scene templates) | -| 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) | - -## 🧩 Extensions - -drawtonomy supports an iframe-based extension system. Build custom extensions using the SDK and postMessage API. +An iframe-based extension system with an SDK and postMessage API: ```bash -# Start drawtonomy locally pnpm add -g @drawtonomy/dev-server drawtonomy-dev-server - -# Start your extension -cd my-extension -pnpm dev --port 3001 - -# Open in browser -open "http://localhost:3000/?ext=http://localhost:3001/manifest.json" +# then open http://localhost:3000/?ext=http://localhost:3001/manifest.json ``` -Available npm packages: +📖 [Extending drawtonomy](https://docs.drawtonomy.com/extend/) · +[Extension guide](docs/extensions.md) · +[Exporter guide](docs/exporter.md) -| Package | Description | -|---------|-------------| -| [`@drawtonomy/sdk`](https://www.npmjs.com/package/@drawtonomy/sdk) | SDK for building extensions (ExtensionClient, shape factory functions, types) | -| [`@drawtonomy/dev-server`](https://www.npmjs.com/package/@drawtonomy/dev-server) | Local dev server for extension development | +## 📚 More -📖 **[Extension Development Guide](docs/extensions.md)** | [日本語](docs/extensions.ja.md) | [AI Scene Generator](extensions/ai-scene-generator/) | [Template Preview](extensions/template-preview/) +- 🎞️ [Feature tour](docs/feature-tour.md) +- ⌨️ [Keyboard shortcuts](https://docs.drawtonomy.com/reference/shortcuts/) +- ⚖️ [Comparisons](https://docs.drawtonomy.com/compare/) +- 💡 [Use cases](https://docs.drawtonomy.com/use-cases/) +- ❓ [FAQ](https://docs.drawtonomy.com/faq/) -📖 **[Exporter Developer Guide](docs/exporter.md)** | [日本語](docs/exporter.ja.md) — extend OpenDRIVE / OpenSCENARIO output, or add a new target format (CARLA, Unity, SUMO, …) +[日本語](README.ja.md) diff --git a/docs/feature-tour.md b/docs/feature-tour.md new file mode 100644 index 0000000..b9caf1a --- /dev/null +++ b/docs/feature-tour.md @@ -0,0 +1,243 @@ +# 🎞️ Feature tour + +A video tour of drawtonomy's features, one clip per feature. +For step-by-step instructions and the full reference, the canonical +documentation lives at [docs.drawtonomy.com](https://docs.drawtonomy.com) — +each section below links to its docs page. + +## 🛣️ 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 connections](https://docs.drawtonomy.com/guides/lane-connections/) + + + +## ⚡ 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. +→ [Lane tool](https://docs.drawtonomy.com/guides/lane-tool/) + + + +Smooth lane boundaries with one click from the Attribute Panel. +→ [Smooth lanes](https://docs.drawtonomy.com/guides/smooth-lanes/) + + + +## 🛰️ Lane Generator (Satellite Map → Lane) + +Switch on the road or satellite map background, then click a road to generate a single lane, or drag to enclose a region and generate every road inside it. OSM road data is fetched and converted into editable Lane shapes aligned to the map. +→ [Lanes from a map](https://docs.drawtonomy.com/guides/lane-from-map/) + + + +## ➕ 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. You can also [add custom SVG templates](../templates/TEMPLATE_GUIDE.md) via PR. +→ [Shape catalog](https://docs.drawtonomy.com/reference/shapes/) + +**🚗 Autonomous Driving Focused:** + +- Linestring (continuous lines for lane boundaries, etc.) +- Lane +- Participants — Vehicle (Sedan, Bus, Truck, Motorcycle templates) and Pedestrian (Walking, Simple templates) +- Path (Arrow style, Band style) +- Polygon +- Crosswalk +- TrafficLight (vehicle and pedestrian signals) +- TrafficSign +- RoadMarking +- Intersection +- Others (additional road/scene templates) + +**✏️ 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. +→ [Snap](https://docs.drawtonomy.com/guides/snap/) + + + +## 🔗 Point Sharing + +Hold Alt(Option) and click to share existing points and connect Linestring, Polygon, and Path. +→ [Point sharing](https://docs.drawtonomy.com/guides/point-sharing/) + + + +## 🎨 Style Customization + +Set color, opacity, width, and style individually. Change default values from the hamburger menu. +→ [Styling](https://docs.drawtonomy.com/guides/styling/) + + + +## ✏️ 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. +→ [Segment editing](https://docs.drawtonomy.com/guides/segment-editing/) + + + +## 👣 Path Footprint + +Generate footprints on a Path with the Generate button. Rectangle or any vehicle template (Sedan, Bus, Truck, etc.) can be set as footprints. Changing the style of one footprint syncs to all — color, template, opacity, and size changes are applied to every footprint simultaneously while maintaining equal intervals. Footprint orientation is automatically calculated from the Path direction, including smooth curves. The Anchor Offset slider lets you shift the reference point along the travel direction — for example, aligning to the base link or front bumper position instead of the center. +→ [Path footprint](https://docs.drawtonomy.com/guides/path-footprint/) + + + +## 🧮 Math Tool (LaTeX) + +Place typeset LaTeX equations anywhere on the canvas with the `fx` tool. The source stays editable and renders with KaTeX, so you can write anything from a simple formula to full multi-line systems. +→ [Math equations](https://docs.drawtonomy.com/guides/math-equations/) + +

+ +

+ +## 📦 Export/Import + +| Format | Import | Export | Note | +| ------ | :----: | :----: | ---- | +| **OpenDRIVE (.xodr)** | ✓ | ✓ | ASAM 1.8 — high-fidelity round-trips, verified in esmini ([import](https://docs.drawtonomy.com/guides/import-opendrive/) / [export](https://docs.drawtonomy.com/guides/export-asam/)) | +| **OpenSCENARIO (.xosc)** | ✓ | ✓ | ASAM 1.3 — open, play, author, export ([play](https://docs.drawtonomy.com/scenario/open-and-play/)) | +| **esmini bundle (.zip)** | | ✓ | `.xodr` + `.xosc` together | +| **Lanelet2 (.osm)** | ✓ | ✓ | round-trips preserve original IDs and tags ([import](https://docs.drawtonomy.com/guides/import-lanelet2/)) | +| **ROS OccupancyGrid (.pgm + .yaml)** | ✓ | | SLAM maps from nav2, cartographer, … ([import](https://docs.drawtonomy.com/guides/import-ros-map/)) | +| **drawtonomy.svg** | ✓ | ✓ | re-editable native format | +| **SVG / PNG / JPG / PDF / EPS** | | ✓ | figures for papers and slides ([all formats](https://docs.drawtonomy.com/reference/export-formats/)) | + +Both map formats land in the same internal lane model, so drawtonomy also works +as an **OpenDRIVE ⇄ Lanelet2 bridge**: import one, edit visually, export the +other ([guide](https://docs.drawtonomy.com/guides/convert-opendrive-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](https://github.com/fzi-forschungszentrum-informatik/Lanelet2) Import / Export + +**Import** Lanelet2 OSM format maps for editing. Load the whole map, or pick out only the lanes you need before importing — handy for working on a small part of a large map. Sample maps: [Autoware Documentation](https://autowarefoundation.github.io/autoware-documentation/main/demos/planning-sim/#download-the-sample-map). +→ [Import Lanelet2](https://docs.drawtonomy.com/guides/import-lanelet2/) + +**Export** the lanes you draw back out as a Lanelet2 OSM map via the **`.osm (Lanelet2)`** menu item. Lane boundaries become `way` linestrings and each lane becomes a `relation type=lanelet` referencing its left/right boundary ways, so the result round-trips back into drawtonomy (or any Lanelet2-aware tool). Maps imported from OSM preserve their original IDs and tags on re-export. The exporter is implemented in `@drawtonomy/sdk` — see the [Exporter Developer Guide](./exporter.md). + + + + + +### OpenDRIVE (.xodr) Import / Export + +**Import** ASAM OpenDRIVE (.xodr) maps for editing. As with Lanelet2, load the whole map or select only the lanes you need. Plan-view geometry (line / arc / clothoid) is evaluated analytically and lane/junction connectivity is rebuilt. +→ [Import OpenDRIVE](https://docs.drawtonomy.com/guides/import-opendrive/) + +**Export** your scene back out as an OpenDRIVE map. Lane types, road marks, and junction connectivity are preserved for high-fidelity round-trips, verified by playback in esmini 3.3.0. Implemented in `@drawtonomy/sdk` — see the [Exporter Developer Guide](./exporter.md). + + + +### ROS OccupancyGrid Map Import + +Import SLAM-generated maps from ROS `map_server` format (.pgm + .yaml). Select both files together in the file dialog. The map is automatically colored (occupied=black, free=white, unknown=gray) and scaled to match lane dimensions. +→ [Import a ROS map](https://docs.drawtonomy.com/guides/import-ros-map/) + +- `.pgm` + `.yaml` → Uses YAML settings (resolution, thresholds) +- `.pgm` only → Uses defaults (resolution=0.05 m/px) + +Compatible with nav2, cartographer, gmapping, and other SLAM tools. + +

+ +

+ +### ASAM Export (OpenDRIVE / OpenSCENARIO / esmini) + +Export the current scene as an ASAM-format file or a single zip bundle ready for [esmini](https://github.com/esmini/esmini) to play back. Use the **Export for esmini** menu item to produce a zip containing both `.xodr` and `.xosc`. +→ [Export to ASAM formats](https://docs.drawtonomy.com/guides/export-asam/) + +The exporter is implemented in `@drawtonomy/sdk` and is the main extension point for adding new shapes, animation features, or entirely new target formats (CARLA, Unity, SUMO, …). + +The clip below is a single round-trip: draw an intersection, draw a path, generate footprints, export the esmini zip, then play the exported `.xosc` back in esmini — the vehicle follows the trajectory built from the path. + + + +📖 **[Exporter Developer Guide](./exporter.md)** | [日本語](./exporter.ja.md) | 🧪 **[Exporter Playground extension](../extensions/exporter-playground/)** for canvas-driven verification + +## 🎬 Scenario Playback + +Drop an OpenSCENARIO `.xosc` together with its OpenDRIVE `.xodr` onto the canvas and the storyboard plays back in the browser — seek the timeline, follow the ego vehicle, show ghost trails, and export the run as `.webm`. +→ [Playback](https://docs.drawtonomy.com/scenario/playback/) + +The simulation core is [esmini](https://github.com/esmini/esmini) compiled to WebAssembly, used here under [MPL-2.0](https://github.com/esmini/esmini/blob/master/LICENSE) with all credit for the OpenSCENARIO 1.x runtime going to the esmini maintainers. + + + +## 🤖 [AI Scene Generator](../extensions/ai-scene-generator/) + +Generate editable driving scenes on the canvas from natural language descriptions, OpenSCENARIO XML, or DSL input. AI automatically interprets the scenario and places lanes, vehicles, pedestrians, and other elements as fully editable shapes. Supports Anthropic Claude, OpenAI GPT, and Google Gemini as AI providers. Open from the **Extensions** button at the bottom-right of the canvas. +→ [AI scene tutorial](https://docs.drawtonomy.com/tutorials/ai-scene/) + +### Natural Language + +> *Prompt: "A 3-lane highway going left-to-right. An ego sedan (blue) in the center lane, a truck (grey) in the right lane slightly ahead. Show a dashed path for the ego vehicle changing to the left lane."* + + + +### OpenSCENARIO + +Generated from [ASAM OpenSCENARIO DSL - Euro NCAP scenario example](https://publications.pages.asam.net/standards/ASAM_OpenSCENARIO/ASAM_OpenSCENARIO_DSL/latest/annexes/examples.html#_euro_ncap): + + + +**Contributors:** [@vishwesh5](https://github.com/vishwesh5) + +## ⌨️ Keyboard Shortcuts + +→ [Full shortcut reference](https://docs.drawtonomy.com/reference/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 | +| Y | Create Traffic Sign | +| R | Create Road Marking | +| O | Create Others (road/scene templates) | +| 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) |