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
|
- **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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user