Infographic Mode Reference
Technical reference for infographic mode including canvas dimensions, component structure, export specifications, and data model.
This reference documents the technical specifications for infographic mode, including canvas dimensions, data structures, export formats, and component library organisation.
Canvas Size Presets
Five preset canvas sizes are available, each optimised for specific output contexts.
| Preset | Width (px) | Height (px) | Aspect Ratio | Primary Use Case |
|---|---|---|---|---|
| 16:9 | 1920 | 1080 | Widescreen | Presentations, video thumbnails, digital displays |
| 4:3 | 1600 | 1200 | Classic | Traditional slides, legacy displays |
| 1:1 | 1200 | 1200 | Square | Social media posts, profile images |
| A4 Portrait | 794 | 1123 | Portrait | Document pages, handouts, PDF reports |
| A4 Landscape | 1123 | 794 | Landscape | Wide document layouts, certificates |
Data Model
Infographic data is stored within the diagram document as separate fields from the main diagram content.
Shape Grouping
Grouped shapes share a common group identifier and maintain their relative positions when moved.
Group Properties
Shape Rotation
Shapes in infographic mode support rotation via the rotation property.
Component Library
The component library provides reusable shape collections organised by source and category.
Export Formats
Four export formats are supported with format-specific handling.
| Format | Type | Transparency | Scale | Pipeline |
|---|---|---|---|---|
| SVG | Vector | Yes | 1x | Direct SVG download |
| PNG | Raster | Yes | 2x | SVG to Canvas to PNG Blob |
| JPEG | Raster | No | 2x | SVG to Canvas to JPEG Blob |
| Document | Yes | 1x | Embedded PNG in PDF |
Theme Colours
Exports respect the selected theme:
| Theme | Background Colour | Use Case |
|---|---|---|
| Light | #ffffff (white) | Standard documents, light presentations |
| Dark | #1a1a2e (charcoal) | Dark mode presentations, dramatic visuals |
Standalone Infographic Files
Infographics can be saved as standalone .infographic.json files. These self-contained files can be embedded in documentation pages using the Infographic content block.
| Aspect | Description |
|---|---|
| File extension | .infographic.json |
| Type field | type: 'infographic' |
| Content block | infographic (in Text & Media category) |
| Rendering | Aspect-ratio container, no interactive controls |
| Responsive | Scales to fill container width while maintaining proportions |
Viewer Rendering
Infographics in the published viewer and content blocks render at their designed aspect ratio as static images.
| Setting | Value | Effect |
|---|---|---|
| hideControls | true | No zoom or pan controls displayed |
| Pointer events | Disabled | No panning interaction |
| Wheel zoom | Disabled | No scroll-to-zoom |
| Activation hint | Hidden | No click-to-interact overlay |
| Aspect ratio | From canvas preset | CSS aspect-ratio property maintains proportions |
| ViewBox | Canvas dimensions | Renders at designed size |
State Management
The infographic state service manages separation between infographic and diagram content.
Mutual Exclusivity
The infographicOnly and presentationOnly settings are mutually exclusive. Enabling one automatically disables the other. This guarantees the viewer displays a single, unambiguous view mode when either setting is active.