Paquets (objets dynamiques)

Là où les nœuds sont statiques, les paquets (packets) sont les objets dynamiques : les charges utiles qui se déplacent d'un nœud à l'autre. Vous les déclarez une fois dans le tableau racine packets, puis vous les animez par leur id avec l'action move.

Un même paquet peut être déplacé plusieurs fois dans la timeline (aller, puis retour, puis transfert…) : c'est la même entité visuelle qui voyage.

Chargement…

kind — la nature du paquet

Le kind détermine l'apparence et les champs de contenu disponibles :

kind	Représente	Champ de contenu
http_packet	Une requête/réponse HTTP	packet_content
sql_request	Une requête SQL	request_content
sql_response	Un résultat SQL	response_content
simple_node	Une boîte de texte mobile	body / language
complex_node	Un en-tête + corps mobile	header / body / language
subicon	Un badge techno mobile	icon

http_packet — packet_content

Une enveloppe avec un en-tête (header, ex. la ligne de requête) et un corps (body) optionnel. Le corps accepte du texte (avec coloration syntaxique facultative) ou une image.

{
  id: 'req',
  kind: 'http_packet',
  packet_content: {
    header: 'GET /users',
    body: { type: 'text', value: 'Accept: application/json' },
  },
}

Pour une réponse, on réutilise la même forme avec un corps coloré :

{
  id: 'res',
  kind: 'http_packet',
  packet_content: {
    header: '200 OK',
    body: { type: 'text', value: '[{ "id": 1 }]', language: 'json' },
  },
}

sql_request — request_content

Le plus simple : une chaîne représentant la requête. Elle s'affiche dans le paquet pendant son déplacement vers la base.

{
  id: 'sql',
  kind: 'sql_request',
  request_content: 'SELECT id, nom FROM users',
}

sql_response — response_content

Le résultat renvoyé par la base. On y indique le nombre de lignes (rows), un en-tête optionnel (header), et un corps (body) qui peut être du texte ou un tableau :

{
  id: 'rows',
  kind: 'sql_response',
  response_content: {
    header: '2 lignes',
    body: {
      type: 'table',
      columns: ['id', 'nom'],
      rows_data: [
        [1, 'Alice'],
        [2, 'Bob'],
      ],
    },
  },
}

rows vs body

rows est un simple compteur affiché dans l'en-tête ; body porte le contenu réellement rendu (texte ou tableau). Un sql_response sans body n'affiche que son en-tête.

simple_node / complex_node — un nœud qui voyage

Les types de nœuds en panneau texte servent aussi de kind de paquet : déclarez un paquet avec kind: 'simple_node' ou kind: 'complex_node' et il porte les mêmes champs de contenu que le nœud — body, plus header pour complex_node, coloré au besoin via language. Aucun objet *_content imbriqué : c'est le nœud, mais il se déplace.

{
  id: 'msg',
  kind: 'simple_node',
  body: 'enfiler(tâche)',
  language: 'js',
}

complex_node ajoute la ligne d'en-tête, exactement comme le nœud statique — pratique quand vous utilisez déjà ce type de nœud dans la scène et voulez voir voler la charge utile correspondante :

{
  id: 'login',
  kind: 'complex_node',
  header: 'POST /login',
  body: '{ "utilisateur": "alice" }',
  language: 'json',
}

complex_node vs http_packet

Les deux rendent un en-tête au-dessus d'un corps. Choisissez complex_node quand vous voulez que le paquet ressemble exactement à un nœud complex_node déjà présent (même boîte, même API body/header/language) ; gardez http_packet pour sa forme dédiée packet_content (body typé, corps image).

subicon — un badge techno qui voyage

Le subicon du nœud — le petit badge de coin qui nomme une technologie — sert aussi de kind de paquet : déclarez un paquet avec kind: 'subicon' et un icon, et le badge voyage seul. icon prend les mêmes valeurs que celui du nœud : une technologie connue (react, postgres…), une icône enregistrée, ou un court texte libre (v2, API).

{
  id: 'lib',
  kind: 'subicon',
  icon: 'react',
}

Il est résolu par le même getSubIcon que le badge du nœud — n'importe quel nom déjà utilisé par vos nœuds fonctionne ici aussi — et le wrapper mobile s'affiche sous forme de pastille ronde.

Mettre un paquet en mouvement

Déclarer un paquet ne l'affiche pas : il n'apparaît qu'au moment d'un move.

timeline: [
  { type: 'move', object: 'req', from: 'browser', to: 'api' },
  { type: 'move', object: 'sql', from: 'api', to: 'db' },
],

Voir Types d'actions → move pour les durées, le décalage des voies bidirectionnelles et la persistance.