{"id":2081,"date":"2026-07-08T06:12:59","date_gmt":"2026-07-08T06:12:59","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","title":{"rendered":"Guia de Sintaxe e Layout do Diagrama de Pacote do Mermaid.js"},"content":{"rendered":"<p>Um diagrama de pacote \u00e9 um componente de visualiza\u00e7\u00e3o especializado usado por engenheiros de rede, analistas de seguran\u00e7a e desenvolvedores de sistemas para mapear a estrutura bin\u00e1ria exata de protocolos de rede, aloca\u00e7\u00f5es de mem\u00f3ria ou cabe\u00e7alhos de pacotes personalizados de hardware. Introduzido nativamente no Mermaid.js, esta ferramenta substitui o trabalho tedioso de desenhar tabelas manualmente, renderizando automaticamente um mapa de grade de n\u00edvel de bits responsivo e perfeitamente alinhado a partir de uma divis\u00e3o de campos limpa e baseada em texto.<\/p>\n<h2>Compreendendo o Layout da Grade de Pacote<\/h2>\n<p>Diferentemente dos fluxogramas livres padr\u00e3o, um diagrama de pacote depende de um sistema rigoroso e matem\u00e1tico de grade modelado diretamente ap\u00f3s os RFCs de redes:<\/p>\n<ul>\n<li><strong>Largura de Bit (Eixo Horizontal):<\/strong>O motor de layout segmenta automaticamente cada linha em um sistema de grade de 32 bits (abrangendo os bits de 0 a 31) por padr\u00e3o.<\/li>\n<li><strong>C\u00e1lculo Autom\u00e1tico de Bits:<\/strong>Voc\u00ea simplesmente declara o tamanho em bits para cada campo. O motor de renderiza\u00e7\u00e3o cuida da matem\u00e1tica \u2014 empacotando automaticamente campos adjacentes na mesma linha ou envolvendo-os limpidamente na pr\u00f3xima linha quando o tamanho acumulado ultrapassar o limite de 32 bits.<\/li>\n<\/ul>\n<h2>Estrutura B\u00e1sica de Sintaxe<\/h2>\n<p>Todo mapa de pacote come\u00e7a com o <code>packet<\/code>cabe\u00e7alho de declara\u00e7\u00e3o. \u00c9 seguido por campos em bloco declarados como pares sequenciais que correspondem a um padr\u00e3o estrito <code>\"Nome do Campo\": TamanhoEmBits<\/code>padr\u00e3o em linhas individuais.<\/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>Edite o Mermaid no 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:eNorSEzOTi3h5VJQMNA1tlJQCkstKj68OF8JJGKiaw4U8fTwAfMsdA1NgdyQzIJ8hZRUheDUorLMw8shKg3NdI0NgZLO+bkFRZm5qXkl+Qoh+SWJOUoAza0awg==\" \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: \"Vers\u00e3o\"\r\n  4-7: \"IHL\"\r\n  8-15: \"Tipo de Servi\u00e7o\"\r\n  16-31: \"Comprimento Total\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSEzOTi3h5VJQMNA1tlJQCkstKj68OF8JJGKiaw4U8fTwAfMsdA1NgdyQzIJ8hZRUheDUorLMw8shKg3NdI0NgZLO+bkFRZm5qXkl+Qoh+SWJOUoAza0awg==\" \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>Edite o Mermaid no 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>Refer\u00eancia de Sintaxe<\/h2>\n<p>A tabela abaixo detalha os par\u00e2metros de dados fundamentais e as regras de formata\u00e7\u00e3o de layout necess\u00e1rias para construir um diagrama de pacote no Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Elemento de Sintaxe<\/th>\n<th>Requisito de Tipo<\/th>\n<th>Descri\u00e7\u00e3o e Comportamento Visual da Grade<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declara\u00e7\u00e3o<\/strong><\/td>\n<td>Identificador de Palavra-Chave<\/td>\n<td>Inicializa o espa\u00e7o de trabalho de layout de protocolo em n\u00edvel de bit. Deve usar exatamente o <code>packet<\/code>bloco de cabe\u00e7alho.<\/td>\n<\/tr>\n<tr>\n<td><strong>Nome do Campo<\/strong><\/td>\n<td>String entre aspas<\/td>\n<td>A etiqueta que \u00e9 exibida dentro do espa\u00e7o do bloco. Sempre deve estar entre aspas duplas.<\/td>\n<\/tr>\n<tr>\n<td><strong>Tamanho em Bits<\/strong><\/td>\n<td>N\u00famero Inteiro Positivo<\/td>\n<td>O comprimento absoluto em bits do campo (por exemplo, <code>1<\/code> para bandeiras de um \u00fanico bit, <code>8<\/code> para bytes, <code>16<\/code> para shorts). Define a largura visual.<\/td>\n<\/tr>\n<tr>\n<td><strong>Gatilho de Quebra de Linha<\/strong><\/td>\n<td>Rastreador Autom\u00e1tico<\/td>\n<td>Ocorre automaticamente toda vez que o tamanho total combinado em bits atinge um m\u00faltiplo de 32 bits.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plano Realista: Mapa Estrutural do Cabe\u00e7alho de Pacote IPv4<\/h2>\n<p>Este plano abrangente rastreia a estrutura padr\u00e3o de pacotes de roteamento na internet (IPv4). Mostra como campos de m\u00faltiplos bits, bandeiras de um \u00fanico bit e blocos maiores de 16 bits se montam sequencialmente dentro da disposi\u00e7\u00e3o padr\u00e3o em grade horizontal de 32 bits. Os campos que atingem a marca de 32 bits descem automaticamente para a pr\u00f3xima linha de forma limpa.<\/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>Editar Mermaid no 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:eNpFj80KwjAQhO+C7xB6X2j6r0crouBBsHhfk6iBtFvS4gt56IP0xUwT0OPMN+zM9ihoVOsVYzGkWxbdlB3mD0WLk0HpnNPx7FUFPHey0T0xqdhV2beep5DkBaTcwZra3upWdSOxhkY0nqYJZP6SdEA\/tMB5+nVUkMeO7bCTSlscvJtzKJY1ezUYEhgOutKDxacXPlW4gUtr04SFZQLlxumLpZEEmZCqYtjk4bN\/N5PEaryreULzougLOV9Lbg==\" \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\">pacote\r\n  0-3: \"Vers\u00e3o\"\r\n  4-7: \"IHL\"\r\n  8-15: \"Tipo de Servi\u00e7o\"\r\n  16-31: \"Comprimento Total\"\r\n  32-47: \"Identifica\u00e7\u00e3o\"\r\n  48-50: \"Bandeiras\"\r\n  51-63: \"Deslocamento de Fragmento\"\r\n  64-71: \"TTL\"\r\n  72-79: \"Protocolo\"\r\n  80-95: \"Verifica\u00e7\u00e3o do Cabe\u00e7alho\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFj80KwjAQhO+C7xB6X2j6r0crouBBsHhfk6iBtFvS4gt56IP0xUwT0OPMN+zM9ihoVOsVYzGkWxbdlB3mD0WLk0HpnNPx7FUFPHey0T0xqdhV2beep5DkBaTcwZra3upWdSOxhkY0nqYJZP6SdEA\/tMB5+nVUkMeO7bCTSlscvJtzKJY1ezUYEhgOutKDxacXPlW4gUtr04SFZQLlxumLpZEEmZCqYtjk4bN\/N5PEaryreULzougLOV9Lbg==\" \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>Editar Mermaid no 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>Dica de Sintaxe:<\/strong> Se um campo declarado individualmente for maior que 32 bits (como uma sal criptogr\u00e1fica de 64 bits ou um timestamp), o motor de renderiza\u00e7\u00e3o ir\u00e1 envolver suavemente e esticar esse bloco verticalmente por v\u00e1rias linhas sequenciais, usando indicadores de conex\u00e3o limpos para preservar a legibilidade.<\/em><\/p>\n<hr\/>\n<h2>Armadilhas Comuns de Sintaxe e Restri\u00e7\u00f5es do Sistema<\/h2>\n<p>Ao projetar mapas de documenta\u00e7\u00e3o de n\u00edvel de byte altamente precisos, considere esses par\u00e2metros de solu\u00e7\u00e3o de problemas para evitar falhas na compila\u00e7\u00e3o:<\/p>\n<ul>\n<li><strong>Embrulhos Obrigat\u00f3rios de Aspas:<\/strong> Cada string de descri\u00e7\u00e3o de campo deve estar entre aspas duplas. Omitir as aspas causar\u00e1 erros imediatos na an\u00e1lise de sintaxe.<\/li>\n<li><strong>Tamanhos Inv\u00e1lidos de Bits em String:<\/strong> A atribui\u00e7\u00e3o de espessura de valor ap\u00f3s o separador de dois pontos deve ser um n\u00famero inteiro bruto e n\u00e3o entre aspas. Passar decimais ou tamanhos alfab\u00e9ticos (por exemplo, <code>\"Dados\": 8bits<\/code>) interromper\u00e1 a compila\u00e7\u00e3o do diagrama.<\/li>\n<li><strong>Alinhamento de Borda da Grade<\/strong>Certifique-se de que a soma dos seus campos combinados seja divis\u00edvel por 32, para obter diagramas de cabe\u00e7alho uniformes e em forma de caixa. Deixar uma linha com bits n\u00e3o atribu\u00eddos pode causar blocos finais desiguais.<\/li>\n<li><strong>Restri\u00e7\u00f5es de Escala da Visualiza\u00e7\u00e3o:<\/strong>Embora o motor calcule dinamicamente as larguras do layout, encher blocos pequenos de 1 bit ou 2 bits com descri\u00e7\u00f5es de texto muito longas pode cortar a tipografia ou causar sobrecarga visual. Mantenha r\u00f3tulos de bits pequenos concisos.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Um diagrama de pacote \u00e9 um componente de visualiza\u00e7\u00e3o especializado usado por engenheiros de rede, analistas de seguran\u00e7a e desenvolvedores de sistemas para mapear a estrutura bin\u00e1ria exata de protocolos de rede, aloca\u00e7\u00f5es de mem\u00f3ria ou cabe\u00e7alhos de pacotes personalizados&#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-2081","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\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt\/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=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-packet-diagram-syntax-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guia de Sintaxe e Layout do Diagrama de Pacote do Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/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\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","og_locale":"pt_PT","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\/pt\/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":{"Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/pt\/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\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-packet-diagram-syntax-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Guia de Sintaxe e Layout do Diagrama de Pacote do Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2081"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}