Señor Herramientas

Cómo usar

Cómo usar PlantUML Preview

Una herramienta para redactar sintaxis PlantUML y comprobar la vista previa en el mismo espacio de trabajo. Resulta útil para revisar la estructura de diagramas de secuencia o de clases. El cambio de tema y la gestión de múltiples páginas también están disponibles para comparar variantes de diagramas.

Usar Vista previa de PlantUML
Miniatura de Vista previa de PlantUMLMiniatura de Vista previa de PlantUML

Casos de uso

Cuándo usarla

  • Redactar diagramas UML en forma de sintaxis
  • Revisar la estructura antes de añadir diagramas a la documentación
  • Comparar varias variantes del diagrama usando pestañas
  • Revisar rápidamente un diagrama de clases o de estados en formato de sintaxis
  • Depurar la estructura de un diagrama UML antes de compartirlo con el equipo
  • Comprobar el aspecto de un diagrama antes de añadirlo a una especificación

Capacidades

Qué puede hacer esta herramienta

  • Revisar sintaxis PlantUML y vista previa lado a lado
  • Cambiar de tema
  • Gestionar varias páginas de código
  • Guardar o copiar el diagrama como SVG o PNG
  • Gestionar diagramas separados en varias páginas
  • Admitir tipos UML principales como secuencia, clase y estado

Guía

Cómo usar cada zona de la pantalla

Aprenda a usar cada zona de la pantalla, incluidos ajustes, entrada, vistas previas, resultados y guardado.

01 HOWTO

Área de entrada de sintaxis

Escribe sintaxis PlantUML en el editor izquierdo. Puedes empezar con una plantilla, añadir sugerencias según el tipo de diagrama y comprobar la estructura en la vista previa.

Pantalla que muestra Área de entrada de sintaxis en Vista previa de PlantUMLPantalla que muestra Área de entrada de sintaxis en Vista previa de PlantUML

Qué puede hacer esta zona

  • Puedes escribir sintaxis PlantUML directamente
  • Puedes insertar una plantilla inicial del tipo de diagrama
  • Puedes añadir sugerencias acordes al diagrama actual
  • Puedes corregir la entrada mirando los errores de la vista previa

Dónde usarla

01
Entrada de sintaxis

Puedes introducir sintaxis PlantUML para diagramas de secuencia, clases, estados y otros tipos.

Pantalla que muestra dónde usar Entrada de sintaxis en Vista previa de PlantUMLPantalla que muestra dónde usar Entrada de sintaxis en Vista previa de PlantUML
02
Selección de plantilla

Cuando el editor está vacío, puedes elegir un tipo de diagrama e insertar la estructura básica de @startuml a @enduml.

Pantalla que muestra dónde usar Selección de plantilla en Vista previa de PlantUMLPantalla que muestra dónde usar Selección de plantilla en Vista previa de PlantUML
03
Sugerencias de entrada

Puedes añadir participantes, mensajes, clases o relaciones adecuados en la posición del cursor.

Pantalla que muestra dónde usar Sugerencias de entrada en Vista previa de PlantUMLPantalla que muestra dónde usar Sugerencias de entrada en Vista previa de PlantUML
04
Revisión de errores

Si hay un problema de sintaxis, puedes corregirlo usando el mensaje de la vista previa.

Pantalla que muestra dónde usar Revisión de errores en Vista previa de PlantUMLPantalla que muestra dónde usar Revisión de errores en Vista previa de PlantUML

02 HOWTO

Sugerencias de entrada y ayudas de edición

Usa las plantillas y sugerencias sobre el editor, el historial de la barra superior y las acciones de limpiar o copiar del encabezado. Esta área sirve para crear la base del diagrama, añadir piezas y reutilizar un borrador.

Pantalla que muestra Sugerencias de entrada y ayudas de edición en Vista previa de PlantUMLPantalla que muestra Sugerencias de entrada y ayudas de edición en Vista previa de PlantUML

Qué puede hacer esta zona

  • Puedes insertar una plantilla según el tipo de diagrama
  • Puedes añadir piezas acordes al diagrama actual
  • Puedes volver a un estado reciente desde el historial
  • Puedes limpiar o copiar la sintaxis actual

Dónde usarla

01
Plantillas

Puedes elegir una base para un diagrama de secuencia, clases, estados u otro tipo.

Pantalla que muestra dónde usar Plantillas en Vista previa de PlantUMLPantalla que muestra dónde usar Plantillas en Vista previa de PlantUML
02
Sugerencias

Puedes añadir participantes, mensajes, clases o relaciones acordes a la sintaxis actual.

Pantalla que muestra dónde usar Sugerencias en Vista previa de PlantUMLPantalla que muestra dónde usar Sugerencias en Vista previa de PlantUML
03
Historial y borrador

El navegador conserva el borrador actual y el historial permite volver a un estado reciente de edición.

Pantalla que muestra dónde usar Historial y borrador en Vista previa de PlantUMLPantalla que muestra dónde usar Historial y borrador en Vista previa de PlantUML
04
Limpiar entrada

Puedes borrar la sintaxis actual y crear un nuevo diagrama.

Pantalla que muestra dónde usar Limpiar entrada en Vista previa de PlantUMLPantalla que muestra dónde usar Limpiar entrada en Vista previa de PlantUML
05
Copiar sintaxis

Puedes copiar el borrador a un README, una especificación o una nota externa.

Pantalla que muestra dónde usar Copiar sintaxis en Vista previa de PlantUMLPantalla que muestra dónde usar Copiar sintaxis en Vista previa de PlantUML

03 HOWTO

Zona de vista previa y tema

Use el panel de vista previa para confirmar el diagrama PlantUML renderizado y cambiar el tema antes de compartirlo. Si falla el renderizado, el error aparece en esta misma zona.

Pantalla que muestra Zona de vista previa y tema en Vista previa PlantUMLPantalla que muestra Zona de vista previa y tema en Vista previa PlantUML

Qué puede hacer esta zona

  • Puede cambiar el tema de vista previa
  • Puede confirmar el diagrama renderizado
  • Puede revisar errores de renderizado
  • Puede volver a la entrada y corregir la sintaxis

Dónde usarla

01
Cambiar tema

Cambie el fondo y los colores de línea para ajustarlos al lugar donde compartirá el diagrama.

Pantalla que muestra dónde usar Cambiar tema en Vista previa PlantUMLPantalla que muestra dónde usar Cambiar tema en Vista previa PlantUML
02
Revisar diagrama

Compruebe si la sintaxis PlantUML se renderiza como el diagrama esperado.

Pantalla que muestra dónde usar Revisar diagrama en Vista previa PlantUMLPantalla que muestra dónde usar Revisar diagrama en Vista previa PlantUML
03
Revisar errores

Cuando el diagrama no se renderiza, lea el error antes de editar la sintaxis.

Pantalla que muestra dónde usar Revisar errores en Vista previa PlantUMLPantalla que muestra dónde usar Revisar errores en Vista previa PlantUML
04
Editar entrada

Use el resultado de la vista previa como referencia mientras corrige la sintaxis.

Pantalla que muestra dónde usar Editar entrada en Vista previa PlantUMLPantalla que muestra dónde usar Editar entrada en Vista previa PlantUML

04 HOWTO

Zona de formato, copia y descarga

Use los controles sobre la vista previa para elegir SVG o PNG, y luego copie o descargue el diagrama renderizado. Si no se puede exportar, revise el error y vuelva a la entrada.

Pantalla que muestra Zona de formato, copia y descarga en Vista previa PlantUMLPantalla que muestra Zona de formato, copia y descarga en Vista previa PlantUML

Qué puede hacer esta zona

  • Puede elegir SVG o PNG como formato de salida
  • Puede copiar el diagrama renderizado como imagen
  • Puede descargar el diagrama renderizado como archivo
  • Puede copiar la sintaxis PlantUML original
  • Puede revisar errores cuando no se puede exportar

Dónde usarla

01
Formato de salida

Cambie entre SVG y PNG según dónde vaya a compartir o pegar el diagrama.

Pantalla que muestra dónde usar Formato de salida en Vista previa PlantUMLPantalla que muestra dónde usar Formato de salida en Vista previa PlantUML
02
Copiar imagen

Copie el diagrama renderizado en el formato seleccionado y péguelo en un documento o chat.

Pantalla que muestra dónde usar Copiar imagen en Vista previa PlantUMLPantalla que muestra dónde usar Copiar imagen en Vista previa PlantUML
03
Descargar imagen

Guarde el diagrama renderizado como archivo SVG o PNG.

Pantalla que muestra dónde usar Descargar imagen en Vista previa PlantUMLPantalla que muestra dónde usar Descargar imagen en Vista previa PlantUML
04
Copiar sintaxis

Copie la sintaxis PlantUML que genera el diagrama y compártala junto con la imagen.

Pantalla que muestra dónde usar Copiar sintaxis en Vista previa PlantUMLPantalla que muestra dónde usar Copiar sintaxis en Vista previa PlantUML
05
Revisar errores

Si el diagrama no se puede exportar, revise el error y vuelva a la entrada.

Pantalla que muestra dónde usar Revisar errores en Vista previa PlantUMLPantalla que muestra dónde usar Revisar errores en Vista previa PlantUML

Notas

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Puntos a comprobar

Empiece por la sintaxis mínima que se pueda renderizar

Si añade demasiados elementos al mismo tiempo, cuesta más separar los problemas de sintaxis de los problemas de relación. Empiece poco a poco.

Puntos a comprobar

Elija SVG o PNG según dónde vaya a compartirlo

Use SVG cuando quiera conservar calidad para seguir editando y PNG cuando quiera pegarlo rápido en chat o diapositivas.

Nota

La vista previa requiere conexión a un servidor externo

La vista previa de PlantUML necesita acceso a la red para renderizar diagramas. Sin conexión a internet, la vista previa no aparecerá.

FAQ

Preguntas sobre Vista previa de PlantUML

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿En qué se diferencia de Mermaid?

Está orientado a sintaxis PlantUML y a la creación de diagramas UML. Puede alternar entre distintas herramientas de notación según el documento.

¿Puedo guardarlo enseguida como imagen?

Las acciones SVG y PNG dependen de la conexión del preview engine. Si todavía no está conectado, el panel de vista previa mostrará un error.

¿Qué tipos de diagrama puedo dibujar?

Se admiten diagramas de secuencia, clase, estado, casos de uso, Gantt y otros tipos principales de PlantUML.

¿Dónde puedo consultar la sintaxis?

La documentación oficial de PlantUML incluye la sintaxis de cada tipo de diagrama. Puede escribir la sintaxis y ver el resultado en esta misma página.

¿Cómo comparto un diagrama como imagen?

Descárguelo como SVG o PNG, o cópielo al portapapeles y comparta desde allí.

¿Funciona sin conexión?

La vista previa de PlantUML requiere conexión a un servidor externo. Sin acceso a la red, la vista previa no aparecerá.

Siguientes guías

Guías relacionadas

Las guías relacionadas se muestran a continuación para que pueda continuar sin perderse.

Cómo usar Formateador JSON

Referencia detallada por zonas para entrada JSON, formato, compresión, validación, revisión de resultado y copia.

Ver guía
Cómo usar Formateador JSON

Cómo usar Vista previa de Mermaid

Referencia detallada por zonas para entrada Mermaid, acciones de edición, vista previa, temas, salida y errores.

Ver guía
Cómo usar Vista previa de Mermaid

Cómo usar Comprobador de IP e información de red

Guía por zonas de la pantalla para IP, conexión, datos observados por el servidor, navegador, dispositivo, permisos y JSON compartible.

Ver guía
Cómo usar Comprobador de IP e información de red
Herramientas de imagenHerramientas de videoHerramientas de textoHerramientas de desarrolloHerramientas de diseñoHerramientas de generación