igun997/motion-diagram

Agent-driven animated API/flow diagram renderer (MP4 + carousel) with an MCP server

About motion-diagram

Agent-driven animated diagram renderer. Turn an API/flow/architecture description into an animated MP4 (glowing pulses traveling edges, node pops, camera focus, 8-bit sfx) or an Instagram-style carousel (silent GIF + WebP slides).

Built for content creators. Designed to be driven by an AI agent over MCP — the agent designs the scene, this tool renders it.

- Remotion (React → MP4 via headless Chrome + ffmpeg) - dagre (auto-layout) - ffmpeg (sfx synthesis, GIF→WebP) - MCP SDK (agent interface)

Check prerequisites (Node =18, ffmpeg, deps):

First render downloads a headless Chrome (~once). Full guide: docs/INSTALL.md.

Agent emits nodes, edges, and a timeline. See docs/SCHEMA.md.

type effect ------------- --------------------------------------------------- reveal-node node pops in (spring scale + fade) reveal-edge edge draws like a pen pulse glowing comet travels edge (data flow), multi-color flash node glow burst camera pan/zoom focus to a node

Bundled 8-bit sfx in public/sfx/: beep, whoosh, ding. Chosen per event by the agent (sfx / onArrive.sfx), or none. Swap the WAV files to rebrand.

user client server api database cloud queue cache lock key gear bolt globe mobile mail file check cross warning

Motion Diagram is designed to be driven by an AI agent over MCP. Install the skill into your agent with one command:

This writes a motion-diagram entry into each agent's MCP config:

Agent Config file -------------- ---------------------------------------------- Cursor ~/.cursor/mcp.json Claude Desktop claudedesktopconfig.json (OS-specific dir) Pi ~/.pi/agent/mcp.json

From the project README.

Maintaining this server?

Add the radar badge to your README — it shows your project was picked up by MCP Radar and links to this page:

[![On MCP Radar](https://mcp.liqiwa.com/badge.svg)](https://mcp.liqiwa.com/s/igun997--motion-diagram.html)

Related MCP servers