Image Node
TLDR: Image nodes add background images to your canvas. Use floor plans, diagrams, or photographs as visual context. Use "Send to Back" to place nodes on top of your layout.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | "Image" | Display name for this node |
| imageSrc | string | "" | Image data (base64) or URL |
| width | number | 200 | Display width in pixels |
| height | number | 150 | Display height in pixels |
Adding Images
- Add an Image node to your canvas
- Click the drop zone or drag an image file
- Resize by dragging the corners
- Click "Send to Back" to place behind other nodes
Supported Formats
- PNG (recommended for diagrams)
- JPG/JPEG (good for photos)
- GIF
- SVG
Use Cases
- Floor plans: Hospital layouts, factory floors, retail stores
- Diagrams: Process flow diagrams, spaghetti maps
- Photos: Actual facility photos for context
- Schematics: Equipment layouts, workstation arrangements
Layer Order
For background images:
- Add and position your image
- Click "Send to Back" in the properties panel
- Add your simulation nodes on top
- Align nodes with physical locations on the image
Floor Plan Tip
When using floor plans, position Entry nodes at actual entrances, Processors at workstations, and Exits at physical exit points. This makes the simulation intuitive and credible.
No Simulation Impact
Image nodes are purely visual. They don't affect entity flow, timing, or routing. Entities will not collide with or interact with images.