docs: update README with export, mermaid conversion, batch commands, and new shortcuts

This commit is contained in:
David Ibia
2026-02-10 17:07:46 +01:00
parent 64b4f667fb
commit 519ed74a3a

View File

@@ -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 - **Shape Drawing** — Rectangles, ellipses, lines, arrows, text directly on canvas
- **Boolean Shape Operations** — Union, intersection, difference, XOR on overlapping shapes via agent API - **Boolean Shape Operations** — Union, intersection, difference, XOR on overlapping shapes via agent API
- **Selection & Editing** — Select, move, resize shapes with corner handles - **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 - **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) - **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 - **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 - **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 | | Action | Shortcut |
|--------|----------| |--------|----------|
| Select tool | V | | Select tool | V |
| Pan tool | H |
| Rectangle tool | R | | Rectangle tool | R |
| Ellipse tool | E | | Ellipse tool | E |
| Line tool | L | | 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 | | Delete selected | Delete / Backspace |
| Cancel / back to Select | Escape | | Cancel / back to Select | Escape |
| Paste SVG | Cmd+V | | Paste SVG | Cmd+V |
| Export as PNG | Cmd+Shift+E |
| New Tab | Cmd+T | | New Tab | Cmd+T |
| Close Tab | Cmd+W | | Close Tab | Cmd+W |
| Save workspace | Cmd+S | | Save workspace | Cmd+S |
| Command palette | Cmd+K | | Command palette | Cmd+K |
| Toggle history panel | Cmd+H | | Toggle history panel | Cmd+H |
| Undo | Cmd+Z |
| Redo | Cmd+Shift+Z |
| Reset zoom | Cmd+0 | | Reset zoom | Cmd+0 |
## MCP Server (AI Agent Integration) ## 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 | | `delete_drawing_element` | Delete a drawing element by ID |
| `clear_drawing_elements` | Clear all drawing elements from the canvas | | `clear_drawing_elements` | Clear all drawing elements from the canvas |
| `boolean_op` | Perform boolean operations (union, intersection, difference, xor) on two or more shapes | | `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. 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. 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 #### Ping
```json ```json
@@ -379,7 +408,8 @@ crates/
│ ├── command_palette.rs # Cmd+K command palette with fuzzy search │ ├── command_palette.rs # Cmd+K command palette with fuzzy search
│ ├── element_tree.rs # Structured element representation │ ├── element_tree.rs # Structured element representation
│ ├── clipboard.rs # System clipboard integration │ ├── 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/ │ ├── drawing/
│ │ ├── element.rs # DrawingElement, Shape, ShapeStyle, hit testing │ │ ├── element.rs # DrawingElement, Shape, ShapeStyle, hit testing
│ │ ├── boolean.rs # Boolean shape operations (union, intersection, difference, xor) │ │ ├── boolean.rs # Boolean shape operations (union, intersection, difference, xor)
@@ -390,6 +420,7 @@ crates/
│ │ └── interaction.rs # Mouse/keyboard input handling │ │ └── interaction.rs # Mouse/keyboard input handling
│ ├── svg/ │ ├── svg/
│ │ ├── parser.rs # SVG → ElementTree conversion │ │ ├── parser.rs # SVG → ElementTree conversion
│ │ ├── converter.rs # SVG → DrawingElements (Mermaid conversion)
│ │ └── renderer.rs # SVG → pixels (resvg/tiny-skia) │ │ └── renderer.rs # SVG → pixels (resvg/tiny-skia)
│ └── agent/ │ └── agent/
│ ├── protocol.rs # JSON message types │ ├── protocol.rs # JSON message types
@@ -430,11 +461,13 @@ crates/
- [x] Command palette (Cmd+K) - [x] Command palette (Cmd+K)
- [x] Boolean shape operations (union, intersection, difference, xor) - [x] Boolean shape operations (union, intersection, difference, xor)
- [x] Visual undo tree with branching history - [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) - [ ] Real code generation (not just stubs)
- [ ] Export to file
- [ ] Diff view (before/after agent changes) - [ ] Diff view (before/after agent changes)
- [ ] Plugin system for code generators - [ ] Plugin system for code generators
- [ ] Multi-select and group operations - [ ] App icon
## License ## License