{"id":2094,"date":"2026-07-02T09:03:07","date_gmt":"2026-07-02T09:03:07","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-venn-diagram-syntax-layout-guide\/"},"modified":"2026-07-02T09:03:07","modified_gmt":"2026-07-02T09:03:07","slug":"mermaid-js-venn-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","title":{"rendered":"Sintaxis y gu\u00eda de dise\u00f1o de diagramas de Venn de Mermaid.js"},"content":{"rendered":"<p>Los diagramas de Venn muestran relaciones l\u00f3gicas entre diferentes conjuntos o grupos de datos utilizando c\u00edrculos superpuestos. Este enfoque basado en texto te permite ilustrar r\u00e1pidamente conceptos que se encuentran en la intersecci\u00f3n de m\u00faltiples categor\u00edas sin tener que lidiar con herramientas de dise\u00f1o gr\u00e1fico manual.<\/p>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada diagrama de Venn comienza con la <code>venn-beta<\/code> declaraci\u00f3n, seguida de la definici\u00f3n de grupos individuales usando la <code>set<\/code> palabra clave. Luego defines c\u00f3mo se superponen esos grupos usando la <code>union<\/code> palabra clave.<\/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:eNorS83L001KLUnk5SpOLVFwL8ovLXBUiFbySUxKzVFwVIpFEneCizuBxEvzMvPzoDp0ECo880pSi4pTk0tAsmDlSrEAk6shOw==\" 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:eNorS83L001KLUnk5SpOLVFwLyotyHdUiFZyLcksLAUKKzgqxSJJOSFLOYGkSvMy8\/Og+nSwKEpJVcjMK0ktKk5NTs48vDlPKRYAoE0nYA==\" \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\">venn-beta\r\nset GrupoA [\"Etiqueta A\"]\r\nset GrupoB [\"Etiqueta B\"]\r\nunion GrupoA, GrupoB [\"Etiqueta de intersecci\u00f3n\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorS83L001KLUnk5SpOLVFwLyotyHdUiFZyLcksLAUKKzgqxSJJOSFLOYGkSvMy8\/Og+nSwKEpJVcjMK0ktKk5NTs48vDlPKRYAoE0nYA==\" \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:eNorS83L001KLUnk5SpOLVFwL8ovLXBUiFbySUxKzVFwVIpFEneCizuBxEvzMvPzoDp0ECo880pSi4pTk0tAsmDlSrEAk6shOw==\" 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=\"vECsuep\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-901\" decoding=\"async\" fetchpriority=\"high\" height=\"450\" sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png 800w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8-300x169.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8-768x432.png 768w\" width=\"800\"\/><\/p>\n<h2>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa los elementos principales utilizados para construir un diagrama de Venn en Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente<\/th>\n<th>Descripci\u00f3n<\/th>\n<th>Ejemplo de sintaxis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaraci\u00f3n<\/strong><\/td>\n<td>Inicializa el renderizador del diagrama de Venn (actualmente en beta).<\/td>\n<td><code>venn-beta<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Conjunto<\/strong><\/td>\n<td>Define una categor\u00eda de datos independiente o un c\u00edrculo. Siempre proporciona un identificador y una etiqueta de visualizaci\u00f3n.<\/td>\n<td><code>set A [\"Equipo de Marketing\"]<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Uni\u00f3n<\/strong><\/td>\n<td>Define un \u00e1rea de superposici\u00f3n entre dos o m\u00e1s conjuntos. Separa los identificadores con una coma.<\/td>\n<td><code>union A,B [\"Objetivos compartidos\"]<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Modificador de tama\u00f1o<\/strong><\/td>\n<td>Un opcional <code>:N<\/code> sufijo que escala el tama\u00f1o del c\u00edrculo o la intersecci\u00f3n de forma relativa.<\/td>\n<td><code>set A [\"Gran Grupo\"]:15<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Nodo de texto<\/strong><\/td>\n<td>Un bloque con sangr\u00eda utilizado para listar puntos espec\u00edficos directamente dentro de un conjunto o \u00e1rea de intersecci\u00f3n.<\/td>\n<td><code>text ItemId [\"Vi\u00f1eta espec\u00edfica\"]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plantilla del mundo real: An\u00e1lisis de oportunidades de producto<\/h2>\n<p>Esta plantilla muestra un marco cl\u00e1sico de estrategia de desarrollo de productos que representa los puntos de dolor del usuario, los objetivos del negocio y la viabilidad t\u00e9cnica para identificar con precisi\u00f3n el lanzamiento ideal de una caracter\u00edstica.<\/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:eNqFkEEKwjAQRfeF3iF0rYdQQXEjhVpdSBfT+tGBOpFkoujpTRWLtAt3mfDe\/5PcIDKtoZQmHmpKD7cBjuaQdUeTE4vJLYv6rPog8+BZ4P3KUhux72h21Ab01BbNeQnyXLeIVDcKN9FY0JVqblkfHZomQdhK3zsZxhfqSHHixuxZ3ulDYdBUysUKlJ\/xEfFag8OP9ps+UteicBJrZ0HthTQK\/3ccpWzPMLmzx9CoKe6If1FcrWbVC4eNfW8=\" 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:eNqNkDFuAkEMRXsk7mBtTQ5BoiRdRAFpoi3MjEUszdqrsSdFbpQiFUfYi2WGSIDYhs7Fe\/\/b\/iKRhz05LhdGDjuj\/EYU4aPbFHE1iARRk+Y6JChWMLN2\/T\/9WIyFzF4VUzXesXJkJ1LooOFCbil8vhAa7xNV8glHDBwxgk8\/QThgA5eLIqxyXmI1K+DgmhkNyDxjdQ9VtebemrPCjMEpT7\/mTQFRGFTI+RvjdcJ14yxlXVwHbE7g6SjAUiPljt1nSc8JxvZfmI6j86Cnn41ZY6kXdv0fxZuSJQ==\" \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\">venn-beta\r\nset UserNeed [\"Puntos de dolor del usuario\"]\r\nset BusinessGoal [\"Valores del negocio\"]\r\nset TechFeasible [\"Capacidad t\u00e9cnica\"]\r\n\r\nunion UserNeed, BusinessGoal [\"Victorias estrat\u00e9gicas\"]\r\nunion UserNeed, TechFeasible [\"Caracter\u00edsticas no monetizadas\"]\r\nunion BusinessGoal, TechFeasible [\"Automatizaci\u00f3n interna\"]\r\n\r\nunion UserNeed, BusinessGoal, TechFeasible [\"El punto \u00f3ptimo del producto\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkDFuAkEMRXsk7mBtTQ5BoiRdRAFpoi3MjEUszdqrsSdFbpQiFUfYi2WGSIDYhs7Fe\/\/b\/iKRhz05LhdGDjuj\/EYU4aPbFHE1iARRk+Y6JChWMLN2\/T\/9WIyFzF4VUzXesXJkJ1LooOFCbil8vhAa7xNV8glHDBwxgk8\/QThgA5eLIqxyXmI1K+DgmhkNyDxjdQ9VtebemrPCjMEpT7\/mTQFRGFTI+RvjdcJ14yxlXVwHbE7g6SjAUiPljt1nSc8JxvZfmI6j86Cnn41ZY6kXdv0fxZuSJQ==\" \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:eNqFkEEKwjAQRfeF3iF0rYdQQXEjhVpdSBfT+tGBOpFkoujpTRWLtAt3mfDe\/5PcIDKtoZQmHmpKD7cBjuaQdUeTE4vJLYv6rPog8+BZ4P3KUhux72h21Ab01BbNeQnyXLeIVDcKN9FY0JVqblkfHZomQdhK3zsZxhfqSHHixuxZ3ulDYdBUysUKlJ\/xEfFag8OP9ps+UteicBJrZ0HthTQK\/3ccpWzPMLmzx9CoKe6If1FcrWbVC4eNfW8=\" 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=\"CAQxabW\"><img alt=\"\" class=\"alignnone size-full wp-image-902\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629b4d8f03.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629b4d8f03.png 800w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629b4d8f03-300x169.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629b4d8f03-768x432.png 768w\" width=\"800\"\/><\/p>\n<hr\/>\n<p><em><strong>Consejo de sintaxis:<\/strong> Cuando se usan tres o m\u00e1s categor\u00edas, Mermaid mapea autom\u00e1ticamente las intersecciones anidadas por ti. Simplemente declara la uni\u00f3n final de tres v\u00edas<code>uni\u00f3n<\/code> con los tres identificadores separados por comas, y el motor colocar\u00e1 la etiqueta perfectamente en la superposici\u00f3n central.<\/em><\/p>\n<hr\/>\n<h2>Concepto avanzado: Vi\u00f1etas y escalado<\/h2>\n<p>Para documentaci\u00f3n m\u00e1s t\u00e9cnica, puedes insertar vi\u00f1etas de texto espec\u00edficas directamente en tus c\u00edrculos y ajustar la escala de los c\u00edrculos para representar proporciones reales (como tama\u00f1os de bases de datos o n\u00famero de empleados en un equipo).<\/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:eNpNj80OgjAQhO8kvEMDVzXF\/3AToYmJQbRH4wFxNUjTGroafXtbUPG0uzOTr9MHSNk\/AuauowEJq5VEsveaCfLkHcKAug4hCE\/jBsbaQV6gd+jEoRGXnFvJIqK8qIxixwcw+WUjC0jVCQZX\/YeILCJTGi818O3aOq5zl6WSbaHeF8ruQvQ5msNwR12Fhru5gVxkK8JvUPzTWYNPzWpeJZzvWr7Gl4DPh8+lEKGfzNmYxT2isVYVhD6ls2EUfJNNhTbIYkaTeRdM6JRS+gbU\/WBa\" 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:eNpNj8tuwjAQRfeR8g9W2ELlQGmj7JoSS5UqXl6iLFJnggKWjeIBtX\/POIQmq5HvXB8f38CY2Q9gGQYOkInWGmSHqJtgqqhIYx4GjCH80jam1R5KhVExhHMKP6X0kUdkpTpT4kcPWP53Mw9Y2wpeTm6EyDxiax0eW5C7b78Jg6tprHkITZ9QcdV6JpEOxF0MCh03dxdQTd2oUtFNcGxzAfOx\/Rq7di9JuWeK2GuKehFSxz8N\/f\/rRut0kifiVaymzGFrz5BOOH+fZ\/Gz2Rk9imIleJ4MxZy\/cc7vVktmKQ==\" \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\">venn-beta\r\nset Front [\"Frontend\"]:10\r\n  text F1 [\"React\"]\r\n  text F2 [\"CSS\"]\r\nset Back [\"Backend\"]:15\r\n  text B1 [\"Node.js\"]\r\n  text B2 [\"PostgreSQL\"]\r\n\r\nunion Front, Back [\"Full-Stack\"]:3\r\n  text FB1 [\"Especificaciones OpenAPI\"]\r\n  text FB2 [\"SSR con Next.js\"]\r\n\r\nstyle Front fill:#E8F4FD, stroke:#0072B1\r\nstyle Back fill:#FDF0E8, stroke:#E06000<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj8tuwjAQRfeR8g9W2ELlQGmj7JoSS5UqXl6iLFJnggKWjeIBtX\/POIQmq5HvXB8f38CY2Q9gGQYOkInWGmSHqJtgqqhIYx4GjCH80jam1R5KhVExhHMKP6X0kUdkpTpT4kcPWP53Mw9Y2wpeTm6EyDxiax0eW5C7b78Jg6tprHkITZ9QcdV6JpEOxF0MCh03dxdQTd2oUtFNcGxzAfOx\/Rq7di9JuWeK2GuKehFSxz8N\/f\/rRut0kifiVaymzGFrz5BOOH+fZ\/Gz2Rk9imIleJ4MxZy\/cc7vVktmKQ==\" \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:eNpNj80OgjAQhO8kvEMDVzXF\/3AToYmJQbRH4wFxNUjTGroafXtbUPG0uzOTr9MHSNk\/AuauowEJq5VEsveaCfLkHcKAug4hCE\/jBsbaQV6gd+jEoRGXnFvJIqK8qIxixwcw+WUjC0jVCQZX\/YeILCJTGi818O3aOq5zl6WSbaHeF8ruQvQ5msNwR12Fhru5gVxkK8JvUPzTWYNPzWpeJZzvWr7Gl4DPh8+lEKGfzNmYxT2isVYVhD6ls2EUfJNNhTbIYkaTeRdM6JRS+gbU\/WBa\" 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=\"ssNvrzX\"><img alt=\"\" class=\"alignnone size-full wp-image-903\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 800px) 100vw, 800px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629c718741.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629c718741.png 800w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629c718741-300x169.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4629c718741-768x432.png 768w\" width=\"800\"\/><\/p>\n<h2>Errores comunes de sintaxis<\/h2>\n<p>Los diagramas de Venn son nuevos en el n\u00facleo de sintaxis de Mermaid. Ten en cuenta estas tres reglas de dise\u00f1o estructural para asegurarte de que tus gr\u00e1ficos se muestren sin problemas:<\/p>\n<ul>\n<li><strong>Prioriza el orden:<\/strong> Debes declarar completamente tus l\u00edneas individuales<code>set<\/code> antes de referenciarlas en cualquier bloque<code>uni\u00f3n<\/code> bloque. Referenciar un identificador que no se haya creado expl\u00edcitamente romper\u00e1 la compilaci\u00f3n.<\/li>\n<li><strong>Observa las comas de uni\u00f3n:<\/strong> Al construir una <code>uni\u00f3n<\/code> de m\u00faltiples conjuntos, aseg\u00farate de que haya comas que separen tus identificadores, pero sin comas al final justo antes de la etiqueta de corchete. <code>uni\u00f3n A, B, C [\"Etiqueta\"]<\/code> es correcto.<\/li>\n<li><strong>Estabilidad de la versi\u00f3n beta:<\/strong> Debido a que este estilo de dise\u00f1o utiliza la <code>bandera venn-beta<\/code> bandera, las reglas avanzadas de personalizaci\u00f3n de elementos pueden cambiar entre versiones. Adh\u00edrese a c\u00f3digos de color hex b\u00e1sicos para <code>relleno<\/code> y <code>trazo<\/code> variables para una compatibilidad cruzada m\u00e1xima.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Los diagramas de Venn muestran relaciones l\u00f3gicas entre diferentes conjuntos o grupos de datos utilizando c\u00edrculos superpuestos. Este enfoque basado en texto te permite ilustrar r\u00e1pidamente conceptos que se encuentran en la intersecci\u00f3n de m\u00faltiples categor\u00edas sin tener que lidiar&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":11,"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-2094","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 Venn Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams 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-venn-diagram-syntax-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-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_6a46298fd9cf8.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=\"3 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-venn-diagram-syntax-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/\",\"name\":\"Mermaid Venn 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-venn-diagram-syntax-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\",\"datePublished\":\"2026-07-02T09:03:07+00:00\",\"description\":\"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46298fd9cf8.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-venn-diagram-syntax-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 y gu\u00eda de dise\u00f1o de diagramas de Venn de Mermaid.js\"}]},{\"@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 Venn Diagram Syntax | VPasCode Text to Diagram Guide","description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams 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-venn-diagram-syntax-layout-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid Venn Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/","name":"Mermaid Venn 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-venn-diagram-syntax-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","datePublished":"2026-07-02T09:03:07+00:00","description":"Illustrate set overlaps and logical relationships with Mermaid Venn diagrams in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46298fd9cf8.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-venn-diagram-syntax-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 y gu\u00eda de dise\u00f1o de diagramas de Venn de Mermaid.js"}]},{"@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\/2094","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=2094"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}