docs: update README with export, mermaid conversion, batch commands, and new shortcuts
This commit is contained in:
43
README.md
43
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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user