Diagram Animation Editor - User Guide

A comprehensive guide to creating animated architecture diagrams and system visualizations.

Table of Contents

• Getting Started
• Interface Overview
• Creating Diagrams
• Using Templates
• Animation System
• Timeline Editor
• Presentation Mode
• Import & Export
• Keyboard Shortcuts
• Tips & Tricks

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

git clone https://github.com/jonathanleahy/diagram-animation.git
cd diagram-animation/frontend
npm install
npm run dev

The application opens at http://localhost:3001.

First Launch

When you first open the app, you'll see the landing screen with options to:

• Create New Diagram - Start with a blank canvas
• Import Project - Load a previously exported JSON file
• Load Sample Diagram - Try a pre-built example with animations

Interface Overview

The editor has four main areas:

1. Toolbar (Top)

The toolbar provides quick access to:

2. Sidebar (Left)

The sidebar contains:

• Architecture Templates - Pre-built diagram templates
• Basic Shapes - Rectangle, Circle, Diamond, Callout
• AWS / Cloud Services - Cloud architecture shapes (User, Cloud, CDN, Load Balancer, API Gateway, Lambda, Server, Container, DynamoDB, Storage, Queue, SNS)
• Pages - Manage presentation pages with descriptions

3. Properties Panel (Right)

Select any node or edge to edit its properties:

• Label text
• Fill and stroke colors
• Size and position
• Opacity
• Animation presets

4. Timeline (Bottom)

The timeline panel shows all animation tracks and keyframes:

• Transport controls (play, pause, stop, loop)
• Playback speed control
• Zoom-adjustable timeline view
• Color-coded tracks by property type
• Keyframe editing with drag support

Creating Diagrams

Adding Shapes

From the sidebar: Click any shape in the Basic Shapes or AWS / Cloud Services section to add it to the canvas.

From the toolbar: Select a drawing tool (Rectangle, Circle, Diamond, Callout) then click on the canvas to place it.

Connecting Nodes

Editing Nodes

• Move: Click and drag any node with the Select tool
• Resize: Drag the edge handles of a selected node
• Edit label: Select the node and modify the label in the Properties panel
• Style: Change colors, opacity, and stroke in the Properties panel
• Delete: Select and press Delete or Backspace

Right-Click Context Menu

Right-click on the canvas to access:

• Copy, Cut, Paste
• Duplicate selection
• Delete selected items

Using Templates

Templates are pre-built architecture diagrams with animations already configured.

Loading a Template

Available Templates

#### Simple Templates

Template Examples

API Gateway Pattern:

Saga Pattern (Distributed Transactions):

Microservices (Service Mesh):

CI/CD Pipeline:

Data Pipeline (ETL/ELT):

3D Isometric Template Gallery

All templates can be viewed in 3D isometric mode for a more visual, presentation-ready look.

Saga Pattern (3D):

Microservices (3D):

CI/CD Pipeline (3D):

Kubernetes Cluster (3D):

Data Pipeline (3D):

Circuit Breaker (3D):

Message Queue (3D):

Database Transactions (3D):

Event Sourcing (3D):

Load Balancer (3D):

Animation System

Animation Presets

Open the Animation Templates modal with Ctrl+Shift+A (or Cmd+Shift+A on Mac).

Presets are organized by category:

#### Entrance Animations

Applying Animation Presets

Animatable Properties

Easing Functions

Timeline Editor

The timeline editor sits at the bottom of the screen and provides full control over animation timing.

Transport Controls

• Play/Pause (Space) - Start or stop playback
• Stop - Return to beginning
• Step Forward/Back - Move frame by frame
• Loop - Toggle continuous looping
• Speed - Adjust playback speed (0.25x to 4x)

Working with Keyframes

• Add keyframe: Right-click on a track at the desired time
• Move keyframe: Drag a keyframe diamond along the timeline
• Edit keyframe: Click a keyframe to edit its value and easing
• Delete keyframe: Right-click and select "Delete Keyframe"
• Select multiple: Ctrl+click to multi-select keyframes

Track Management

Each animation track appears as a row in the timeline:

• Tracks are color-coded by property type (blue=position, green=opacity, yellow=scale, pink=rotation, purple=fillColor, cyan=flowProgress)
• Expand/collapse tracks to see keyframe details
• Delete tracks from the right-click context menu

Zoom and Pan

• Scroll to zoom in/out on the timeline
• The time ruler shows seconds and frames
• Drag the playhead (red line) to scrub through time

Presentation Mode

Presentation mode turns your diagram into an interactive, step-by-step walkthrough. It works in both 2D and 3D views.

3D Presentation Examples

Presentations in 3D isometric view give a polished, professional look:

Saga Pattern - 3D Presentation:

CI/CD Pipeline - 3D Presentation:

Microservices - 3D Presentation:

Setting Up Pages

Before presenting, configure pages in the sidebar:

Starting a Presentation

Navigation

Play Modes

• Step Mode (default): Pauses at each page boundary, waits for you to click/press Space
• Continuous Mode: Plays through all pages automatically without stopping

Presentation Overlay

The bottom bar shows:

• Current page name
• Play mode indicator (Step Mode / Continuous)
• Status message ("Ready for next step" / "Playing...")
• Page counter (e.g., "3 / 7")
• Navigation arrows
• Close button

Import & Export

Exporting a Project

Importing a Project

File Format

Projects are saved as JSON with this structure:

• nodes - All diagram nodes with positions, labels, and styles
• edges - Connections between nodes
• tracks - Animation tracks with keyframes
• pages - Presentation pages with time ranges and descriptions
• settings - View mode, grid, and other preferences

Keyboard Shortcuts

Tools

View

Playback

Editing

Modals

Presentation

3D Isometric View

Toggle between 2D and 3D views using the toolbar button or pressing Tab.

• 2D View: Top-down flat view, ideal for editing and precise positioning
• 3D View: Cloudcraft-inspired isometric view, great for presentations and visual appeal

• Nodes render as isometric boxes with depth
• Camera uses orthographic projection for clean isometric look
• All editing tools work the same in both views
• Labels scale correctly in both views

Command Palette

Press Ctrl+K to open the command palette for quick access to any action.

The palette provides searchable access to all editor commands and actions.

Tips & Tricks

Workflow Tips

Animation Tips

Performance Tips

Presentation Tips