How to Customize Animated Flows

These “animated flows” are data-flow diagrams that you can play/pause. They are built from a small JSON file.

Where flow definitions live

• JSON files: static/flows/*.json

Example:

• static/flows/rfid-ets.json

JSON schema (summary)

• title, width, height
• nodes[]: {id,label,x,y,w?,h?}
• edges[]: {id,from,to,label?}
• steps[]: {id,title,caption?,activeNodes?,activeEdges?}

How to edit

1. Move nodes by changing x,y.
2. Add/remove nodes and edges.
3. Add steps to highlight different parts of the flow.

How to embed in a doc page

In an .mdx page:

import AnimatedFlow from '@site/src/components/AnimatedFlow';

<AnimatedFlow src="/flows/rfid-ets.json" autoPlayMs={1200} />

Tips

• Keep node IDs short and stable.
• Use 3–8 steps per flow.
• Prefer captions that describe what just happened.