AIFLOW Motion

Design animated AI-workflow diagrams in your browser — RAG pipelines, agent loops, and data flows — then export them as PNG / SVG / GIF / MP4.

English · 中文

🚀 Live demo · Quick start · Deployment

---

A motion-first workflow canvas for explaining AI systems.

Why it is different

Most diagram tools explain structure. AIFLOW Motion explains structure and execution: lines can flow, labels can move with the system, nodes can highlight in order, and the same motion you preview on the canvas can be exported for docs, launch pages, decks, and async reviews.

It is built for AI systems: RAG pipelines, agent loops, MCP tool graphs, data flows, retrieval chains, and automation workflows that are easier to understand when they move.

_{The same workflow as an animated GIF — motion makes execution order visible.}

Use cases

• Explain an AI agent, RAG architecture, MCP setup, or automation pipeline to a team or customer.
• Turn static architecture diagrams into GIF / video walkthroughs for documentation and launches.
• Prototype AI workflows with real node types, product logos, and editable execution paths.
• Prepare AI product proposals, technical documentation, launch visuals, and customer-facing workflow demos.

Highlights

• Line, node, and icon animations — set 7 edge animations, 6 node animations, and 10 icon animations; adjust line style, arrows, colors, gradients, node highlights, and icon motion from the inspector.
• Brand logos and icon picker — search 6,100+ theSVG brand/product logos such as OpenAI, Claude, DeepSeek, Pinecone, Redis, Docker, and AWS, or pick from 1,958 Lucide icons for custom nodes.
• AI generation, keys-safe — describe a workflow; the server-side generation flow first designs the graph, then styles it. Keys live only on the server proxy; the browser only calls /api/ai/*. Works with OpenAI-compatible, Anthropic, and local (Ollama / LM Studio / vLLM) providers.
• AI workflow semantics — built-in node types and templates map to real AI systems: LLMs, agents, retrievers, vector databases, prompts, tools, memory, MCP, and multi-agent flows.
• Rich editing — containers, decision branches, multi-port custom nodes, Markdown notes, auto-layout, multi-select, undo/redo, mini-map, and 8 theme presets in dark/light.
• Static and animated export — export the workflow as PNG, SVG, animated GIF, MP4 / WebM, or versioned JSON; customize the export background color and enable optional node-by-node playback for GIF/video exports.

Icon libraries

AIFLOW Motion uses two icon sources:

• Brand and product logos — powered by theSVG / GLINCKER/thesvg, with 6,100+ searchable logos in the picker. Use it for AI companies, model providers, databases, cloud platforms, developer tools, and product logos such as OpenAI, Claude, DeepSeek, Pinecone, Redis, Docker, AWS, and more.
• General-purpose node icons — powered by Lucide / lucide-icons/lucide, with 1,958 icons available. Use it for generic workflow roles, UI concepts, tools, files, folders, search, branches, containers, notes, and other non-brand symbols.

Custom nodes can switch between the built-in Lucide icon picker and the theSVG library. theSVG logos are loaded on demand from a CDN; if a brand logo cannot be loaded, the node falls back to the selected generic icon.

Capabilities

Area	What you can do
Canvas	Drag, pan, zoom, mini-map, auto-layout, multi-select, undo / redo
Nodes	AI-specific node types, custom nodes, containers, notes, Markdown, global or per-node layouts
Icons	Search real product logos from theSVG, or choose generic Lucide icons
Edges	Labels, start / end arrows, curved or orthogonal routes, line styles, gradients, motion
Motion	Node animation, icon animation, edge flow, particles, glow, and playback preview
AI	Prompt-to-workflow generation through a server-side proxy, with template fallback
Export	PNG, SVG, animated GIF, MP4 / WebM, versioned JSON, and custom export background colors

Quick start

Requires Node.js 18+ (20 or 22 recommended).

From the project directory, install dependencies and start the frontend:

npm install
npm run dev        # frontend on http://localhost:5173

Open http://localhost:5173. The app runs without a backend; AI generation falls back to local templates.

For real AI generation, run the proxy and frontend in two terminals:

cp server/providers.example.json server/providers.json
npm run server     # terminal 1: AI proxy on http://localhost:8787
npm run dev        # terminal 2: frontend on http://localhost:5173

Use http://localhost:5173 as the product URL during development. The proxy on 8787 is for /api/ai/*; if dist/ exists, it can also serve the built frontend for production-style testing.

AI configuration (optional)

Real AI generation uses the local proxy so API keys stay server-side. server/providers.json is gitignored — never commit keys. Each provider is one entry:

{
  "dailyLimit": 50,
  "providers": [
    { "id": "openai",    "type": "openai",    "baseURL": "https://api.openai.com/v1", "model": "gpt-4o",                   "apiKey": "sk-..." },
    { "id": "anthropic", "type": "anthropic", "baseURL": "https://api.anthropic.com",  "model": "claude-3-5-sonnet-latest", "apiKey": "sk-ant-..." },
    { "id": "local",     "type": "openai",    "baseURL": "http://localhost:11434/v1", "model": "llama3.1",                 "apiKey": "ollama" }
  ]
}

type: "openai" works with any OpenAI-compatible endpoint (OpenAI, Moonshot, DeepSeek, Groq, or local Ollama / LM Studio / vLLM); type: "anthropic" uses the Claude Messages API.

Privacy and data

• API keys stay in server/providers.json or server environment variables; they are never sent to the browser.
• The browser talks to the AI proxy through /api/ai/*.
• theSVG brand logos are loaded on demand from a CDN.
• Static deployments can run without the AI proxy; AI generation falls back to local templates.
• Workflow persistence is JSON import / export plus local browser recovery state, not a hosted database.

Deployment

• Static only (no AI) — npm run build, then host dist/ on any static host (Netlify, Vercel, GitHub Pages, Cloudflare Pages). AI generation falls back to local templates.

• Full stack (with AI) — run the proxy on a Node host (Render, Railway, Fly.io, a VPS, or Docker); it serves the built app and the API as one unit:

  npm run start     # build + node server/index.js → http://localhost:8787 (honours $PORT)

  Provide keys via server/providers.json, or the AI_PROVIDERS / AI_DAILY_LIMIT env vars.

Templates live in public/templates/*.json — add your own by dropping a JSON file there (same shape as Export → JSON) and listing it in public/templates/index.json.

Troubleshooting

• Why are there two local URLs? 5173 is the Vite frontend. 8787 is the AI proxy. Open the product at 5173 during development.
• AI generation says the service is unreachable. Start the proxy with npm run server, then refresh the frontend.
• The AI provider rejects the request. Check server/providers.json: baseURL, model, apiKey, and provider-specific options such as temperature.
• theSVG logos do not appear. Check network access to the theSVG CDN. Nodes fall back to generic icons if a logo cannot be loaded.
• A port is already in use. Stop the existing process on 5173 or 8787, then restart the matching command.

Tech stack

Vanilla JS (ES modules, no framework) built with Vite. Auto-layout via dagre, Markdown via marked, GIF encoding via gif.js, icons via lucide + the theSVG brand library (logos loaded on demand from a CDN). The optional AI proxy is Node + Express. Persistence is JSON import/export — no database.

License

Apache 2.0 © 2026 dongou and AIFLOW Motion contributors.

Bundled dependencies retain their own licenses. Brand logos are fetched from theSVG and remain the trademarks of their respective owners.