Editor de PlantUML
Escribe PlantUML y mira cómo el diagrama se actualiza mientras escribes. Empieza con una plantilla de secuencia, clases, actividad, estados, casos de uso, componentes, ER, mapa mental o Gantt y descarga un SVG limpio o un PNG de alta resolución. Todo se dibuja en tu navegador, así que tus diagramas de arquitectura privados nunca salen de tu computadora.
Última actualización:
Los diagramas se dibujan en tu navegador: el código PlantUML se convierte en tu dispositivo y se muestra como SVG, así que no se sube nada. La URL del servidor solo se crea, nunca se abre, para que puedas comprobar un diagrama con el renderizador oficial de PlantUML si lo deseas.
Cómo usar Editor de PlantUML
- Elige una plantilla como Secuencia o Clases, o pega tu código @startuml … @enduml existente.
- Edita el código. La vista previa se actualiza mientras escribes; todo lo que no se puede dibujar se lista bajo el editor con su número de línea.
- Elige un estilo y amplía la vista previa para revisar los detalles.
- Descarga SVG o PNG, o guarda el código fuente con Descargar .puml.
- Reutilízalo en otro sitio: Copiar como Mermaid da un bloque de código que GitHub muestra de forma nativa, y Copiar enlace para compartir guarda el diagrama en una URL.
Guía rápida de sintaxis de PlantUML
Cada diagrama va entre @startuml y @enduml (los mapas mentales usan @startmindmap y los diagramas de Gantt @startgantt). El tipo de diagrama se reconoce por las instrucciones que usas.
| Diagrama | Instrucciones clave |
|---|---|
| Secuencia | actor User, participant "Web app" as App, User -> App : Log in (continua), App --> User : OK (respuesta discontinua), alt / else / end, loop, note right of App : text, activate App |
| Clases | class Order { - id : int + total() : float }, interface, abstract class, enum, A <|-- B herencia, A *-- B composición, A o-- B agregación, A ..> B dependencia, "1" o-- "*" cardinalidad |
| Actividad | start, :Do something;, if (ok?) then (yes) / else (no) / endif, while (more?) / endwhile, repeat / repeat while (again?), fork / fork again / end fork, |Lane|, stop |
| Estados | [*] --> Idle, Idle --> Busy : start, state Busy { … }, state Check <<choice>>, -- entre regiones concurrentes |
| Casos de uso | actor Customer, usecase "Pay" as UC1 or (Pay), rectangle Shop { … }, UC1 ..> UC2 : <<include>> |
| Componentes | [API], component, node, database, cloud, package "Name" { … }, interfaz () "HTTP", A --> B : label |
| ER | entity User { *id : int <<PK>> -- name : text }, User ||--o{ Order : places |
| Mapa mental | * Root, ** Child, *** Grandchild (el número de asteriscos fija el nivel) |
| Gantt | Project starts 2026-03-02, [Design] lasts 5 days, [Build] starts at [Design]'s end, [Launch] happens at [Build]'s end, -- Phase -- |
Referencia de flechas y relaciones
| Código | Dónde | Significado |
|---|---|---|
-> / --> | Secuencia | Mensaje síncrono / mensaje de retorno (discontinuo) |
->> | Secuencia | Mensaje asíncrono (punta de flecha abierta) |
->x | Secuencia | Mensaje perdido (termina en una cruz) |
++ / -- después de un mensaje | Secuencia | Activa el destino / desactiva el emisor |
<|-- / <|.. | Clases | Herencia (extends) / realización (implements) |
*-- / o-- | Clases | Composición (rombo relleno) / agregación (rombo vacío) |
--> / ..> | Clases, componentes | Asociación / dependencia |
||--o{ | ER | Exactamente uno a cero o más (pata de gallo) |
-up->, -left-> | Todos | Indicaciones de disposición; se aceptan y se tratan como una flecha normal |
Consejos
- Usa alias para los nombres largos:
participant "Payment service" as Paymantiene cada línea de mensaje corta y legible. - Guarda los diagramas en Git como archivos
.pumljunto al código que describen; las diferencias de texto muestran exactamente qué cambió. - Divide los diagramas grandes. Un diagrama de secuencia con más de unos ocho participantes o un diagrama de clases con más de quince clases se lee mejor como dos diagramas.
- Escribe
left to right directional principio de los diagramas de casos de uso, componentes, clases y estados para una disposición horizontal.
Preguntas frecuentes
¿Qué es PlantUML?
PlantUML es un lenguaje de código abierto muy usado para describir diagramas UML y de otros tipos como texto plano. Una línea como Alice -> Bob : Hello se convierte en una flecha de diagrama de secuencia. Como los diagramas son texto, se pueden versionar en Git, revisar en pull requests y generar con scripts.
¿Se envía mi diagrama a un servidor?
No. El renderizador oficial de PlantUML es un programa Java al que normalmente se accede a través del servidor plantuml.com, que recibe el texto de tu diagrama. En cambio, este editor convierte el código PlantUML en tu navegador y lo dibuja con el motor de código abierto Mermaid, así que el texto se queda en tu dispositivo. Solo la biblioteca del renderizador se descarga desde un CDN público.
¿Admite todas las funciones de PlantUML?
Cubre la sintaxis que usan la mayoría de los diagramas: secuencia, clases, actividad (sintaxis nueva), estados, casos de uso, componentes y despliegue, entidad-relación, mapa mental, WBS y Gantt. Los estilos con skinparam, los sprites, los archivos !include y algunos elementos poco comunes se omiten, y el editor lista cada línea omitida. La disposición la calcula otro motor, así que el espaciado y el trazado de las flechas pueden diferir de plantuml.com. Para un resultado idéntico al píxel, usa Copiar URL del servidor PlantUML.
¿Qué es la URL del servidor PlantUML?
PlantUML puede codificar un diagrama en una URL: el texto se comprime con deflate y se escribe en un alfabeto base64 apto para URL, por ejemplo https://www.plantuml.com/plantuml/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000. El editor crea esa URL localmente y solo la copia. Si la abres, el texto del diagrama se envía a plantuml.com para dibujarlo.
¿Por qué una línea aparece como no entendida?
El convertidor admite las instrucciones habituales de PlantUML. Una palabra clave mal escrita, un @enduml que falta en medio del texto o una función que no se puede dibujar aquí (como los estilos skinparam o la antigua sintaxis de actividad (*)) se listan bajo el editor con su número de línea, y ese número se resalta en el margen. El resto del diagrama se sigue dibujando.
SVG o PNG: ¿cuál debo descargar?
SVG es una imagen vectorial que se mantiene nítida con cualquier zoom y se puede editar en Inkscape, Figma o draw.io; es ideal para documentación y wikis. PNG funciona en todas partes, incluidas presentaciones, chats y gestores de incidencias; elige 2× o más para que el texto se vea nítido en pantallas de alta resolución.
¿Puedo convertir PlantUML a Mermaid?
Sí. Pulsa Copiar como Mermaid para obtener el código Mermaid equivalente en un bloque Markdown. GitHub, GitLab, Notion, Obsidian y muchas wikis muestran los bloques de código Mermaid de forma nativa, así que es una forma práctica de llevar diagramas a un README.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.