{"id":2133,"date":"2026-05-26T06:46:41","date_gmt":"2026-05-26T06:46:41","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/plantuml-syntax-basics\/"},"modified":"2026-05-26T06:46:41","modified_gmt":"2026-05-26T06:46:41","slug":"plantuml-syntax-basics","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/","title":{"rendered":"Conceptos b\u00e1sicos de la sintaxis de PlantUML"},"content":{"rendered":"<p>Antes de adentrarnos en dise\u00f1os arquitect\u00f3nicos espec\u00edficos como modelos C4 o cronolog\u00edas de secuencia, es esencial comprender las reglas fundamentales que rigen el<strong>Manual de PlantUML<\/strong>. PlantUML se basa en un sistema de notaci\u00f3n de texto limpio y altamente intuitivo. Una vez que entiendas c\u00f3mo el motor abre documentos, nombra los componentes estructurales y enruta las l\u00edneas de conexi\u00f3n, escribir cualquier dise\u00f1o de sistema complejo se vuelve completamente natural.<\/p>\n<p>Esta breve introducci\u00f3n cubre las mec\u00e1nicas sint\u00e1cticas estructurales globales que se aplican en casi todos los tipos de diagramas de PlantUML dentro del entorno de trabajo VPasCode.<\/p>\n<h2>1. Los envoltorios obligatorios de documento<\/h2>\n<p>Cada bloque individual de c\u00f3digo de PlantUML debe comenzar y terminar con etiquetas de marco expl\u00edcitas. Estas etiquetas indican al analizador de VPasCode que active el motor de renderizado correcto en tu lienzo de vista previa:<\/p>\n<ul>\n<li><code>@startuml<\/code> \u2014 Esta l\u00ednea exacta debe colocarse en la parte superior absoluta de tu script. Nada m\u00e1s debe precederla.<\/li>\n<li><code>@enduml<\/code> \u2014 Esta l\u00ednea exacta debe colocarse en la parte inferior absoluta de tu script, marcando el final de tu bloque de datos del diagrama.<\/li>\n<\/ul>\n<p>Cualquier c\u00f3digo escrito fuera de estos dos marcadores ser\u00e1 ignorado de forma segura por el compilador, o podr\u00eda desencadenar una advertencia de validaci\u00f3n de sintaxis en el panel de diagn\u00f3stico de tu entorno de trabajo.<\/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, actores o microservicios. En PlantUML, puedes declarar un elemento expl\u00edcitamente definiendo su tipo, una ID abreviada interna y un nombre de visualizaci\u00f3n amigable entre comillas:<\/p>\n<pre><code>componente microservice_id como \"API de procesamiento de pagos\"\r\ndatabase db_id como \"SQL de transacciones de usuario\"<\/code><\/pre>\n<p><strong>Por 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 una sola l\u00ednea de c\u00f3digo, 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 utilizando combinaciones de guiones (<code>-<\/code>) y corchetes de flecha (<code>&gt;<\/code>). La longitud de tus guiones y la inclusi\u00f3n de palabras clave direccionales te dan un control impl\u00edcito sobre c\u00f3mo el motor de dise\u00f1o autom\u00e1tico escala tu diagrama:<\/p>\n<ul>\n<li><strong>Conexiones b\u00e1sicas:<\/strong> <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><strong>L\u00edneas de dependencia punteadas:<\/strong>Sustituir los guiones por puntos crea una l\u00ednea punteada, que es el est\u00e1ndar de la industria para indicar dependencias as\u00edncronas o llamadas de red:<code>A ..&gt; B<\/code>.<\/li>\n<li><strong>Forzando la orientaci\u00f3n del dise\u00f1o:<\/strong> Aunque el motor de dise\u00f1o espacia los cuadros autom\u00e1ticamente, puedes dirigir expl\u00edcitamente la orientaci\u00f3n insertando una palabra clave de direcci\u00f3n directamente dentro de la cadena de flecha:\n<ul>\n<li><code>A -up-&gt; B<\/code> (Fuerza a B a renderizarse encima de A)<\/li>\n<li><code>A -down-&gt; B<\/code> (Fuerza a B a renderizarse debajo de A)<\/li>\n<li><code>A -left-&gt; B<\/code> (Fuerza a B a renderizarse a la izquierda de A)<\/li>\n<li><code>A -right-&gt; B<\/code> (Fuerza a B a renderizarse a la derecha de A)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>4. A\u00f1adiendo 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 a\u00f1adiendo dos puntos (&#8220;<code>:<\/code>) justo despu\u00e9s de tu mapeo de relaci\u00f3n:<\/p>\n<pre><code>client_id --&gt; api_id : \"POST HTTPS \/v1\/checkout\"<\/code><\/pre>\n<h3>Escribiendo 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 un car\u00e1cter de comilla simple (&#8220;<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<p>Ahora que est\u00e1s familiarizado con los envolventes de sintaxis globales, las declaraciones de componentes y los par\u00e1metros de flecha direccionales de PlantUML, est\u00e1s perfectamente preparado para comenzar a crear formas de sistema avanzadas. Procede a la siguiente p\u00e1gina para desbloquear nuestra colecci\u00f3n de <strong>Diagramas de Arquitectura y Dise\u00f1o de Alto Nivel<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de adentrarnos en dise\u00f1os arquitect\u00f3nicos espec\u00edficos como modelos C4 o cronolog\u00edas de secuencia, es esencial comprender las reglas fundamentales que rigen elManual de PlantUML. PlantUML se basa en un sistema de notaci\u00f3n de texto limpio y altamente intuitivo. Una&#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-2133","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>PlantUML Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\" \/>\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\/plantuml-syntax-basics\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PlantUML Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/\" \/>\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\\\/plantuml-syntax-basics\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/\",\"name\":\"PlantUML Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"datePublished\":\"2026-05-26T06:46:41+00:00\",\"description\":\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/#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\":\"Conceptos b\u00e1sicos de la sintaxis de PlantUML\"}]},{\"@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":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","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\/plantuml-syntax-basics\/","og_locale":"es_ES","og_type":"article","og_title":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/","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\/plantuml-syntax-basics\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/","name":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"datePublished":"2026-05-26T06:46:41+00:00","description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-syntax-basics\/#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":"Conceptos b\u00e1sicos de la sintaxis de PlantUML"}]},{"@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\/2133","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=2133"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}