{"id":2119,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Base de sintaxis de Mermaid.js"},"content":{"rendered":"<p>Antes de adentrarnos en disposiciones arquitect\u00f3nicas espec\u00edficas como diagramas de flujo complejos o cronogramas de secuencia, es esencial comprender las reglas fundamentales que rigen el<strong>Manual de Mermaid<\/strong>. Mermaid se basa en un sistema de notaci\u00f3n de texto limpio e intuitivo. Una vez que entiendas c\u00f3mo el motor inicializa un tipo de lienzo, nombra los componentes estructurales y enruta las flechas direccionales, escribir cualquier disposici\u00f3n de sistema complejo se vuelve completamente natural.<\/p>\n<p>Esta breve introducci\u00f3n cubre las mec\u00e1nicas de sintaxis estructural global que se aplican en casi todos los tipos de diagramas de Mermaid dentro del entorno de trabajo VPasCode.<\/p>\n<h2>1. Los envolventes obligatorios del tipo de diagrama<\/h2>\n<p>Cada bloque individual de c\u00f3digo de Mermaid debe comenzar declarando expl\u00edcitamente su arquetipo de diagrama en la primera l\u00ednea. Esto indica al analizador de VPasCode exactamente qu\u00e9 motor estructural debe activar en tu lienzo de vista previa:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Especifica una disposici\u00f3n de diagrama de flujo organizada de arriba hacia abajo.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Especifica un gr\u00e1fico de l\u00ednea de tiempo cronol\u00f3gica de tiempo de ejecuci\u00f3n.<\/li>\n<li><code>classDiagram<\/code> \u2014 Especifica un plano de software orientado a objetos estructural.<\/li>\n<\/ul>\n<p>A diferencia de otros motores de texto a diagrama, Mermaid no requiere etiquetas de cierre al final. El analizador simplemente lee la declaraci\u00f3n estructural en la primera l\u00ednea y compila todo lo anidado directamente debajo dentro del contenedor de tu bloque de c\u00f3digo.<\/p>\n<h2>2. Declaraci\u00f3n de elementos: IDs frente a etiquetas de visualizaci\u00f3n<\/h2>\n<p>Al modelar un sistema de software, crear\u00e1s diversos elementos estructurales como componentes, bases de datos o microservicios. En Mermaid, declaras un elemento definiendo una ID alfanum\u00e9rica interna corta, seguida inmediatamente por un estilo de corchetes que controla su forma visual, y un nombre de visualizaci\u00f3n amigable para el usuario:<\/p>\n<pre><code>microservice_id[API de procesamiento de pagos]\r\ndb_id[(SQL de transacciones de usuario)]<\/code><\/pre>\n<p><strong>\u00bfPor qu\u00e9 esta es una buena pr\u00e1ctica:<\/strong> Usar una ID interna corta y limpia (como<code>microservice_id<\/code>) hace que dibujar l\u00edneas de relaci\u00f3n sea mucho m\u00e1s r\u00e1pido m\u00e1s adelante. Si en alg\u00fan momento necesitas cambiar la etiqueta visible para el cliente de \u201cAPI de procesamiento de pagos\u201d a \u201cServicio de caja global\u201d, solo tendr\u00e1s que editarla en la \u00fanica l\u00ednea donde se declara, en lugar de actualizar decenas de l\u00edneas en todo tu script.<\/p>\n<h2>3. Dominar las flechas de relaci\u00f3n y la ruta direccional<\/h2>\n<p>Las conexiones entre nodos del sistema se dibujan usando combinaciones de guiones (<code>-<\/code>), signos de igualdad (<code>=<\/code>), y corchetes de flecha (<code>&gt;<\/code>). El estilo de tus l\u00edneas te da un control impl\u00edcito sobre c\u00f3mo el motor de dise\u00f1o autom\u00e1tico escala tu diagrama:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> dibuja una flecha dirigida est\u00e1ndar que apunta desde el elemento A directamente hacia el elemento B.<\/li>\n<li><code>A --- B<\/code> dibuja una l\u00ednea de enlace plana e indirigida sin punta de flecha, ideal para asociaciones simples.<\/li>\n<li><code>A -.-&gt; B<\/code> crea una l\u00ednea de dependencia punteada, que es el est\u00e1ndar de la industria para indicar dependencias as\u00edncronas o webhooks de red.<\/li>\n<li><code>A ==&gt; B<\/code> crea una l\u00ednea de conexi\u00f3n gruesa y en negrita, perfecta para resaltar rutas principales de procesamiento de datos o enlaces de infraestructura cr\u00edtica.<\/li>\n<\/ul>\n<h2>4. Agregar contexto en l\u00ednea: etiquetas y comentarios de c\u00f3digo<\/h2>\n<p>La documentaci\u00f3n clara depende en gran medida de colocar el contexto adecuado alrededor de tus l\u00edneas visuales y scripts de texto:<\/p>\n<h3>Etiquetado de l\u00edneas de conexi\u00f3n<\/h3>\n<p>Puedes agregar texto explicativo directamente a cualquier l\u00ednea de conexi\u00f3n insertando la cadena de texto entre dos conjuntos de guiones, o a\u00f1adiendo un car\u00e1cter de tuber\u00eda (&#8220;<code>|Texto|<\/code>) justo despu\u00e9s de tu asignaci\u00f3n de relaci\u00f3n:<\/p>\n<pre><code>client_id -- \"POST HTTPS \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |POST HTTPS \/v1\/checkout| api_id<\/code><\/pre>\n<h3>Escribir comentarios de c\u00f3digo<\/h3>\n<p>Si deseas dejar una nota administrativa, cr\u00e9dito de dise\u00f1o o explicaci\u00f3n arquitect\u00f3nica dentro de tu archivo de script sin renderizar una caja visual en la cuadr\u00edcula, utiliza signos de porcentaje dobles (<code>%%<\/code>). Esto indica al motor que omita completamente el an\u00e1lisis de esa l\u00ednea:<\/p>\n<pre><code>%% TODO: Debemos actualizar esta caja de l\u00edmite una vez finalice la migraci\u00f3n de DevOps\r\n[Monolito heredado] --&gt; [Nuevo Microservicio]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Antes de adentrarnos en disposiciones arquitect\u00f3nicas espec\u00edficas como diagramas de flujo complejos o cronogramas de secuencia, es esencial comprender las reglas fundamentales que rigen elManual de Mermaid. Mermaid se basa en un sistema de notaci\u00f3n de texto limpio e intuitivo&#8230;.<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"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-2119","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.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\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-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\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-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#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\":\"Base de sintaxis 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.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","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-syntax-basis\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_site_name":"VPasCode","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-syntax-basis\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#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":"Base de sintaxis 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\/2119","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2119"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}