Un diagramme de paquet est un composant de visualisation spécialisé utilisé par les ingénieurs réseaux, les analystes de sécurité et les développeurs de systèmes pour représenter la structure binaire exacte des protocoles réseau, des allocations de mémoire ou des en-têtes de paquet matériels personnalisés. Introduit nativement dans Mermaid.js, cet outil remplace les dessins manuels fastidieux de tableaux en rendant automatiquement une carte de grille au niveau des bits, réactive et parfaitement alignée, à partir d’une séparation de champs claire et basée sur du texte.
Comprendre la mise en page de la grille de paquet
Contrairement aux schémas de flux libre standard, un diagramme de paquet repose sur un système de grille rigoureux et mathématique modélisé directement à partir des RFCs réseau :
- Largeur des bits (axe horizontal) : Le moteur de mise en page divise automatiquement chaque ligne en un système de grille de 32 bits (étendant les bits 0 à 31) par défaut.
- Calcul automatique des bits : Vous déclarez simplement la taille en bits pour chaque champ. Le moteur de rendu gère les calculs — empaquetant automatiquement les champs adjacents dans la même ligne ou les faisant passer proprement à la ligne suivante lorsque la taille cumulée dépasse le seuil de 32 bits.
Structure de syntaxe de base
Chaque carte de paquet commence par le packet en-tête de déclaration. Il est suivi par des champs blocs déclarés sous forme de paires séquentielles correspondant à un strict "Nom du champ" : Taille en bits modèle sur des lignes individuelles.
packet
0-3 : "Version"
4-7 : "IHL"
8-15 : "Type de service"
16-31 : "Longueur totale"
Référence de syntaxe
Le tableau ci-dessous détaille les paramètres de données fondamentaux et les règles de mise en page nécessaires pour construire un diagramme de paquet dans Mermaid.js.
| Élément de syntaxe | Exigence de type | Description et comportement visuel de la grille |
|---|---|---|
| Déclaration | Identificateur de mot-clé | Initialise l’espace de travail de mise en page du protocole au niveau des bits. Doit utiliser exactement packet bloc d’en-tête. |
| Nom du champ | Chaîne entre guillemets | L’étiquette qui s’affiche à l’intérieur de l’espace du bloc. Doit toujours être entourée de guillemets doubles. |
| Taille en bits | Entier positif | La longueur absolue en bits du champ (par exemple, 1 pour les drapeaux à un seul bit, 8 pour les octets, 16 pour les entiers courts). Détermine la largeur visuelle. |
| Déclencheur de saut de ligne | Suivi automatique | Se produit automatiquement chaque fois que la taille totale combinée en bits atteint un multiple de 32 bits. |
Maquette du monde réel : Carte structurelle de l’en-tête du paquet IPv4
Cette maquette complète suit la structure standard d’un paquet de routage sur internet (IPv4). Elle montre comment les champs à plusieurs bits, les drapeaux à un seul bit et les blocs plus grands de 16 bits s’assemblent séquentiellement dans la disposition standard en grille horizontale de 32 bits. Les champs qui atteignent la marque de 32 bits passent automatiquement à la ligne suivante de manière propre.
paquet
0-3 : "Version"
4-7 : "IHL"
8-15 : "Type de service"
16-31 : "Longueur totale"
32-47 : "Identification"
48-50 : "Drapeaux"
51-63 : "Décalage de fragment"
64-71 : "TTL"
72-79 : "Protocole"
80-95 : "Somme de contrôle de l'en-tête"
Astuce de syntaxe : Si un champ déclaré unique est supérieur à 32 bits (par exemple, un sel cryptographique ou une horodatage de 64 bits), le moteur de rendu l’enveloppera et l’étirera verticalement sur plusieurs lignes consécutives, en utilisant des indicateurs de connexion clairs pour préserver la lisibilité.
Péchés courants de syntaxe et contraintes du système
Lors de la conception de cartes de documentation très précises au niveau des octets, gardez ces paramètres de dépannage à l’esprit pour éviter les erreurs de compilation :
- Enveloppes obligatoires par des guillemets : Chaque chaîne de texte descripteur de champ doit être entourée de guillemets doubles. Omettre les guillemets entraînera des erreurs de syntaxe immédiates.
- Tailles de bits de chaîne non valides : L’attribution de la taille de la valeur suivant le séparateur deux-points doit être un entier brut, non entouré de guillemets. Le passage de décimaux ou de tailles alphabétiques (par exemple,
"Données" : 8bits) interrompra la compilation du diagramme. - Alignement des bords de la grilleAssurez-vous que la somme de vos champs combinés soit un multiple de 32 pour obtenir des diagrammes d’en-tête uniformes et en forme de boîte. Laisser une ligne avec des bits non attribués peut entraîner des blocs finaux de forme inégale.
- Contraintes d’affichage à l’échelle :Bien que le moteur calcule dynamiquement les largeurs des mises en page, remplir des blocs très petits de 1 bit ou 2 bits avec des descriptions textuelles extrêmement longues peut couper la typographie ou provoquer un encombrement visuel. Gardez les étiquettes à petit nombre de bits concises.