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
- **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