Logo
NeoArc Studio

Infographic Mode

Infographic mode provides the complete diagram editor on a fixed-size canvas. All shape types, icon libraries, connections, ERD tables, swimlanes, auto-layout, and styling are available, plus shape rotation, grouping, a component library, shape effects with blend modes, and direct export to SVG, PNG, JPEG, and PDF.

Infographic mode provides the complete diagram editor on a fixed-size canvas for creating static visual assets. Every standard diagramming feature is available: all shape types, icon libraries from Azure, AWS, Kubernetes, CNCF, Lucide and brand collections, connections with orthogonal routing, ERD tables, swimlanes, auto-layout, and full styling controls. On top of the full editor, infographic mode adds shape rotation, grouping, a reusable component library, shape effects with blend modes, and direct multi-format export.

Included Diagram Editor Features

Infographic mode includes the complete diagram editor. All standard features are available on the fixed canvas.

Shape Types
Process shapes, simple containers, diamonds, hexagons, clouds, sticky notes, and more
Comprehensive Icon Libraries
Azure, AWS, GCP, Kubernetes, CNCF, Lucide, brand and technology collections, and custom SVGs
Connections
Straight, curved, orthogonal, and two-way paths with 20+ line endings including crow's foot
ERD Tables
Entity-relationship tables with columns, keys, foreign key auto-fill, and linting
Swimlanes
Multi-lane containers in vertical or horizontal orientation with resizable boundaries
Auto-Layout
5 layout algorithms including ERD, UML, compact grid, and force-directed (ELK.js)
Full Styling
Fill, stroke, text colours, font properties, and light/dark theme support
Alignment Tools
6 alignment options and 2 distribution options for precise element positioning
Editing Tools
Undo/redo, copy/paste, drag and drop, inline text editing, and diagram search

Additional Infographic Features

On top of the full diagram editor, infographic mode adds these capabilities.

Getting Started

Enable infographic mode to begin creating your visual asset.

Canvas Size Presets

Choose from five presets optimised for common output formats.

Creating Content

The full diagram editor is available in infographic mode. The shape palette in the left panel includes all shape types, ERD tables, swimlanes, and access to icon libraries from Azure, AWS, GCP, Kubernetes, CNCF, Lucide, Brand and Tech, and custom libraries. Connections, auto-layout, alignment tools, and all styling controls work identically to standard diagram mode.

Adding Shapes

Add shapes the same way as regular diagrams:

  1. Click a shape category in the left panel
  2. Click the shape you want
  3. Click on the canvas to place it

Connections work identically. Drag from connection points on shape edges to create lines between elements.

Shape Rotation

Infographic mode adds rotation controls as an additional feature on top of the standard editor.

Shape Grouping

Group multiple shapes to move, copy, or manipulate them as a single unit.

Component Library

The component library provides reusable design templates. Components appear in the left panel above the shape palette when infographic mode is active.

Shape Effects

Infographic mode includes a dedicated effects panel with visual effects, colour adjustment controls, and blend modes. Select any shape and open the Layers and Styles tab in the right panel to access the effects controls.

Shadows and Glows
Drop shadow, inner shadow, outer glow, and inner glow. Each with configurable offset, blur, colour, and opacity
Blur and Texture
Gaussian blur, motion blur (with directional angle), and noise (fractal or turbulence) for organic texture
Surface and Colour
Outline, emboss, colour overlay, six colour adjustments (brightness, contrast, saturation, hue, sepia, invert), and 16 blend modes

Exporting Infographics

Export your infographic directly from the configuration panel in the right menu.

Export Formats

Theme Selection

Before exporting, select the theme for your output:

  • Light theme: White background with dark elements
  • Dark theme: Charcoal background (#1a1a2e) with light elements

The theme selection affects the exported image regardless of your current editor theme.

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, found in the Text & Media category of the add panel.

Viewer Behaviour

When you publish a diagram that includes infographic content, the viewer displays tabs for available views: Diagram, Presentation (if animation steps exist), and Infographic.

Infographic-Only Mode

Enable Infographic Only in the configuration panel to hide the Diagram and Presentation tabs in the published viewer. Viewers see only the infographic with no option to switch views.

Static Display

Infographics in the viewer render as static images at their designed aspect ratio without interactive controls. There is no zoom, pan, or activation hint. The infographic displays responsively at its correct proportions within the page layout.

Deleting an Infographic

To remove infographic content from a diagram:

  1. Open the Infographic tab in the right panel
  2. Click Delete Infographic
  3. Confirm the deletion

This removes all infographic shapes, connections, and configuration. Your main diagram remains unaffected.

Use Cases

Infographic mode suits several common scenarios:

Tips for Effective Infographics