From 519ed74a3ab6b77386e938cbdd16ca4ade19aad4 Mon Sep 17 00:00:00 2001
From: David Ibia <david.ibia@boxmarshall.com>
Date: Tue, 10 Feb 2026 17:07:46 +0100
Subject: [PATCH] docs: update README with export, mermaid conversion, batch
 commands, and new shortcuts

---
 README.md | 43 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9b3b2a6..04b69a8 100644
--- a/README.md
+++ b/README.md
@@ -33,10 +33,12 @@ agcanvas (short for **Augmented Canvas**) bridges the gap between visual design
 - **Shape Drawing** — Rectangles, ellipses, lines, arrows, text directly on canvas
 - **Boolean Shape Operations** — Union, intersection, difference, XOR on overlapping shapes via agent API
 - **Selection & Editing** — Select, move, resize shapes with corner handles
-- **Mermaid Diagrams** — Write Mermaid syntax, render as SVG on canvas
+- **Mermaid Diagrams** — Write Mermaid syntax, renders as interactive drawing elements (rectangles, arrows, text) that can be selected, moved, and resized. Supports edge labels (`-->|Yes|`)
+- **Export to PNG** — Export canvas as high-DPI PNG via File menu (Cmd+Shift+E) or MCP tool
 - **Sessions/Tabs** — Multiple canvases in tabs, each with independent state, creator tracking (human vs agent), descriptions, and timestamps
 - **Visual Undo Tree** — Git-like branching history with checkout, fork, and tree visualization (Cmd+H)
-- **Pan/Zoom** — Smooth canvas navigation
+- **Pan/Zoom** — Smooth canvas navigation with Pan tool (H), middle-click drag, and zoom reset (click zoom %)
+- **Batch Commands** — Agents can send multiple operations in a single request for faster workflows
 - **Session Persistence** — Auto-saves workspace to `~/Library/Application Support/agcanvas/`, restores all tabs on launch
 - **Command Palette** — Cmd+K to search and execute any command with fuzzy matching
 
@@ -146,6 +148,7 @@ To add a custom icon, place an `AppIcon.icns` file in `assets/` before bundling.
 | Action | Shortcut |
 |--------|----------|
 | Select tool | V |
+| Pan tool | H |
 | Rectangle tool | R |
 | Ellipse tool | E |
 | Line tool | L |
@@ -154,11 +157,14 @@ To add a custom icon, place an `AppIcon.icns` file in `assets/` before bundling.
 | Delete selected | Delete / Backspace |
 | Cancel / back to Select | Escape |
 | Paste SVG | Cmd+V |
+| Export as PNG | Cmd+Shift+E |
 | New Tab | Cmd+T |
 | Close Tab | Cmd+W |
 | Save workspace | Cmd+S |
 | Command palette | Cmd+K |
 | Toggle history panel | Cmd+H |
+| Undo | Cmd+Z |
+| Redo | Cmd+Shift+Z |
 | Reset zoom | Cmd+0 |
 
 ## MCP Server (AI Agent Integration)
@@ -220,6 +226,9 @@ Same MCP config format — add the `agcanvas` entry to your Codex MCP configurat
 | `delete_drawing_element` | Delete a drawing element by ID |
 | `clear_drawing_elements` | Clear all drawing elements from the canvas |
 | `boolean_op` | Perform boolean operations (union, intersection, difference, xor) on two or more shapes |
+| `render_mermaid` | Render a Mermaid diagram as interactive drawing elements on the canvas |
+| `export_canvas` | Export the canvas as a high-DPI PNG image |
+| `batch` | Send multiple operations in one request for faster agent workflows |
 
 All tools accept an optional `session_id` parameter. If omitted, the active session is used.
 
@@ -331,6 +340,26 @@ Targets: `html`, `react`, `tailwind`, `svelte`, `vue`
 
 Operations: `union`, `intersection`, `difference`, `xor`. Set `consume_sources` to `true` to delete the source shapes after the operation. Optional `style` object to override the result's appearance.
 
+#### Render Mermaid diagram
+
+```json
+{"type": "RenderMermaid", "mermaid_source": "flowchart LR\n    A-->|Yes| B[OK]", "x": 0, "y": 0}
+```
+
+Renders Mermaid syntax into interactive drawing elements (rectangles, arrows, text). Supports edge labels (`-->|Yes|`), decision diamonds, and all flowchart/sequence/class diagram types.
+
+#### Export canvas as PNG
+
+```json
+{"type": "ExportCanvas", "path": "/tmp/canvas.png", "scale": 2.0, "background": "#1e1e1e"}
+```
+
+#### Batch operations
+
+```json
+{"type": "Batch", "requests": [{"type": "Ping"}, {"type": "GetTree"}]}
+```
+
 #### Ping
 
 ```json
@@ -379,7 +408,8 @@ crates/
 │       ├── command_palette.rs # Cmd+K command palette with fuzzy search
 │       ├── element_tree.rs   # Structured element representation
 │       ├── clipboard.rs      # System clipboard integration
-│       ├── mermaid.rs        # Mermaid → SVG rendering
+│       ├── mermaid.rs        # Mermaid → SVG rendering (v0.2.0, edge labels)
+│       ├── export.rs         # Canvas → PNG export (composites all layers)
 │       ├── drawing/
 │       │   ├── element.rs    # DrawingElement, Shape, ShapeStyle, hit testing
 │       │   ├── boolean.rs    # Boolean shape operations (union, intersection, difference, xor)
@@ -390,6 +420,7 @@ crates/
 │       │   └── interaction.rs # Mouse/keyboard input handling
 │       ├── svg/
 │       │   ├── parser.rs     # SVG → ElementTree conversion
+│       │   ├── converter.rs  # SVG → DrawingElements (Mermaid conversion)
 │       │   └── renderer.rs   # SVG → pixels (resvg/tiny-skia)
 │       └── agent/
 │           ├── protocol.rs   # JSON message types
@@ -430,11 +461,13 @@ crates/
 - [x] Command palette (Cmd+K)
 - [x] Boolean shape operations (union, intersection, difference, xor)
 - [x] Visual undo tree with branching history
+- [x] Export to PNG (GUI + MCP tool)
+- [x] Pan tool and batch commands
+- [x] Mermaid edge labels and native element conversion
 - [ ] Real code generation (not just stubs)
-- [ ] Export to file
 - [ ] Diff view (before/after agent changes)
 - [ ] Plugin system for code generators
-- [ ] Multi-select and group operations
+- [ ] App icon
 
 ## License