canvas-workspace

Canvas Workspace — Canvas Workspace

The Axhub canvas is based on Excalidraw and supports standard drawing elements and two Axhub-specific node types (prototype nodes, document nodes), as well as element-level annotations. This skill only covers explicit canvas, prototype draft, and in-canvas Drawio diagram scenarios.

Core Concepts

Canvas File Location

Each prototype has its own independent canvas:

src/prototypes/<prototype-name>/canvas.excalidraw   ← 原型专属画布

The canvas file is standard Excalidraw JSON and can be read and written directly.

The canvas confirmation link is usually:

http://localhost:<port>/?projectId=<project-id>&p=<prototype-name>&v=canvas

For example http://localhost:53817/?projectId=make-project&p=rpa&v=canvas. The port and projectId are subject to the current project runtime environment.

Axhub-Specific Nodes

Prototype Node — Embeds an interactive prototype preview:

• type: "embeddable"
• link → Prototype URL (e.g. http://localhost:<port>/prototypes/<name>）
• customData.title → Prototype title
• customData.screenshotUrl → Screenshot persistence address

Document Node — Embeds a Markdown document:

• type: "embeddable"
• customData.type: "axhub-doc"
• link → Document API URL (/api/markdown-file?path=<encoded-path>）
• customData.title → Document title

Annotations

Any element can have annotations added, stored in:

• customData.annotation — Annotation text
• customData.annotationUpdatedAt — Update time (ISO 8601)

Images and Screenshot Assets

Screenshots of prototype nodes are saved in:

src/prototypes/<name>/canvas-assets/embed-<elementId>.png

Image assets in the canvas may serve three purposes:

• Visual Reference: Used as contextual reference during generation, revision, or restoration, and not necessarily written into code.
• Asset File: When the user explicitly wants to "use this image" or "use the image in the canvas as an asset", the local image file needs to be retained/copied and referenced in the implementation.
• Node Screenshot Cache: Preview images automatically generated by prototype nodes, mainly used for canvas display and visual verification.

Scenario Routing

Select the corresponding reference document based on user intent:

Signal	Scenario	Reference Document
Drawing sketches, UI layouts, flowcharts, architecture diagrams, wireframes	Prototype Sketch	references/prototype-sketch.md
Organizing inspiration, brainstorming solutions, diverging/converging ideas, generating prototypes/images/content/charts	Inspiration and Solutions	references/ideation-planning.md
Organizing the canvas, cleaning up and deleting, categorizing and arranging, optimizing layout	Canvas Organization	references/canvas-cleanup.md

Generation Intent Clarification

When the user says "generate an image", "generate a UI design draft", or "make an image", the output form must first be determined:

• It may be a canvas sketch, or it may be a real image, bitmap design draft, or asset image.
• If a real image is needed, use image generation-related tools/skills to generate the image.
• Regardless of whether the final output is a sketch or an image, the related content must be presented on the canvas for the user to confirm.
• When it is unclear whether the user wants a sketch or a real image, stop immediately and ask the user; do not arbitrarily choose one of the two.

If the scenario involves specific details of canvas read/write operations (CLI commands, file formats, Bridge communication), read references/canvas-read-write.md。

If basic Excalidraw drawing guidance is needed (diagram types, layout, complexity control), read references/excalidraw-basics.md。

If you need to create a JSON template for Excalidraw elements, read references/element-templates.md。

Read/write capabilities quick reference

Prefer reading and writing directly .excalidraw. Use the CLI only for reading annotations, capturing a screenshot of the current canvas, viewing online connections, or as a fallback when hot updates fail.

For detailed read/write reference, see references/canvas-read-write.md。

Each element must have a unique id. Recommended to use the <timestamp>-<random> format (e.g. "1778336862857-19qh357"), consistent with the existing canvas.

General specifications

• When the user is working on a canvas, related images, prototype pages, Markdown/Draw.io documents, diagrams, and other artifacts should in principle be placed into or updated on the current canvas, so the user can confirm them.
• roughness: 0 — Clean, crisp lines (unless the user requests a hand-drawn style)
• fontFamily: 3 — Cascadia (monospace font, suitable for technical content)
• fontFamily: 1 — Virgil (hand-drawn style)
• opacity: 100 — All elements remain opaque
• Use Excalidraw's built-in color palette; do not invent new colors
• Element spacing: 200-300px horizontally, 100-150px vertically
• Text fontSize at least 16px to ensure readability
• Related content must be grouped with frame elements, and elements within the group are assigned via frameId to the corresponding Frame

Delivery requirements

After completing canvas operations, the reply must at least include:

• The scene that was matched
• The content that was changed
• A canvas link the user can use to confirm (if it can be determined in the current environment)
• Ask the user whether they need to clean up the related processed annotations