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.

February 6, 2026

Presentation mode transforms a standard diagram into a step-by-step animated walkthrough. Every feature of the diagram editor remains available: all icon libraries, shapes, ERD tables, swimlanes, connections, and auto-layout. Presentation mode adds animation on top of the full modelling canvas rather than replacing it with a simplified tool.

Visibility Actions

Each step controls element visibility through animation actions. Every action supports an optional duration.

Category	Action	Behaviour
Entrance	appear	Instant visibility, no transition
Entrance	fadeIn	Gradual opacity increase over the step duration
Exit	disappear	Instant hide, no transition
Exit	fadeOut	Gradual opacity decrease over the step duration

Step Configuration

Each presentation step captures the full state of the diagram at that point in the walkthrough:

Visibility Intents

Control which elements appear, disappear, or animate at each step. Only changes from the previous step are stored.

Viewport Animation

Zoom and pan the view to focus on a specific area of the diagram at each step. The viewer animates smoothly between viewport positions.

Speaker Notes

Add rich-text speaker notes per step for live presentations. Notes appear in a dedicated panel visible only to the presenter.

Tag Filters

Control which tagged elements are visible at each step. Tags defined on diagram shapes are toggled per step to show or hide groups of elements.

Audio Narration

Each presentation step supports audio narration, allowing presenters to record or import audio that plays back automatically during the presentation.

Recording

Record audio directly per step using the built-in microphone recorder. Audio is captured in Opus/WebM format.

Import

Import pre-recorded audio files for each step. Supports common audio formats.

Auto-Duration

Step duration automatically extends to match audio length, so that narration plays fully before advancing.

Playback Options

Linked Discovery and Embedding

Presentation files are automatically discovered by diagram content blocks. When a page embeds a diagram, sibling .presentation.json files appear as selectable tabs alongside the main diagram view.

Presentation Content Block

Embed presentations in Content Foundry pages with full step navigation controls: previous, next, and a step counter.

Sibling Discovery

Diagram blocks auto-discover presentation files stored alongside the diagram. Readers switch between the static diagram and any presentations without navigating away.

Use Cases

Architecture Walkthroughs

Reveal system components one layer at a time, starting from external actors and progressing through API gateways, services, and data stores.

Migration Phase Presentations

Show each phase of a migration: current state, interim architecture, and target state, with elements appearing and disappearing to highlight changes.

Data Flow Explanations

Animate data flowing through an architecture using sequential fadeIn actions along the path, making complex integrations understandable.

Stakeholder Briefings

Create focused presentations that reveal only the detail level appropriate for each audience, using tag filters to show or hide technical specifics.

Onboarding Content

Build self-paced learning materials that new team members step through at their own pace, with speaker notes providing additional context.

Architecture Reviews

Present designs to review boards using speaker notes per step, viewport zoom to highlight areas under discussion, and step-by-step progressive disclosure.

Creating a Presentation

Slideshow Capture

Build presentation steps instantly by capturing screenshots as you navigate the application. Each screenshot becomes a full-canvas slide with automatic crossfade transitions between steps.

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.

Creating Your First Diagram

Learn the basics of creating diagrams in NeoArc Studio. Add shapes, connect them, and arrange your diagram for clarity.