Creative

Illustration Drawing

Use AISidebar to describe what you want — AI streams ExcalidrawElementSkeleton shapes onto the canvas with smart layout.

2 min read

AISidebar Workflow

The AISidebar is SparkLumina’s AI Smart Drawing interface. Open it from the toolbar, type a natural-language description of the illustration you want (e.g., “A cozy coffee shop with a barista, tables, and a window”), and the AI generates shapes directly on the Excalidraw canvas. No manual drawing required—you describe, it draws.

The flow is streaming end-to-end. As the AI model produces elements, they appear on the canvas in real time. You see the illustration build up incrementally rather than waiting for a full render, which makes the experience responsive and engaging.

ExcalidrawElementSkeleton Format

Internally, the AI generates ExcalidrawElementSkeleton objects—a simplified JSON representation of shapes. Each skeleton specifies:

Type: rectangle, ellipse, diamond, arrow, text, etc.
Position and size: x, y, width, height
Style: stroke color, fill, stroke width
Text content: for text elements
Bindings: arrow endpoints linking shapes

The frontend receives these skeletons, sanitizes them for safety and layout constraints, and converts them to native Excalidraw elements via the official convertToExcalidrawElements API. The result is fully editable—you can move, resize, recolor, or delete any AI-generated shape.

Smart Layout

The AI applies basic layout intelligence: grouping related elements, avoiding overlaps, and arranging components in a readable composition. Shapes are positioned with sensible defaults so the output looks coherent without manual tweaking. You can still refine the layout by dragging elements or asking the AI to adjust.

Shape Types

Supported shapes include rectangles, ellipses, diamonds, arrows, freehand strokes, and text. The AI chooses appropriate types for your description—flowcharts get arrows and boxes; character illustrations get curves and text labels. The variety covers most illustration needs.

Export

Once the illustration is complete, export it in standard formats: PNG for images, SVG for vector graphics, or .excalidraw for editable project files. PNG and SVG are ideal for presentations, docs, or social sharing; .excalidraw lets you reopen and edit in SparkLumina or vanilla Excalidraw.