Diagrams

Architecture Diagram — editable Remotion component

A responsive system map with positioned services, labeled connections, and deterministic request pulses for technical explainers.

Component details

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:

npx @agent-motion/cli create remotion my-remotion-video

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add architecture-diagram@0.2.0

The outer canvas is transparent; compose the diagram over a scene background with enough contrast for the selected preset.
Give every node a unique id and reference only existing ids from connection from and to fields.
Node x and y values are percentages of the diagram plot and should normally stay between ten and ninety.
Presets bundle public node, line, type, timing, and grid props: clean is large and solid, cloud is general-purpose, blueprint is technical, and neon is expressive.
Nodes and connections reveal from left to right; connection dashes continue moving after their reveal.
Use node.content in React code to replace a node label with custom JSX; this programmatic value is intentionally not serializable through JSON props.
Nodes have no fixed width or height; their content and padding determine the final card size.
Set node backgroundColor, textColor, or fontSize and connection color for per-item overrides.
Set lineLabelFontSize globally or connection labelFontSize for individual connection labels.
Use nodeBorderColor, nodeShadow, gridVisible, gridColor, and gridSize to recreate or override the selected preset treatment.
Use dashed to switch all connection lines between dashed and solid rendering.
Keep labels concise and use no more than eight nodes for a single-glance video scene.