{"id":2085,"date":"2026-07-08T06:12:59","date_gmt":"2026-07-08T06:12:59","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-packet-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T06:12:59","modified_gmt":"2026-07-08T06:12:59","slug":"mermaid-js-packet-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","title":{"rendered":"Syntax et guide de mise en page du diagramme de paquet Mermaid.js"},"content":{"rendered":"<p>Un diagramme de paquet est un composant de visualisation sp\u00e9cialis\u00e9 utilis\u00e9 par les ing\u00e9nieurs r\u00e9seaux, les analystes de s\u00e9curit\u00e9 et les d\u00e9veloppeurs de syst\u00e8mes pour repr\u00e9senter la structure binaire exacte des protocoles r\u00e9seau, des allocations de m\u00e9moire ou des en-t\u00eates de paquet mat\u00e9riels personnalis\u00e9s. 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\u00e9active et parfaitement align\u00e9e, \u00e0 partir d&#8217;une s\u00e9paration de champs claire et bas\u00e9e sur du texte.<\/p>\n<h2>Comprendre la mise en page de la grille de paquet<\/h2>\n<p>Contrairement aux sch\u00e9mas de flux libre standard, un diagramme de paquet repose sur un syst\u00e8me de grille rigoureux et math\u00e9matique mod\u00e9lis\u00e9 directement \u00e0 partir des RFCs r\u00e9seau :<\/p>\n<ul>\n<li><strong>Largeur des bits (axe horizontal) :<\/strong> Le moteur de mise en page divise automatiquement chaque ligne en un syst\u00e8me de grille de 32 bits (\u00e9tendant les bits 0 \u00e0 31) par d\u00e9faut.<\/li>\n<li><strong>Calcul automatique des bits :<\/strong> Vous d\u00e9clarez simplement la taille en bits pour chaque champ. Le moteur de rendu g\u00e8re les calculs \u2014 empaquetant automatiquement les champs adjacents dans la m\u00eame ligne ou les faisant passer proprement \u00e0 la ligne suivante lorsque la taille cumul\u00e9e d\u00e9passe le seuil de 32 bits.<\/li>\n<\/ul>\n<h2>Structure de syntaxe de base<\/h2>\n<p>Chaque carte de paquet commence par le <code>packet<\/code> en-t\u00eate de d\u00e9claration. Il est suivi par des champs blocs d\u00e9clar\u00e9s sous forme de paires s\u00e9quentielles correspondant \u00e0 un strict <code>\"Nom du champ\" : Taille en bits<\/code> mod\u00e8le sur des lignes individuelles.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSEzOTi3h5VJQMNA1tlJQCkstKs7Mz1MCiZjomgNFPD18wDwLXUNTIDeksiBVIT9NITi1qCwzORUsZWima2wIkssvScxR8EnNSy\/JUAIA9U8XCQ==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSEzOTi3h5VJQMNA1VrBSUApLLSrOzM9TAgmZ6JqDhDw9fMBcC11DUxA\/pLIgVSElVaE4tagsMzkVLGdopmtsCJL0yc9LL00tLVIoyS9JzElVAgCGIxkR\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">packet\r\n  0-3 : \"Version\"\r\n  4-7 : \"IHL\"\r\n  8-15 : \"Type de service\"\r\n  16-31 : \"Longueur totale\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSEzOTi3h5VJQMNA1VrBSUApLLSrOzM9TAgmZ6JqDhDw9fMBcC11DUxA\/pLIgVSElVaE4tagsMzkVLGdopmtsCJL0yc9LL00tLVIoyS9JzElVAgCGIxkR\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSEzOTi3h5VJQMNA1tlJQCkstKs7Mz1MCiZjomgNFPD18wDwLXUNTIDeksiBVIT9NITi1qCwzORUsZWima2wIkssvScxR8EnNSy\/JUAIA9U8XCQ==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"sLdedxF\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-958\" decoding=\"async\" fetchpriority=\"high\" height=\"62\" sizes=\"(max-width: 1026px) 100vw, 1026px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png 1026w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844-300x18.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844-1024x62.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844-768x46.png 768w\" width=\"1026\"\/><\/p>\n<h2>R\u00e9f\u00e9rence de syntaxe<\/h2>\n<p>Le tableau ci-dessous d\u00e9taille les param\u00e8tres de donn\u00e9es fondamentaux et les r\u00e8gles de mise en page n\u00e9cessaires pour construire un diagramme de paquet dans Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>\u00c9l\u00e9ment de syntaxe<\/th>\n<th>Exigence de type<\/th>\n<th>Description et comportement visuel de la grille<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>D\u00e9claration<\/strong><\/td>\n<td>Identificateur de mot-cl\u00e9<\/td>\n<td>Initialise l&#8217;espace de travail de mise en page du protocole au niveau des bits. Doit utiliser exactement <code>packet<\/code> bloc d&#8217;en-t\u00eate.<\/td>\n<\/tr>\n<tr>\n<td><strong>Nom du champ<\/strong><\/td>\n<td>Cha\u00eene entre guillemets<\/td>\n<td>L&#8217;\u00e9tiquette qui s&#8217;affiche \u00e0 l&#8217;int\u00e9rieur de l&#8217;espace du bloc. Doit toujours \u00eatre entour\u00e9e de guillemets doubles.<\/td>\n<\/tr>\n<tr>\n<td><strong>Taille en bits<\/strong><\/td>\n<td>Entier positif<\/td>\n<td>La longueur absolue en bits du champ (par exemple, <code>1<\/code> pour les drapeaux \u00e0 un seul bit, <code>8<\/code> pour les octets, <code>16<\/code> pour les entiers courts). D\u00e9termine la largeur visuelle.<\/td>\n<\/tr>\n<tr>\n<td><strong>D\u00e9clencheur de saut de ligne<\/strong><\/td>\n<td>Suivi automatique<\/td>\n<td>Se produit automatiquement chaque fois que la taille totale combin\u00e9e en bits atteint un multiple de 32 bits.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Maquette du monde r\u00e9el : Carte structurelle de l&#8217;en-t\u00eate du paquet IPv4<\/h2>\n<p>Cette maquette compl\u00e8te suit la structure standard d&#8217;un paquet de routage sur internet (IPv4). Elle montre comment les champs \u00e0 plusieurs bits, les drapeaux \u00e0 un seul bit et les blocs plus grands de 16 bits s&#8217;assemblent s\u00e9quentiellement dans la disposition standard en grille horizontale de 32 bits. Les champs qui atteignent la marque de 32 bits passent automatiquement \u00e0 la ligne suivante de mani\u00e8re propre.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo9jssKwjAQRfeC\/xC6H2j6rluhVCgoWNyHdNKGPlKSKPj3Jim4vPcMd87O+Iz2fCIkhvRCohdqI9UW+SaD0jW3tgupApq72H93JEqQJ+qP5BgQLSClninLFtLhNtopgDSBLGwMuFkpJGf2P15BHjvULGw0ockpFF6h0Wxc3T25C2HQBlY4l\/ChP2TKBMra5YdWVnG1HIYx1F6xRTagJtcJ+Wzea\/QDkn45+g==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo9jr0KwkAQhHvBdzjSWC3kx\/xZp1CwEAz2x7mGg+QuXjaij6S1b5AX09uI5XwzzEwvryPSciFECInYiOCEbtDWBB6tIfdot92zLCBKva4fPYozigHdTStkL8ogiby5t6YZcXSCLMl2NpMY1nPTGQ3pi1aS\/hsFpKH3Kid7lOOdaRpBxneq6alkKxsevDjZdN8GjmTfd7xY1\/O9PIa89ODgLFllf+NFCCXfPtqu4xplDbnp3bJoV2iAphdh8AEuv0ht\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">paquet\r\n  0-3 : \"Version\"\r\n  4-7 : \"IHL\"\r\n  8-15 : \"Type de service\"\r\n  16-31 : \"Longueur totale\"\r\n  32-47 : \"Identification\"\r\n  48-50 : \"Drapeaux\"\r\n  51-63 : \"D\u00e9calage de fragment\"\r\n  64-71 : \"TTL\"\r\n  72-79 : \"Protocole\"\r\n  80-95 : \"Somme de contr\u00f4le de l'en-t\u00eate\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo9jr0KwkAQhHvBdzjSWC3kx\/xZp1CwEAz2x7mGg+QuXjaij6S1b5AX09uI5XwzzEwvryPSciFECInYiOCEbtDWBB6tIfdot92zLCBKva4fPYozigHdTStkL8ogiby5t6YZcXSCLMl2NpMY1nPTGQ3pi1aS\/hsFpKH3Kid7lOOdaRpBxneq6alkKxsevDjZdN8GjmTfd7xY1\/O9PIa89ODgLFllf+NFCCXfPtqu4xplDbnp3bJoV2iAphdh8AEuv0ht\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo9jssKwjAQRfeC\/xC6H2j6rluhVCgoWNyHdNKGPlKSKPj3Jim4vPcMd87O+Iz2fCIkhvRCohdqI9UW+SaD0jW3tgupApq72H93JEqQJ+qP5BgQLSClninLFtLhNtopgDSBLGwMuFkpJGf2P15BHjvULGw0ockpFF6h0Wxc3T25C2HQBlY4l\/ChP2TKBMra5YdWVnG1HIYx1F6xRTagJtcJ+Wzea\/QDkn45+g==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"WSZphUv\"><img alt=\"\" class=\"alignnone size-full wp-image-959\" decoding=\"async\" height=\"156\" sizes=\"(max-width: 1026px) 100vw, 1026px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb824d711.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb824d711.png 1026w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb824d711-300x46.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb824d711-1024x156.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb824d711-768x117.png 768w\" width=\"1026\"\/><\/p>\n<hr\/>\n<p><em><strong>Astuce de syntaxe :<\/strong> Si un champ d\u00e9clar\u00e9 unique est sup\u00e9rieur \u00e0 32 bits (par exemple, un sel cryptographique ou une horodatage de 64 bits), le moteur de rendu l&#8217;enveloppera et l&#8217;\u00e9tirera verticalement sur plusieurs lignes cons\u00e9cutives, en utilisant des indicateurs de connexion clairs pour pr\u00e9server la lisibilit\u00e9.<\/em><\/p>\n<hr\/>\n<h2>P\u00e9ch\u00e9s courants de syntaxe et contraintes du syst\u00e8me<\/h2>\n<p>Lors de la conception de cartes de documentation tr\u00e8s pr\u00e9cises au niveau des octets, gardez ces param\u00e8tres de d\u00e9pannage \u00e0 l&#8217;esprit pour \u00e9viter les erreurs de compilation :<\/p>\n<ul>\n<li><strong>Enveloppes obligatoires par des guillemets :<\/strong> Chaque cha\u00eene de texte descripteur de champ doit \u00eatre entour\u00e9e de guillemets doubles. Omettre les guillemets entra\u00eenera des erreurs de syntaxe imm\u00e9diates.<\/li>\n<li><strong>Tailles de bits de cha\u00eene non valides :<\/strong> L&#8217;attribution de la taille de la valeur suivant le s\u00e9parateur deux-points doit \u00eatre un entier brut, non entour\u00e9 de guillemets. Le passage de d\u00e9cimaux ou de tailles alphab\u00e9tiques (par exemple, <code>\"Donn\u00e9es\" : 8bits<\/code>) interrompra la compilation du diagramme.<\/li>\n<li><strong>Alignement des bords de la grille<\/strong>Assurez-vous que la somme de vos champs combin\u00e9s soit un multiple de 32 pour obtenir des diagrammes d&#8217;en-t\u00eate uniformes et en forme de bo\u00eete. Laisser une ligne avec des bits non attribu\u00e9s peut entra\u00eener des blocs finaux de forme in\u00e9gale.<\/li>\n<li><strong>Contraintes d&#8217;affichage \u00e0 l&#8217;\u00e9chelle :<\/strong>Bien que le moteur calcule dynamiquement les largeurs des mises en page, remplir des blocs tr\u00e8s petits de 1 bit ou 2 bits avec des descriptions textuelles extr\u00eamement longues peut couper la typographie ou provoquer un encombrement visuel. Gardez les \u00e9tiquettes \u00e0 petit nombre de bits concises.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un diagramme de paquet est un composant de visualisation sp\u00e9cialis\u00e9 utilis\u00e9 par les ing\u00e9nieurs r\u00e9seaux, les analystes de s\u00e9curit\u00e9 et les d\u00e9veloppeurs de syst\u00e8mes pour repr\u00e9senter la structure binaire exacte des protocoles r\u00e9seau, des allocations de m\u00e9moire ou des en-t\u00eates&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":21,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2085","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Packet Diagram | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Packet Diagram | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Packet Diagram | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4deb786f844.png\",\"datePublished\":\"2026-07-08T06:12:59+00:00\",\"description\":\"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4deb786f844.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4deb786f844.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Syntax et guide de mise en page du diagramme de paquet Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Packet Diagram | VPasCode Text to Diagram Guide","description":"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid Packet Diagram | VPasCode Text to Diagram Guide","og_description":"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","name":"Mermaid Packet Diagram | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png","datePublished":"2026-07-08T06:12:59+00:00","description":"Define network packet headers and byte layouts using Mermaid packet syntax in VPasCode, a text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deb786f844.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Syntax et guide de mise en page du diagramme de paquet Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}