Référence API (spec JSON)

Cette page documente uniquement la forme de la spécification JSON (DataFlowSpec) passée à la prop spec, générée à partir du JSON Schema. Pour les composants et fonctions exportés (props de <DataFlowPlayer>, icônes personnalisées, coloration syntaxique), voir Composants et API JavaScript.

JSON Schema disponible

Le JSON Schema brut de DataFlowSpec (draft-07) est accessible de deux façons :

• Subpath du package npm (après npm install) : import schema from '@dataflow-animator/core/schema.json' (ou en lisant node_modules/@dataflow-animator/core/schema.json).
• URL publique, servie par ce site : schema.json — pratique pour pointer un $schema, la configuration d'un éditeur ou un validateur en ligne.

Il peut être utilisé pour la validation Ajv côté utilisateur, l'auto-complétion d'éditeur, ou la génération de formulaires. Voir la section Auto-complétion JSON dans VS Code pour la configuration VS Code.

DataFlowSpec

L'objet racine de la spécification.

Propriété	Type	Description	Exemples
#direction	Direction	Node placement direction. For the flow (left-to-right …), circular and tree modes you provide no coordinates — the engine arranges nodes from lane / main / the TreeSpec . Default: 'left-to-right'. Use 'tree' to lay out a binary tree (in-order rank → horizontal, depth → vertical) and enable the RotateSubtreeAction . Use 'graph' to place nodes yourself via their x / y (free 2D layout) — the escape hatch for an arbitrary graph (Dijkstra, A\*, minimum spanning tree…). Use 'circuit' for an electrical schematic: nodes placed by x / y on a grid, connections drawn as orthogonal wires (no arrow head) by default, and edges anchored on the components' named terminals ("node:pin"). left-to-rightright-to-lefttop-to-bottombottom-to-topcirculargraphtreecircuit	Ici top-to-bottom : le flux descend.
#diagonal_wires	boolean	(direction: 'circuit' only) Draw wires octilinearly: their corners are mitered into exact 45° segments (only 45 / 135 / 225 / 315°), so long L-shapes and staircases collapse into clean diagonal runs, while wires that are already straight (aligned terminals) stay straight. A short perpendicular stub is kept at each component pin, and a miter that would cross a body falls back to a right angle. Override per wire with Connection.diagonal . Default: false (strict horizontal/vertical wires). Ignored by every other direction.
#nodes *	Node[]	Fixed elements of the scene (servers, clients, databases…). They form the permanent decor and are placed automatically according to direction and their lane.
#tree	TreeSpec	Binary-tree topology, required when `direction` is `'tree'` (ignored otherwise). Drives the layout and the auto-drawn parent/child edges, and is the structure mutated by rotate_subtree. See TreeSpec .
#packets *	Packet[]	Mobile elements (requests, responses, messages). Declared here, then moved from one node to another by a move action in the timeline.	Un paquet déclaré ici, déplacé par la timeline.
#connections	Connection[]	Permanent arrows/links (decor) displayed upon initialization.	Lien permanent (décor) affiché dès le départ.
#zones	Zone[]	Rectangular regions displayed in the background around a group of nodes.	Une zone regroupe des nœuds en arrière-plan.
#timeline *	Action[]	Animated scenario: ordered list of actions (moves, arrows, comments…) played sequentially. Each root action becomes a navigable step.	Une action arrow jouée comme étape.
#description	string	What this animation shows, in one or two sentences — the opening line of the player's text description, which is what a screen-reader user hears before any step. The rest of that description (the cast of elements and every step) is generated from the spec, so omitting this still produces a usable one; it loses only the part no structure can supply, which is what the animation is ABOUT. Per-step wording is Action.description .
#pace	number	Scales the reading time the engine DERIVES for actions that carry something to read — a comment's text, a set_content's panel — when they declare no duration of their own. Above 1 leaves more time (1.25 = a quarter longer), below 1 moves faster. Default: 1. It is the single knob for the whole animation's pace: derive everything, then nudge it in one place if the result reads too fast or too slow for your audience. It deliberately does NOT touch a duration you wrote yourself — that is an explicit intent, not an estimate to be scaled.

Node

Un nœud (serveur, base, client…). Placé automatiquement selon direction/lane.

Propriété	Type	Description	Exemples
#id *	string	Unique node identifier (e.g., 'web_server').
#type *	NodeType	Node appearance: pictogram (server, client…), text node (panel) or geometric shape. See previews of each value. desktop laptop client server database mobile user admin users cloud alice bob eve simple_node complex_node square diamond circle triangle parallelogram height_rectangle width_rectangle star resistor potentiometer capacitor polarized_capacitor inductor fuse battery dc_source ac_source current_source diode led transistor_npn transistor_pnp opamp switch push_button lamp motor buzzer ground junction signal ammeter voltmeter antenna transformer mosfet_n mosfet_p transmission_gate and_gate or_gate not_gate nand_gate nor_gate xor_gate xnor_gate buffer_gate and3_gate or3_gate nand3_gate nor3_gate xor3_gate d_flip_flop jk_flip_flop t_flip_flop sr_latch mux_2to1 demux_1to2 half_adder full_adder
#text	string	Label displayed below the node. Supports inline LaTeX between $…$ — "$B_{in}$" renders B with an "in" subscript (see the "Math notation" page).
#visible	boolean	Initial visibility of the node. Default: true. A hidden node can be displayed via the set_visible action.	visible: false au départ, révélé par set_visible.
#icon	string	Overlaid badge: name of a known technology (e.g., 'react', 'postgres'), name of a registered icon, or short free text (e.g., 'v2', 'API').	icon: "react" — badge techno superposé.
#lane	number	Placement row/column (positive integer). Default: 1.	lane 1 (nœuds empilés) puis lane 2 (colonne suivante).
#main	boolean	(circular) Marks the node as a central node. Default: false.	main: true : nœud au centre (disposition circular).
#align_with	string	Aligns this node on the transverse axis of another node (by ID): useful for aligning two nodes from different lanes. Ignored in circular layout.	c aligné sur b1.
#x	number	(graph) Horizontal position as a fraction of the Stage, from 0 (left edge) to 1 (right edge). Used only when direction is 'graph'. Optional: omit it and the node is placed AUTOMATICALLY (the layout minimizes edge crossings). Provide it to pin the node as a fixed anchor the auto-placement of the other nodes routes around — handy to fix a source, a target, or the overall orientation. Ignored by every other direction (which derive positions from lane / main / the tree).
#y	number	(graph) Vertical position as a fraction of the Stage, from 0 (top edge) to 1 (bottom edge). Companion of Node.x : used only when direction is 'graph', omit for automatic placement, provide to pin the node. Ignored otherwise.
#merge_edges	boolean	Edge convergence on the node's faces. When true (the default), all connections / arrows / moves attaching to the same face of this node meet at a single anchor point: a many-to-one flow (a flood, a load balancer, a hub) visually converges instead of spreading out. Set to false to fan out the edges instead — each pair gets its own attachment point along the face, ordered to reduce crossings. Useful when a node has several distinct neighbours on the same side and you want to tell the links apart. Independent from the spreading of multiple edges between the *same* two nodes (bidirectional request/response tracks stay distinct regardless). Default: true.
#ports	object	Connection points on a round node's outline (type: 'circle'), so edges meet the circle wherever they naturally point instead of snapping to the four cardinal sides — the reason graphs and binary trees look more organic. - 'direct' (the default for a circle): the edge aims at the node centre and attaches exactly where that straight line crosses the outline — an *infinite* set of possible points, i.e. the most direct path. - a positive integer N: exactly N attach points, spread evenly around the outline; each edge snaps to the nearest one (4 reproduces N/E/S/W on the round contour). Edges landing on the same point merge, like merge_edges. Ignored on non-round node types (which keep cardinal-side anchoring).
#url	string	URL making the node clickable (opens in a new tab).	url rend le nœud cliquable (ouvre un nouvel onglet).
#background_color	string	Background color of the node: shape fill, panel background (simple_node/complex_node), pill behind a pictogram. Accepts a predefined CSS color (name: tomato, steelblue, teal…) or an exact hex value (#3b82f6). No effect on an active set_content.	background_color: "#3b82f6".
#border_color	string	Node border / stroke color (shape stroke, panel borders, stroke color of a pictogram). Same format as background_color. If background_color is defined but not border_color, a coordinated border (darker variant of the background) is automatically generated.	border_color: "steelblue".
#text_color	string	Color of the text displayed IN the node (shape body, panel header/body), only when syntax highlighting is disabled (no language: otherwise syntax colors take precedence). Same format as background_color (predefined name or hex). If not defined but a background_color is, a high-contrast color with the background (black or white) is automatically chosen.	text_color: "tomato".
#content	ObjectContent	Initial content displayed in the node (code terminal, window, etc.).	Contenu initial du nœud (ici un terminal de code).
#body	string	Text displayed IN the node, as opposed to text which remains the label below the node. For simple_node / complex_node: panel body (line breaks respected, colored according to language if provided). For geometric shapes (square … star): short centered text in the shape (keep it brief so it doesn't overflow), which supports inline LaTeX between $…$ (see the "Math notation" page). A panel body does NOT: $ is a legitimate character there, and the text goes through syntax highlighting.
#header	string	(complex_node) Header displayed above the body, separated by a line — the node then looks like an HTTP packet. Ignored by simple_node. Colored according to language if provided.	En-tête au-dessus du corps (allure paquet HTTP).
#language	HighlightLanguage	(simple_node / complex_node) Syntax highlighting language applied to ALL text areas of the node (header and body). Recognized values: see HighlightLanguage . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp	language: "sql" colore le texte du nœud.
#rotation	number	Clockwise rotation of the node visual, in degrees. The label below the node stays upright and arrow anchoring is unchanged (the layout box is not rotated). Can be animated with the rotate action. Default: 0. Exception — electrical components: a component's named terminals ( NodeType : resistor, transistor_npn…) DO rotate with the symbol, so a vertical resistor (rotation: 90) has its a/b terminals at the top/bottom. This is the intended behavior for circuits.	rotation: 45 oriente le visuel ; le label reste droit.
#closed	boolean	(Electrical switch / push_button) Initial state of the contact: true = closed (conducting), false = open (the default). Animate it with the toggle action — the lever swings and the state persists. Ignored by every other node type.
#value	string | number	Component value shown in the label (mainly for electrical components): a resistance, capacitance, voltage… Combined with Node.unit to form "<value> <unit>". If Node.text is also set, the value is appended to it ("R1 · 10 kΩ"). Purely a label convenience.
#unit	string	Unit appended after Node.value in the label (kΩ, µF, V, mA…). Ignored when value is absent.

Connection

Flèche permanente (décor) entre deux nœuds.

Propriété	Type	Description	Exemples
#id	string	Optional identifier.
#from *	string	Source node ID.
#to *	string	Destination node ID.
#style	LineStyle	Line style. Default: 'solid'. soliddotteddashedanimated	style: "dashed" — ligne en tirets.
#path	PathShape	Shape of the link path. Default: 'bezier'. See PathShape . beziersimplebezierstraightstepsmoothstep
#diagonal	boolean	(direction: 'circuit' only) Draw THIS wire octilinearly (true, 45° miters) or force it strictly orthogonal (false), overriding the circuit-wide DataFlowSpec.diagonal_wires . Unset = inherit that circuit default. Ignored outside circuit.
#arrow_head	enum	Arrow head. Default: 'forward'. forwardbackwardbothnone	arrow_head: "both" — pointe aux deux extrémités.
#text	string	Optional median text. Supports inline LaTeX between $…$ (see the "Math notation" page).	Libellé affiché au milieu du lien.
#color	string	Line color (predefined CSS name or hex). Tints the whole path and its arrow head(s); the median text label keeps the theme color for legibility. Default: the theme's neutral connection color. A runtime set_color on this connection's id recolors it, and an active highlight (accent) takes precedence over both.
#highlighted	boolean	Emphasizes the connection permanently, from initialization — the same accent color, thicker stroke and glow the HighlightAction applies, but static (no timeline action needed). Default: false.

Packet

Un paquet déplaçable, référencé par une action move.

Propriété	Type	Description	Exemples
#id *	string	Unique identifier of the packet.
#kind *	PacketKind	Packet category, which sets its appearance and expected content: http_packet (header + body via packet_content), sql_request (textual request via request_content), sql_response (response via response_content), a text panel (simple_node / complex_node) that travels: same look and content fields as the homonymous NodeType (body, plus header for complex_node, optionally syntax-highlighted via language), or a tech badge (subicon) that travels: the same Node.icon badge (known technology, registered icon, or short free text), via icon. http_packetsql_requestsql_responsesimple_nodecomplex_nodesubicon	http_packet : paquet bleu avec en-tête.
#request_content	string	Textual request (e.g., for sql_request).	Requête SQL portée par un sql_request.
#response_content	SqlResponse	Content of a sql_response: number of rows, header and body (text or table).	Réponse (ici texte court ; peut aussi être un tableau).
#packet_content	PacketContent	Content of an http_packet: header (e.g., 'GET /api') and optional body.	En-tête + corps d’un http_packet.
#body	string	(simple_node / complex_node) Panel body text (line breaks respected, colored according to language if provided). Same role as Node.body .	Paquet simple_node / complex_node : le nœud texte, mais il voyage.
#header	string	(complex_node) Header displayed above the body, separated by a line — the packet then looks like an HTTP packet. Ignored by simple_node. Same role as Node.header .
#language	HighlightLanguage	(simple_node / complex_node) Syntax highlighting language applied to ALL text areas of the panel (header and body). Recognized values: see HighlightLanguage . Same role as Node.language . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp
#icon	string	(subicon) The tech badge that travels: name of a known technology (e.g., 'react', 'postgres'), name of a registered icon, or short free text (e.g., 'v2', 'API'). Same role as Node.icon .	Paquet subicon : le badge techno, mais il voyage.

ObjectContent

Propriété	Type	Description	Exemples
#type	ContentType	Content display mode: code (colored terminal), text (browser-like window), image (illustration) or table (data table). imagetextcodetable	type: "text" → fenêtre avec barre d’adresse.
#value	string	Textual content according to type: source code (code), text (text) or image path/URL (image).	Code source affiché dans un terminal.
#language	HighlightLanguage	Language for syntax highlighting. Recognized values: see HighlightLanguage . javascriptjstypescripttsjsonsqlbashshshellpythonpycsharpcshtmlxmlmarkupcssjsxtsxhttp	language: "sql" colore le code.
#url	string	(text mode) URL displayed in the window's address bar.	URL affichée dans la barre d’adresse.
#columns	string[]	(table mode) Column headers.	En-têtes de colonnes du tableau.
#rows_data	string | number[][]	(table mode) Data rows.	Lignes de données du tableau.

Actions

Union discriminée sur type. Tous les types partagent les champs de timing (id, duration, wait_for, keep_until, keep_until_next).

move

Moves a packet from from to to.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"move"		Déplace le paquet de a vers b.
#object *	string	ID of the packet (declared in packets) to move.	object : le paquet (déclaré dans packets) déplacé.
#from *	string	Start node ID.	from : nœud de départ.
#to *	string	Arrival node ID.	to : nœud d’arrivée.

arrow

Draws an animated arrow between two nodes.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"arrow"		Trace une flèche a → b.
#from *	string	Start node ID of the arrow.	from : nœud de départ.
#to *	string	Arrival node ID of the arrow.	to : nœud d’arrivée.
#text	string	Label displayed in the middle of the arrow. Supports inline LaTeX between $…$ (see the "Math notation" page).	text : libellé affiché au milieu.
#style	LineStyle	Line style: solid, dotted, dashed or animated. Default: 'solid'. soliddotteddashedanimated	style: "dashed" — ligne en tirets.
#path	PathShape	Path shape: bezier, simplebezier, straight, step, smoothstep. Default: 'bezier'. beziersimplebezierstraightstepsmoothstep
#arrow_head	enum	Side(s) where to draw the arrow head. Default: 'forward'. forwardbackwardbothnone	arrow_head: "both" — pointe aux deux extrémités.

parallel

Executes multiple actions at the same time.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"parallel"		Plusieurs actions jouées au même instant.
#actions *	Action[]		actions : la liste jouée simultanément.

loading

Displays a loading spinner on a node.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"loading"		Spinner de chargement sur le nœud.
#object *	string		object : le nœud qui affiche le spinner.

set_content

Mutates the content of a node (code, text, image).

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"set_content"		Le contenu du nœud devient un terminal de code.
#object *	string		object : le nœud dont le contenu change.
#content *	ObjectContent		content : le nouveau contenu affiché.

comment

Displays a comment bubble near a node, or at the top of the stage if object is omitted.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"comment"		Bulle de commentaire près du nœud.
#object	string	ID of the node near which to display the comment. Omitted = omniscient comment (top of the stage).	object : nœud commenté (omis = haut du stage).
#text *	string	Supports inline LaTeX between $…$ (see the "Math notation" page).	text : le texte de la bulle.

highlight

Highlights a static node or a connection (by ID).

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"highlight"		Le nœud est mis en surbrillance.
#object *	string	ID of a static node OR a connection to highlight.	object : nœud (ou connexion) à surligner.

rotate

Animates the visual rotation of a node. Two mutually exclusive modes: - Target angle (to): a single eased rotation toward an absolute angle. The starting angle is the node's current rotation (its static rotation, or the target of a previous rotate), so successive rotations chain. - Continuous spin (spin): the node turns at a constant speed (linear, no easing) for as long as the action lasts. How long is driven by the usual timing fields — duration (spin that long), keep_until (spin until another action starts), or keep_until_end (spin until the end of the timeline). Only the visual rotates; the label stays upright. The angle reached when the rotation ends persists until the end of the timeline.

Propriété	Type	Description	Exemples
#id	string	Action ID to refer to it (wait_for / keep_until).
#description	string	What this step means, in one sentence, for the player's text description (see DataFlowSpec.description ). The description is generated from the action itself when this is omitted — "GET /users travels from Browser to Web server" — so an animation is described whether or not anyone writes anything. Provide it when the generated sentence would be accurate and still miss the point: the structure knows a packet moved, only you know it moved BECAUSE the cache missed. A comment action needs it least of all: its text is already your own narration, and it is used verbatim.
#duration	number	Animation duration in ms (default: 500, 1200 for loading).	duration règle la vitesse de l’animation — ici ralentie à 2,5 s.
#wait_for	string	ID of another action: this action starts at the end of that one.	L’action suivante démarre à la fin de celle-ci (wait_for).
#keep_until	string	ID of a future action: this action remains visible until its start.	Reste visible jusqu’au démarrage de l’action ciblée (keep_until).
#keep_until_next	boolean	Remains visible until the start of the next root step. Default: false for move/loading, true for arrow/comment/set_content.	Reste visible jusqu’au début de l’étape suivante.
#keep_until_end	boolean	If true, remains visible until the end of the timeline.	Reste visible jusqu’à la fin de la chronologie.
#delay_ms	number	Start offset in ms, added after resolving wait_for and the step clamp. Mainly useful in a parallel block to stagger actions against each other (staggered sequence animations). Also applies to an entire parallel action to delay the whole group.	delay_ms retarde le démarrage — ici de 0,9 s.
#fade_in_ms	number	Fade-in duration in ms. Default: 250 ms — or the element's appearance pause when that pause is shorter. The fade never fills the whole pause: a packet held at its origin to be read appears first, then stays legible for the rest of it. 0 = instant appearance.	fade_in_ms : apparition en fondu — ici 1,6 s.
#fade_out_ms	number	Fade-out duration in ms. Default: 250. 0 = instant disappearance. No effect if keep_until_end is true.	fade_out_ms : disparition en fondu — ici 1,6 s.
#type *	"rotate"		Rotation animée du visuel du nœud.
#object *	string	ID of the node to rotate.	object : le nœud à faire pivoter.
#to	number	Target angle in degrees (absolute, clockwise). Mutually exclusive with spin (which takes precedence if both are set).	to : angle cible absolu en degrés (avec inertie). Exclusif avec spin.
#spin	number	Continuous spin speed in degrees per second: positive turns clockwise, negative counter-clockwise. Mutually exclusive with to. The spin lasts for duration ms (default 600), or until keep_until / keep_until_end when set; the angle reached then persists.	spin : vitesse continue en deg/s (signée) ; tourne pendant duration, ou jusqu’à keep_until / keep_until_end.