Diagrams
Architecture Diagram — editable Remotion component
A responsive system map with positioned services, labeled connections, and deterministic request pulses for technical explainers.
Component details
- Version
- 0.1.0
- License
- MIT
- Duration
- 5.0 seconds
- Dimensions
- 1920 × 1080
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create a blank project first:
npx create-video --yes --blank my-video
Add editable source
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.1.0
Agent guidance
- 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.
- Use cloud for general explainers, blueprint for engineering narratives, and neon for launch or cybersecurity visuals.
- All nodes and base connections are visible from frame zero; only the request dashes move internally.
- Keep labels concise and use no more than eight nodes for a single-glance video scene.