PlantUML Web Server - HGM-submissions/gestion-de-personal-docs GitHub Wiki

Integración de Diagramas UML en Markdown con PlantUML Web Server

Introducción

Este documento proporciona una guía sobre cómo integrar diagramas UML en documentos Markdown usando el PlantUML Web Server. PlantUML es una herramienta que permite crear diagramas UML de manera rápida y sencilla, y su servidor web facilita integrar estos diagramas en documentos de Markdown.

Creación de Diagramas UML

Para crear un diagrama UML:

  1. Visita PlantUML Web Server.
  2. Escribe o pega el código PlantUML para tu diagrama.
  3. El servidor web generará una URL que contiene tanto el diagrama como el código fuente.

Integración en Markdown

Una vez que tienes tu diagrama UML, puedes integrarlo fácilmente en un documento Markdown de la siguiente manera:

Incluir Imagen del Diagrama

  • URL de la Imagen: Después de estilizar el diagrama, utiliza la URL del diagrama generado para insertarlo como una imagen en tu Markdown, solo agrega https: al principio de la URL.

image

Ejemplo:
![Diagrama UML](https://www.plantuml.com/plantuml/png/...codigo_del_diagrama...)

Vincular al Código Fuente del Diagrama

  • URL del PlantUML Web Server con Código: Proporciona un enlace directo al PlantUML Web Server, donde otros pueden ver tanto el diagrama como el código fuente. Una vez generado el código de la URL para la imagen, sólo resta cambiar /png/ por /umla/ en la URL.

image image

Ejemplo:
[Ver Diagrama y Código](https://www.plantuml.com/plantuml/umla/...codigo_del_diagrama...)

Ejemplo

![Diagrama UML](https://www.plantuml.com/plantuml/png/LL9DRzOm3BxxLvYSG1e2hXDCuuI444XmH6ZocxfTjYGkZilsWlZlj4sR5KjzFXuhJgFakXYfJId2Cxlbn4WFvQKevO61OfI751v37W3AVSWZAINCqd7X4T-y1ZeLK_A6M-t-gU4ZbOBe_WySKCvYP47ojh9vy45zP6nLFJn_qP93V5DkHUsc5qsmxTLgzT05IfAxbcuUtbwrw9WV1tAsO6TiLVqSJmaFjNZWHy_ZqtcmUGZPM7lo-v6QXyH6nvzk7aOL4oyHjzez56DbiVEuJNloSqidRzYgUf3J7H_ZwY7HYClt1_2Up_Zk2dzHd1Z-mbsHZ1-_VVcyz11ThrCmT-dUZsDaTx5c9VpcEVf4EkoHboZgBl6x-ygTkq3tGPcp-p5F96-Yk6BLhz1LTa03PyCLWTH2FpTm5t2IANUaPzm5UD8E5zZVIINmKQOELmGlCRAt8BdWGSzv6YKl-pKrPzbK8cuC7HcTg33kOdy5bQ0FaN41w2Lsh5W9UgN4k2BSyYCDah7oyGKq1P5E7755oD8nBW0Z-NiQ62lFddMvZKhmS-A9SKLGzaPvY8nDGR5v6QuuQz5bqiOm5VRBiIetFz_4hjootXXNX6lEtPJYFm00)

[Ver Diagrama y Código](https://www.plantuml.com/plantuml/umla/LL9DRzOm3BxxLvYSG1e2hXDCuuI444XmH6ZocxfTjYGkZilsWlZlj4sR5KjzFXuhJgFakXYfJId2Cxlbn4WFvQKevO61OfI751v37W3AVSWZAINCqd7X4T-y1ZeLK_A6M-t-gU4ZbOBe_WySKCvYP47ojh9vy45zP6nLFJn_qP93V5DkHUsc5qsmxTLgzT05IfAxbcuUtbwrw9WV1tAsO6TiLVqSJmaFjNZWHy_ZqtcmUGZPM7lo-v6QXyH6nvzk7aOL4oyHjzez56DbiVEuJNloSqidRzYgUf3J7H_ZwY7HYClt1_2Up_Zk2dzHd1Z-mbsHZ1-_VVcyz11ThrCmT-dUZsDaTx5c9VpcEVf4EkoHboZgBl6x-ygTkq3tGPcp-p5F96-Yk6BLhz1LTa03PyCLWTH2FpTm5t2IANUaPzm5UD8E5zZVIINmKQOELmGlCRAt8BdWGSzv6YKl-pKrPzbK8cuC7HcTg33kOdy5bQ0FaN41w2Lsh5W9UgN4k2BSyYCDah7oyGKq1P5E7755oD8nBW0Z-NiQ62lFddMvZKhmS-A9SKLGzaPvY8nDGR5v6QuuQz5bqiOm5VRBiIetFz_4hjootXXNX6lEtPJYFm00)

En el markdown:

Diagrama UML

Ver Diagrama y Código