{"id":2082,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-08T06:20:18","modified_gmt":"2026-07-08T06:20:18","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"Sintaxis de diagrama de bloques de Mermaid.js &#038; Gu\u00eda de dise\u00f1o de cuadr\u00edcula"},"content":{"rendered":"<p>Un diagrama de bloques es un motor de dise\u00f1o estructurado utilizado para representar arquitecturas de software complejas, plataformas de hardware o modelos organizativos. Introducido nativamente en Mermaid.js, el <code>bloque<\/code>motor trata el lienzo de dise\u00f1o como una matriz matem\u00e1tica absoluta de cuadr\u00edcula. Esto proporciona un control preciso sobre alineaciones de columnas, l\u00edmites de anidamiento de dise\u00f1o aislados, bloques de espaciado estructural y configuraciones expl\u00edcitas de enlaces de puertos de borde.<\/p>\n<h2>Comprender la estrategia de la matriz de cuadr\u00edcula<\/h2>\n<p>A diferencia de los diagramas de flujo de forma libre est\u00e1ndar que adivinan din\u00e1micamente las rutas de dise\u00f1o, un diagrama de bloques se basa en un sistema r\u00edgido de cuadr\u00edcula de coordenadas lineales:<\/p>\n<ul>\n<li><strong>El umbral de columna:<\/strong>Estableces un techo horizontal estricto utilizando el <code>columnas<\/code>modificador. Cuando la cuadr\u00edcula se llena con bloques, los elementos adicionales se ajustan limpiamente a la siguiente fila autom\u00e1ticamente.<\/li>\n<li><strong>Tama\u00f1o seg\u00fan campos de cuadr\u00edcula:<\/strong>Por defecto, cada bloque ocupa una sola posici\u00f3n de coordenadas ($1 times 1$). Puedes cambiar este comportamiento asignando anchos de columna expl\u00edcitos para que los elementos se extiendan perfectamente a trav\u00e9s de m\u00faltiples pistas.<\/li>\n<\/ul>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada dise\u00f1o comienza con el <code>bloque<\/code>encabezado de declaraci\u00f3n. A continuaci\u00f3n, se establece la capacidad de ancho de fila con la palabra clave <code>columnas<\/code>y declarando bloques en l\u00edneas consecutivas.<\/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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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 en 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:eNpLyskvLE3l5VJQSM7PKc3NSyxWMIbwcgvy81LzShyjlQKKMnNTixSSwEqVYlGknaKVnMDiCslAXlFiDpq8M1w+JbUoNTkjXykWAJxgJrc=\" \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\">bloque\r\n  columnas 3\r\n  componentA[\"Primer bloque\"]\r\n  componentB[\"Bloque central\"]\r\n  componentC[\"Bloque derecho\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyskvLE3l5VJQSM7PKc3NSyxWMIbwcgvy81LzShyjlQKKMnNTixSSwEqVYlGknaKVnMDiCslAXlFiDpq8M1w+JbUoNTkjXykWAJxgJrc=\" \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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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 en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"MVMmAKu\"><img alt=\"\" class=\"alignnone size-full wp-image-966\" decoding=\"async\" height=\"42\" sizes=\"(max-width: 321px) 100vw, 321px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" width=\"321\"\/><\/p>\n<h2>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa los par\u00e1metros de datos fundamentales, palabras clave de estilo personalizado y contenedores estructurales reconocidos nativamente por el int\u00e9rprete de bloques.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente de sintaxis<\/th>\n<th>Requisito de tipo<\/th>\n<th>Descripci\u00f3n y reglas visuales de dise\u00f1o<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaraci\u00f3n<\/strong><\/td>\n<td>Identificador de palabra clave<\/td>\n<td>Inicializa el lienzo de bloque de matriz de cuadr\u00edcula. Debe usar exactamente el <code>bloque<\/code> cadena de encabezado.<\/td>\n<\/tr>\n<tr>\n<td><strong>Conjunto de columnas<\/strong><\/td>\n<td>Palabra clave + Entero<\/td>\n<td>Define el recuento total de ranuras horizontales antes de envolver las filas (por ejemplo, <code>columnas 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Bloque est\u00e1ndar<\/strong><\/td>\n<td>ID + Etiqueta opcional<\/td>\n<td>Crea una caja de datos est\u00e1ndar: <code>id[\"Texto de etiqueta\"]<\/code>. Los decoradores de forma coinciden con la sintaxis de diagrama de flujo (por ejemplo, <code>(())<\/code> para c\u00edrculos, <code>[()]<\/code> para bases de datos).<\/td>\n<\/tr>\n<tr>\n<td><strong>Anulaci\u00f3n de dimensiones del bloque<\/strong><\/td>\n<td>Bloque de par\u00e1metro de dos puntos<\/td>\n<td>Anula la huella de cuadr\u00edcula de escala de dise\u00f1o predeterminada $1 times 1$ asignando expl\u00edcitamente bloques de ancho de columna personalizados: <code>id:ancho<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Elemento de espacio<\/strong><\/td>\n<td>Palabra clave reservada<\/td>\n<td>Inserta un mosaico invisible y estructural de espacio en blanco $1 times 1$ en la fila activa usando exactamente la palabra clave <code>espacio<\/code> palabra clave. Puedes multiplicar los espacios de ancho en l\u00ednea como <code>espacio:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Flecha de bloque<\/strong><\/td>\n<td>ID de entidad especializada<\/td>\n<td>Dibuja una caja de flecha transicional gruesa y estructurada dentro de una ranura de cuadr\u00edcula: <code>arrowId&lt;[\"Etiqueta\"]&gt;(direcci\u00f3n)<\/code>. Las direcciones incluyen <code>arriba<\/code>, <code>abajo<\/code>, <code>izquierda<\/code>, <code>derecha<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Envoltura compuesta<\/strong><\/td>\n<td>Bloque \/ Contenedor final<\/td>\n<td>Anida una matriz de subcuadr\u00edcula independiente y aislada directamente dentro de una ranura de bloque padre: <code>bloque:SubID ... fin<\/code>. Los sub-bloques pueden declarar sus prop\u00edos l\u00edmites independientes de columnas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Caracter\u00edstica avanzada: Dimensiones de bloque expl\u00edcitas y modificadores de espacio<\/h2>\n<p>Para dise\u00f1os asim\u00e9tricos, puedes pasar m\u00e9tricas de tama\u00f1o horizontal expl\u00edcitas directamente a bloques est\u00e1ndar o divisores de espacio usando un separador de notaci\u00f3n de dos puntos (<code>:ancho<\/code>). Esto obliga a los elementos a extenderse sobre m\u00faltiples posiciones de cuadr\u00edcula de forma limpia.<\/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:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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 en 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:eNoljMsKwkAMRfeC\/xDmE8RVl4p796WLdCZqIJPEdErBr7ePzYEL555R7DvT+QSQTeaqOMF1WwsXult1U9LWp4dmHOmHxaAQOCoJYHVhS0O3H4Re7YbRpxWBINgoUNIANDlmtu4Cwe\/P4Tz3gAdrZt+sP\/qpLes=\" \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\">bloque\r\n  columnas 4\r\n  wideComponent[\"Encabezado de panel amplio\"]:4\r\n  leftBar[\"Barra lateral\"] espacio:2 rightBar[\"Panel principal\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoljMsKwkAMRfeC\/xDmE8RVl4p796WLdCZqIJPEdErBr7ePzYEL555R7DvT+QSQTeaqOMF1WwsXult1U9LWp4dmHOmHxaAQOCoJYHVhS0O3H4Re7YbRpxWBINgoUNIANDlmtu4Cwe\/P4Tz3gAdrZt+sP\/qpLes=\" \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:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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 en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZuoRoRz\"><img alt=\"\" class=\"alignnone size-full wp-image-967\" decoding=\"async\" height=\"82\" sizes=\"(max-width: 372px) 100vw, 372px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" width=\"372\"\/><\/p>\n<hr\/>\n<h2>Caracter\u00edstica avanzada: Tipos de borde, direcciones y opciones de enlace<\/h2>\n<p>Conexiones dentro del <code>bloque<\/code>motor se dividen en l\u00edneas sem\u00e1nticas est\u00e1ndar y flechas de bloque de dise\u00f1o estructural. Las l\u00edneas de conexi\u00f3n est\u00e1ndar admiten especificar restricciones direccionales expl\u00edcitas para determinar c\u00f3mo las l\u00edneas envuelven los elementos.<\/p>\n<h3>1. Conectores de l\u00ednea est\u00e1ndar<\/h3>\n<p>Las conexiones de bloque usan los operadores de enlace est\u00e1ndar (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). Sin embargo, puedes controlar el enrutamiento agregando direcciones o modificadores dentro de par\u00e9ntesis:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : Dibuja una l\u00ednea direccional est\u00e1ndar desde el elemento A hasta el elemento B.<\/li>\n<li><code>A -- x B<\/code> : Dibuja una ruta de conexi\u00f3n terminada con una marca de \u201cX\u201d que indica una ruta bloqueada.<\/li>\n<li><code>A -- o B<\/code> : Dibuja una ruta de conexi\u00f3n terminada con un punto de conector en c\u00edrculo abierto.<\/li>\n<\/ul>\n<h3>2. Flechas de bloque de dise\u00f1o din\u00e1mico<\/h3>\n<p>Las flechas de bloque se tratan como componentes de dise\u00f1o reales que ocupan un bloque de \u00edndice de coordenadas real en su matriz de presupuesto de filas. Utilizan propiedades de sintaxis mayor que y menor que para mapear rutas de flujo f\u00edsicas:<\/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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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 en 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:eNpLyskvLE3l5VJQSM7PKc3NSyxWMAbxCoryU0qTS\/KLopUCYEyFlFQFl8SS\/GKlWJCStJzU5IxE39SUzESbaKWQosS84rT8otzEIoWQosML0zKT85Vi7TRSUotAyjQhVuQVl+ZmpoBMdYazkYwFAGvkMPQ=\" \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\">bloque\r\n  columnas 3\r\n  productor[\"Productor de Datos\"]\r\n  flechaMedia&lt;[\"Transformar Tr\u00e1fico\"]&gt;(derecha)\r\n  consumidor[\"Consumidor de Datos\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyskvLE3l5VJQSM7PKc3NSyxWMAbxCoryU0qTS\/KLopUCYEyFlFQFl8SS\/GKlWJCStJzU5IxE39SUzESbaKWQosS84rT8otzEIoWQosML0zKT85Vi7TRSUotAyjQhVuQVl+ZmpoBMdYazkYwFAGvkMPQ=\" \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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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 en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"uiUqlGG\"><img alt=\"\" class=\"alignnone size-full wp-image-968\" decoding=\"async\" height=\"50\" sizes=\"(max-width: 477px) 100vw, 477px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" width=\"477\"\/><\/p>\n<hr\/>\n<h2>Caracter\u00edstica avanzada: Anidamiento de matriz de sub-bloques (Agrupaci\u00f3n compuesta)<\/h2>\n<p>El <code>bloque:id<\/code>envoltura funciona como un entorno aislado de contexto de caja de dise\u00f1o. Un contenedor de grupo de aplicaciones puede establecer su propio recuento \u00fanico de columnas horizontales dentro de un sub-bloque, permitiendo que los componentes complejos se agrupen estrechamente sin influir en el espaciado de la cuadr\u00edcula de plantilla de lienzo padre global.<\/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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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 en 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:eNpNjTEOwjAMRXck7mDlCLCxdUIMRRViixgcNwhDiIuTgMS1OAIXg1CQGDw8\/f+fXZBL8dMJAEko54gJZpUGTKg+4Ab5bk33JVgGcRjMrlbquc98QaGk7LVlUkler0wsqeZ\/2vnIWPLBmrX0Ar2HpmQfMxMSPx9x9L47A1vTdCvolCPx8PsIcBM9ebWmlSxaBVtFh0cZ8z3HF0VcQiI=\" \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\">bloque\r\n  columnas 2\r\n  pasarelaRaiz[\"Pasarela Global\"]\r\n  \r\n  bloque:clusterMicroservicios\r\n    columnas 3\r\n    auth[\"Nodo de Autenticaci\u00f3n\"]\r\n    api[\"API Principal\"]\r\n    worker[\"Motor de Trabajo\"]\r\n  fin<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNjTEOwjAMRXck7mDlCLCxdUIMRRViixgcNwhDiIuTgMS1OAIXg1CQGDw8\/f+fXZBL8dMJAEko54gJZpUGTKg+4Ab5bk33JVgGcRjMrlbquc98QaGk7LVlUkler0wsqeZ\/2vnIWPLBmrX0Ar2HpmQfMxMSPx9x9L47A1vTdCvolCPx8PsIcBM9ebWmlSxaBVtFh0cZ8z3HF0VcQiI=\" \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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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 en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"kcZGAdG\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-969\" decoding=\"async\" height=\"58\" loading=\"lazy\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" width=\"747\"\/><\/p>\n<hr\/>\n<h2>Plano real: Infraestructura de m\u00faltiples niveles con cach\u00e9<\/h2>\n<p>Este plano completo de m\u00faltiples filas demuestra una configuraci\u00f3n de infraestructura de producci\u00f3n limpia. Establece una disposici\u00f3n de cuadr\u00edcula de procesamiento de 3 columnas, utiliza elementos estructurales<code>espacio<\/code>elementos para aislar una capa de base de datos, mapea una l\u00ednea gruesa hacia abajo<code>flechaDeBloque<\/code>, e a\u00edsla un contenedor de sub-sistema interno independiente utilizando un anidado <code>bloque:id ... fin<\/code> envoltura compuesta.<\/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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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 en 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:eNp1kc9KA0EMxu9C3yEsCO2hB+2tiNCuFQSF+gc8lB6ys2kdmU7WzIz6Oj6Dj9AXM7Nr1Ra8JTP5kl++VI5fEvWOAAy7tPEYYNQ7yvnxMVxah3AyhnuSV2ssB6gJZj4K1phLah9KZ8nHfr\/oAoJHqorBIP86xnqKDr0hWRTfEdYsuUuJssYcTFlqKpZZQKFBnbI\/\/nQMly49cytiT+92++nhSQsRbqwRDju4vRYKx2\/+jlOks0XxINuPlTXc8UuKuMm0XCzP+1jhMw\/+nT8aQ+lSiJSxXd6exbeNJo2zRgWZp+RNkyjE1paq9XSMTfOtzI9\/DD7tckzxqXOWFsVEQX3c9ev80JLGzvzaesorZNCdfZP5FczFemMbdF31yvpDBzCqJtCir+4HyroLjHrFOYe4Frq\/vS4Gy591Z4pfOdJrATqdmdt4CtoxSjIxCTrNjEPRHRRWCDYYRfHD4blhODyH\/f1\/s\/Zzx\/YFBQ7PLg==\" \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\">bloque\r\n  columnas 3\r\n\r\n  %% Fila 1: Servicios de Entrada\r\n  dnsClient((\"Cliente Web\"))\r\n  loadBalancer[\"Balanceador de Carga de Borde\"]\r\n  espacio\r\n\r\n  %% Fila 2: Flujo de Conexi\u00f3n hacia Microservicios\r\n  espacio\r\n  downRoute&lt;[\"Tr\u00e1fico de Enrutamiento\"]&gt;(abajo)\r\n  espacio\r\n\r\n  %% Fila 3: Cluster del Entorno de Aplicaci\u00f3n Compuesta\r\n  bloque:appCluster\r\n    columnas 2\r\n    authService[\"Autenticaci\u00f3n\"]\r\n    apiEngine[\"Trabajador de API Principal\"]\r\n  fin\r\n  espacio\r\n  database[(\"Base de Datos PostgreSQL\")]\r\n\r\n  %% Establecer alineaciones estructurales claras entre matrices\r\n  loadBalancer --&gt; appCluster\r\n  appCluster --&gt; database<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kc9KA0EMxu9C3yEsCO2hB+2tiNCuFQSF+gc8lB6ys2kdmU7WzIz6Oj6Dj9AXM7Nr1Ra8JTP5kl++VI5fEvWOAAy7tPEYYNQ7yvnxMVxah3AyhnuSV2ssB6gJZj4K1phLah9KZ8nHfr\/oAoJHqorBIP86xnqKDr0hWRTfEdYsuUuJssYcTFlqKpZZQKFBnbI\/\/nQMly49cytiT+92++nhSQsRbqwRDju4vRYKx2\/+jlOks0XxINuPlTXc8UuKuMm0XCzP+1jhMw\/+nT8aQ+lSiJSxXd6exbeNJo2zRgWZp+RNkyjE1paq9XSMTfOtzI9\/DD7tckzxqXOWFsVEQX3c9ev80JLGzvzaesorZNCdfZP5FczFemMbdF31yvpDBzCqJtCir+4HyroLjHrFOYe4Frq\/vS4Gy591Z4pfOdJrATqdmdt4CtoxSjIxCTrNjEPRHRRWCDYYRfHD4blhODyH\/f1\/s\/Zzx\/YFBQ7PLg==\" \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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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 en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"nAmZcPX\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-970\" decoding=\"async\" height=\"284\" loading=\"lazy\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" width=\"838\"\/><\/p>\n<hr\/>\n<h2>Errores comunes de sintaxis y limitaciones del sistema<\/h2>\n<p>Al compilar mapas precisos de matriz de cuadr\u00edcula, tenga en cuenta estas comprobaciones de validaci\u00f3n para evitar errores de an\u00e1lisis:<\/p>\n<ul>\n<li><strong>Aplicaci\u00f3n del presupuesto de columnas:<\/strong>Lleve un registro cuidadoso de su conteo de columnas. Si especifica <code>columnas 3<\/code> y escribe 4 bloques secuenciales en una fila, el cuarto bloque caer\u00e1 autom\u00e1ticamente a la fila 2, lo que puede interrumpir los caminos de conexi\u00f3n izquierda-derecha previstos.<\/li>\n<li><strong>Orden de anidamiento compuesto:<\/strong> Al construir contenedores internos con <code>bloque:id<\/code>, debe sellar siempre el espacio de trabajo de subcuadr\u00edcula utilizando la <code>fin<\/code> palabra clave en una l\u00ednea aislada antes de declarar elementos posteriores. No cerrar el bloque detendr\u00e1 la construcci\u00f3n del diagrama.<\/li>\n<li><strong>Limitaciones del destino de la flecha de bloque:<\/strong> La propiedad de direcci\u00f3n encerrada entre par\u00e9ntesis despu\u00e9s de una flecha de bloque (por ejemplo, <code>(arriba)<\/code>, <code>(abajo)<\/code>) debe ser un literal en min\u00fasculas que coincida perfectamente con las palabras clave del sistema. Mayuscular la direcci\u00f3n provocar\u00e1 errores de procesamiento.<\/li>\n<li><strong>Colisiones de l\u00edmites de etiqueta:<\/strong> Decoradores de forma de diagrama de flujo est\u00e1ndar (como par\u00e9ntesis <code>()<\/code> para cajas redondas o llaves <code>{}<\/code> para diamantes) est\u00e1n completamente admitidos. Aseg\u00farese de que todas las etiquetas de texto de visualizaci\u00f3n dentro de las formas utilicen comillas dobles limpias para evitar la eliminaci\u00f3n de caracteres.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un diagrama de bloques es un motor de dise\u00f1o estructurado utilizado para representar arquitecturas de software complejas, plataformas de hardware o modelos organizativos. Introducido nativamente en Mermaid.js, el bloquemotor trata el lienzo de dise\u00f1o como una matriz matem\u00e1tica absoluta de&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"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-2082","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 Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code 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\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-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_6a4ded6cdf466.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sintaxis de diagrama de bloques de Mermaid.js &#038; Gu\u00eda de dise\u00f1o de cuadr\u00edcula\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code 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\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sintaxis de diagrama de bloques de Mermaid.js &#038; Gu\u00eda de dise\u00f1o de cuadr\u00edcula"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}