Canvas 🟡 PREVIEW - Whiteboard

Collaborative visual workspace

Overview

Canvas is the collaborative whiteboard in General Bots Suite. Draw diagrams, create flowcharts, sketch ideas, and collaborate in real time with your team. Use drawing tools, shapes, text, and layers to build visual representations of complex concepts and systems.

Features

Tools

Tool	Description
Select	Move, resize, rotate elements
Pen	Freehand drawing
Rectangle	Draw rectangles and squares
Ellipse	Draw circles and ovals
Line	Draw straight lines
Arrow	Draw arrows for flowcharts
Text	Add text labels
Eraser	Remove elements

Colors

Option	Description
Palette	Predefined color palette
Custom	Full RGB color picker
Opacity	Transparency control
Fill	Shape fill color
Stroke	Outline/border color
Width	Line thickness

Layers

Action	Description
Add Layer	Create new layer
Delete Layer	Remove layer
Reorder	Change layer stacking
Visibility	Toggle layer visibility
Lock	Prevent edits to layer
Rename	Label layers for clarity

Export

Format	Description
PNG	Raster image export
SVG	Vector scalable export
PDF	High-quality document
JSON	Editable board data

Collaborate

Feature	Description
Real-time	Multiple users editing simultaneously
Cursor View	See other users’ cursors
Presence	Active collaborator list
History	View edit history
Permissions	View/edit access control

Keyboard Shortcuts

Shortcut	Action
`V`	Select tool
`P`	Pen tool
`R`	Rectangle tool
`E`	Ellipse tool
`L`	Line tool
`A`	Arrow tool
`T`	Text tool
`X`	Eraser tool
`Ctrl+Z`	Undo
`Ctrl+Y`	Redo
`Ctrl+A`	Select all
`Ctrl+G`	Group selected elements
`Ctrl+Shift+G`	Ungroup elements
`Delete`	Delete selected
`Ctrl+S`	Save board

Canvas via Chat

Creating a Flowchart

Create a flowchart for user registration

09:00

📊 I've created a flowchart: User Registration Flow

Elements added:

1. Start (oval)

2. Enter Email (rectangle)

3. Validate Email (diamond)

4. Send Verification (rectangle)

5. Verify Code (diamond)

6. Complete Registration (rectangle)

7. End (oval)

[Open in Canvas] [Edit via Chat] [Export as PNG]

09:00

Drawing a System Diagram

Draw a system diagram showing BotServer connecting to PostgreSQL and Valkey

10:30

📐 System diagram created:

• BotServer (rectangle) — center

• PostgreSQL (cylinder) — left, connected with arrow

• Valkey (cylinder) — right, connected with arrow

• Arrows labeled: "queries" and "cache"

[Edit Elements] [Add More Components] [Export]

10:30

Adding Text Labels

Add a title "System Architecture" to the diagram

11:00

✅ Added text label: "System Architecture"

Position: Top center of the canvas

Font size: 24px, Bold

[Edit Text] [Change Style] [Move]

11:00

API Endpoints

Endpoint	Method	Description
`/api/canvas`	GET	List all boards
`/api/canvas`	POST	Create new board
`/api/canvas/:id`	GET	Get board data
`/api/canvas/:id`	PATCH	Update board
`/api/canvas/:id`	DELETE	Delete board
`/api/canvas/:id/elements`	POST	Add element
`/api/canvas/:id/elements/:el_id`	PATCH	Update element
`/api/canvas/:id/elements/:el_id`	DELETE	Delete element
`/api/canvas/:id/layers`	GET	Get layers
`/api/canvas/:id/layers`	POST	Create layer
`/api/canvas/:id/export`	GET	Export board
`/api/canvas/:id/collaborators`	GET	Get collaborators
`/api/canvas/search`	GET	Search boards

Create Board Request

{
    "title": "User Registration Flow",
    "width": 1200,
    "height": 800,
    "elements": [
        {
            "type": "oval",
            "x": 500,
            "y": 50,
            "width": 200,
            "height": 60,
            "fill": "#4CAF50",
            "text": "Start"
        },
        {
            "type": "arrow",
            "x1": 600,
            "y1": 110,
            "x2": 600,
            "y2": 160,
            "stroke": "#333333"
        }
    ],
    "layers": [
        {
            "name": "Main",
            "visible": true,
            "locked": false
        }
    ]
}

Board Response

{
    "id": "board-abc123",
    "title": "User Registration Flow",
    "width": 1200,
    "height": 800,
    "elements": [
        {
            "id": "el-001",
            "type": "oval",
            "x": 500,
            "y": 50,
            "width": 200,
            "height": 60,
            "fill": "#4CAF50",
            "text": "Start",
            "layer": "Main"
        }
    ],
    "layers": [
        {
            "name": "Main",
            "visible": true,
            "locked": false
        }
    ],
    "collaborators": [],
    "created_at": "2025-05-15T09:00:00Z",
    "updated_at": "2025-05-15T11:00:00Z"
}

Configuration

Canvas settings can be configured in config.csv:

key,value
max-elements,1000
auto-save-interval,30
default-canvas-width,1200
default-canvas-height,800
collaboration-enabled,true

Troubleshooting

Board Not Loading

Check internet connection
Verify board data isn’t corrupted
Check browser WebGL support
Refresh the page

Elements Not Syncing

Verify WebSocket connection is active
Check collaboration permissions
Ensure board isn’t locked by another user
Refresh to re-sync

Export Quality Issues

Check canvas dimensions
Verify all elements are visible
Ensure fonts are loaded
Try different export format

General Bots Documentation