Infographic Mode

Create fixed-canvas visual assets with a comprehensive shape palette including interactive shapes with configurators, layers panel with z-order control, shape grouping, visual effects, gradient fills, a component library, canvas presets, and direct export to SVG, PNG, JPEG, and PDF.

February 6, 2026

Infographic mode provides a fixed-size canvas inside the standard diagram editor, designed for creating static visual assets. Every standard diagram feature is available: all icon libraries, a comprehensive shape palette including interactive shapes with dedicated configurator panels, ERD tables, swimlanes, connections, styling, and auto-layout. Infographic mode adds exclusive capabilities on top: a layers panel with z-order and visibility/lock controls, shape grouping, shape rotation, gradient fills, a component library, shape effects with blend modes, fixed canvas presets, and direct multi-format export.

Canvas Presets

Choose from several fixed canvas sizes, each with precise pixel dimensions for consistent output:

Preset	Dimensions	Use Case
16:9	1920 x 1080 px	Digital displays, widescreen monitors, slide decks
4:3	1600 x 1200 px	Classic presentation slides, projectors
1:1	1200 x 1200 px	Square format, social media, team dashboards
A4 Portrait	2480 x 3508 px (300 DPI)	Printed documentation, compliance reports
A4 Landscape	3508 x 2480 px (300 DPI)	Printed posters, wide-format technical diagrams

Exclusive Infographic Features

These capabilities are only available in infographic mode, not in the standard diagram editor or presentation mode:

Layers Panel

Full z-order control with drag-drop reordering, per-shape visibility and lock toggles, inline rename, and group management. Shapes listed in reverse z-order matching the visual hierarchy.

Shape Grouping

Group shapes to move, hide, and lock as a unit. Manage membership via drag-and-drop in the layers panel. Group-wide visibility, locking, and deletion.

Interactive Shapes

Data visualisation charts, structural shapes, and infographic indicators across four categories, each with a dedicated configurator panel. Configure values, colours, segments, and dimensions in real time.

Visual Effects

Drop shadows, inner shadows, glows, blur, motion blur, colour overlays, noise, outline, emboss, colour adjustments, and blend modes for professional styling.

Gradient Fills

Linear gradients with multiple colour stops for polished backgrounds and shapes. The colour picker includes a gradient editor for precise control.

Shape Rotation and Opacity

Rotate any shape 0-360 degrees and adjust opacity 0-100%. Both controls are in the Styles section of the Layers and Styles tab.

Component Library

Save selections as reusable components. Drag system or user components onto the canvas. Organise by category for a consistent visual vocabulary.

Fixed Canvas

Canvas dimensions locked to the selected preset. No infinite scroll: what you see is exactly what exports.

Interactive Shape Categories

The interactive shapes are organised into categories, each with dedicated configurator panels in the right menu.

Category	Count	Shapes
Data Visualisation	14	Pie chart, donut chart, ring segment, gauge, progress ring, bar chart, radar chart, treemap, heatmap grid, sparkline, bubble chart, stacked bar, sankey diagram, timeline
Structural and Decorative	18	Funnel, speech bubble, cylinder, wave, bracket, chevron, shield, ribbon, arrow container, custom polygon, callout, gear, spiral, tab, puzzle piece, torus, cross, rounded arrow
Infographic Indicators	6	Icon badge, comparison bar, rating stars, thermometer, battery, pie progress

Export Formats

Export infographics directly from the editor in 4 formats. PNG and JPEG exports render at 2x resolution for crisp output on high-DPI displays.

Format	Resolution	Best For
SVG	Vector (infinite scale)	Web embedding, further editing in design tools
PNG	2x canvas resolution	Documentation, presentations, web pages
JPEG	2x canvas resolution	Email attachments, compressed web images
PDF	Vector with embedded fonts	Printed handouts, formal documentation packages

Viewer Behaviour

When an infographic is embedded in a Content Foundry page, the viewer renders it at the correct aspect ratio without interactive controls. There is no zoom, pan, or selection: infographics display as fixed visual assets, matching the export output exactly.

Enable the "Infographic Only" toggle to hide the diagram and presentation tabs in the viewer, showing only the infographic.

File Storage

Infographic data is stored within the parent .diagram.json file as separate fields: infographicConfig, infographicShapes, and infographicConnections. Standalone .infographic.json files are also supported for infographic-only documents that have no associated standard diagram.

Use Cases

Architecture Posters

Create A4 or widescreen architecture overviews for printing and display in team spaces. Fixed dimensions guarantee consistent print output.

Executive Summaries

Design 16:9 visual summaries for leadership presentations. Export directly to PNG for slide decks or to PDF for distribution.

Team Wall Displays

Build landscape-format system overviews for large monitors or TV displays in team areas. Auto-play is not needed: the infographic is a static reference.

Print Documentation

Produce A4 diagrams at 300 DPI for inclusion in printed compliance packs, project handbooks, or vendor submissions.

Creating an Infographic

Shape Effects and Visual Styling

Apply 11 visual effects to shapes in infographic mode: drop shadow, inner shadow, outer glow, inner glow, Gaussian blur, motion blur, colour overlay, noise, outline, emboss, and colour adjustments. Combine effects with 16 blend modes for professional visual styling.

Diagram Editor

Create architecture diagrams, ERDs, flowcharts, and network diagrams with icon libraries from Azure, AWS, Kubernetes, CNCF, Lucide and brand collections. Includes presentation mode with animated viewport transitions, infographic mode with canvas presets, version snapshots, architecture transitions, and full auto-layout.

Animated Presentation Diagrams

Turn any architecture diagram into a step-by-step animated presentation with visibility actions, audio narration, viewport animation, speaker notes, and multiple standalone presentations per diagram.