Canvas++

[!NOTE] Version: v1.0.1
All 15 UML 2.x diagram types, digital hardware schematics, freehand recognition, and AI agent patch bridges are available. If you encounter bugs, rough edges, or have feature suggestions, please open an issue on the GitHub Issues page.

A high-performance, local-first visual modeling, UML, and hardware schematic canvas engine for Obsidian.

Build professional UML 2.x software engineering diagrams, Logisim-style digital hardware schematics with hierarchy, and hand-drawn whiteboard sketches on an infinite canvas—complete with an autonomous AI coding agent CLI bridge and RAG markdown export.

Highlights

• All 15 UML 2.x Diagram Types Supported:
  • Structure Diagrams: Class, Object, Package, Component, Composite Structure, Deployment, Profile.
  • Behavior Diagrams: Use Case, Activity, State Machine, Sequence, Communication, Interaction Overview, Timing.
  • Schematics: Logisim-style black-box chips with directional I/O pins, multi-bit buses, and hierarchical child diagram navigation.
• Hybrid Freehand & Shape Recognizer:
  • Sketch freely with pen or mouse.
  • Automatic geometric recognition turns hand-drawn strokes into formal UML shapes (rectangles, diamonds, ellipses, actors, circles, cylinders) with an instant undo escape-hatch toast.
• Fast Interactive Canvas:
  • Smooth pan and zoom (10% – 400%) with invariant cursor focus.
  • Multi-selection, marquee drag, smart alignment guides, and grid snapping.
  • Interactive minimap with real-time viewport tracker and click-to-pan.
  • Layer manager (visibility & lock toggles) and collapsible node grouping.
  • Dynamic routing engine: straight, orthogonal with automatic obstacle avoidance, and customizable corner radii.
  • Viewport virtualization: high-performance culling for large diagrams (>200 to >1000 nodes).
• JSON Canvas 1.0 Native & Extensible:
  • Saved as .canvuspp files (with backwards-compatible .umlcanvas support), compatible with Obsidian Canvas 1.0 viewers while storing rich semantic UML extensions.
  • One-click standalone SVG export with embedded fonts and styling.
• Antigravity CLI Agent Bridge:
  • File-based patch exchange (.umlcanvas-patches/) allows external AI coding agents (such as Google Antigravity) to safely inspect and patch diagrams without race conditions.
  • Granular permission model (user, antigravity, both, none) with hash-checked conflict detection.
• RAG Embedding Pipeline:
  • Export any diagram to a chunked, structured markdown bundle (.umlcanvas-rag/<diagramId>.rag.md) optimized for vector embedding and LLM reasoning.
• 100% Local-First & Private:
  • Zero telemetry, zero external tracking, zero network requests. Everything runs locally in your vault.

Supported Diagram Types

Installation

From Obsidian Community Plugins

1. Open Obsidian Settings > Community plugins.
2. Make sure Restricted mode is turned off.
3. Click Browse and search for Canvas++.
4. Click Install, then Enable.

Note: While in initial beta (v0.1.0-beta), if Canvas++ is pending review on the official community registry, install via BRAT or manual download below.

Beta Installation via BRAT (Recommended for Beta)

1. Install Obsidian42 - BRAT from Community Plugins.
2. Go to Settings > BRAT > Add Beta plugin.
3. Enter VishalRashmika/canvas-plus-plus.
4. Click Add Plugin and enable Canvas++ under Community plugins.

Manual Installation

1. Download the latest release assets (main.js, manifest.json, styles.css) from the v0.1.0-beta Release page.
2. Inside your Obsidian vault, navigate to .obsidian/plugins/ (create the directory if it does not exist).
3. Create a folder named canvas-plus-plus and place the three files inside.
4. Reload Obsidian, go to Settings > Community plugins, and toggle on Canvas++.

Usage

Creating a Diagram

• Command Palette: Press Ctrl+P (or Cmd+P), type Canvas++, and select Create Canvas++ (or Create diagram).
• Ribbon Icon: Click the Canvas++ icon in Obsidian's left ribbon to create a new Canvas++ file.
• File Explorer: Right-click any folder or file and select New Canvas++.

Keyboard & Mouse Shortcuts

Settings Reference

Go to Settings > Canvas++:

• Default diagram type: Set the default diagram created via the ribbon icon (e.g., uml.class, uml.sequence, schematic).
• Default node width: Default width in pixels for newly created nodes.
• Default node height: Default height in pixels for newly created nodes.
• Show grid by default: Toggle background dot grid on or off.
• Grid size: Adjust grid spacing in pixels (default: 20px).
• Autosave debounce delay (ms): Configure debounce delay in milliseconds for autosaving diagrams (default: 500ms).
• Enable Antigravity CLI bridge: Watch .umlcanvas-patches/ for external automated diagram updates.
• Enable freehand drawing: Allow freehand sketching and shape recognition on the canvas.

AI Agent Integration (Antigravity CLI Bridge)

The plugin includes a bidirectional file watcher bridge designed for external AI coding agents.

1. Hot-Reload Watcher: The plugin watches .umlcanvas-patches/ within your vault.
2. Patch Delivery: An external CLI agent drops a JSON patch file (<patchId>.patch.json) specifying operations (addNode, moveNode, addEdge, deleteNode, etc.).
3. Permission Scoping: Nodes and edges can be restricted to edit permissions:
   • user: Agent edits are rejected; only the human user can modify.
   • antigravity: Agent edits allowed.
   • both: Either agent or user can modify (default).
   • none: Locked to all edits.
4. Conflict Prevention: Patches verify expectedFileHash before mutating state.
5. RAG Export: Export your diagram at any time via the command palette or application use-case to generate chunked LLM markdown context in .umlcanvas-rag/<diagramId>.rag.md.

For complete details on patch structures and error codes, refer to docs/cli/PATCH-FORMAT.md.

Development & Testing

# Clone the repository
git clone https://github.com/VishalRashmika/canvas-plus-plus.git
cd canvas-plus-plus

# Install dependencies
npm install

# Run unit and integration tests (Jest)
npm test

# Run linter
npm run lint

# Compile production bundle (main.js)
npm run build

Support

If you find Canvas++ helpful for your diagrams and workflows, consider supporting its maintenance and development:

License

This project is licensed under the GNU General Public License v3.0 (GPLv3).