Create a Diagram¶
A diagram is a single image with a set of hotspots layered on top. This page covers creating the diagram entry and uploading the image — hotspot drawing happens in the Diagram editor.
Steps¶
- From the sidebar, click Diagrams → New diagram.
- Enter a name. This is internal only — shoppers never see it. Pick something you'll recognize in the diagram list (e.g. "2024 Snowboard Mounting Plate").
- Optionally add internal notes for your team. Useful when multiple staff members maintain the catalog.
- Drop or browse to your image file.
- Click Save. The app uploads the image and creates the diagram.
You'll be taken straight into the editor to start drawing hotspots.
Image requirements¶
| Property | Recommendation |
|---|---|
| Format | PNG (preferred, supports transparency) or JPG |
| Width | 1200 – 2400 px |
| Height | Whatever fits the layout — not constrained |
| File size | Up to 5 MB |
| Color profile | sRGB |
| Background | White or transparent works best — heavily textured backgrounds make hotspots hard to see |
Keep one source of truth
If you re-export your diagram artwork, replace the image on the same diagram entry rather than creating a new one. All existing hotspots stay anchored to their normalized coordinates and continue to work as long as the proportions are similar.
What happens behind the scenes¶
- The image is stored in object storage (S3) behind a private CDN URL.
- The diagram metadata (name, dimensions, hotspot list) is stored in the app database.
- Nothing is published to the storefront yet — you still need to draw hotspots, map them, and assign the diagram to a product.