![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga88jbSqBAjS7_6QF5B7Zb3_HBMHyY-xP-wspl4X1w_-KLjrr38YZY2Dnviz2MYPI5D_2R-DUGx8d-REgus4j99qZPTa0eAQiK6WorkyxZurtFie8tASHnJfySLId51Ebyi0DYJWhqrW4/s1600/hacer-diagramas-online.jpg)
Tutorial: Hacer Diagramas online Gratis con Drawio:
- Integración y alta cantidad de categorías de elementos
- Guardado automático de los cambios.
- Capacidad para crear versiones del documento.
- Generación de codigo para integrar el diagrama como iframe o html, en una página web.
- Almacenamiento de los diagramas en formato xml tanto en drive como en el equipo según se elija, pero desde su interfaz se puede exportar en formatos como: png, pdf, jpg, svg, html.
- Trabajo colaborativo en tiempo real al permitir compartir el documento, además ofrece un chat para comunicarse con las personas que están colaborando.
- Para aprovechar estas características selecciona la pestaña archivo y escoge la que desees utilizar
![](https://lh5.googleusercontent.com/-QFY7qAbQb5I/VSyQZvjtceI/AAAAAAAACEo/_ZNoPDwvZeg/w631-h577-no/3.png)
Drawio en su cuadro de trabajo inicial tiene 4 partes:
- 1) Panel de herramientas y configuración de Drawio
- 2) Panel de atajos para dar formato a los elementos del lienzo
- 3) Panel de formas
- 4) Lienzo
![](https://lh5.googleusercontent.com/-poUSX9UgZYc/VSyQU5vDCCI/AAAAAAAACDg/jBxEZasFOfQ/w1012-h577-no/0.png)
A la anterior interfaz también se le pueden agregar 3 elementos más:
- 5) Panel para agregar o quitar herramientas al lienzo
- 6) Atajo para crear capas
- 7) Vista en miniatura del lienzo
![](https://lh5.googleusercontent.com/-XyHIdDjMp6I/VSyQWLaCfAI/AAAAAAAACDw/HjbCD-G0t_s/w842-h577-no/1.png)
Para agregar los elementos anteriores se deber ir a Vistas y escoger las interfaces que desees
![](https://lh4.googleusercontent.com/-xC30wiZNNpQ/VSyQYns-h1I/AAAAAAAACEY/k1-O83M29xk/w483-h274-no/2.png)
Cuando se esté trabajando en el lienzo se pueden seguir varios tips para sacarle el mejor provecho a drawio, como por ejemplo para:
DUPLICAR ELEMENTOS del Diagrama
Primer opción=Pasa el cursor por encima del elemento que desees duplicar , haz click sostenido sobre un cuadro verde y arrastra el mouseSegunda opcion= seleccionar el elemento y presionar ctrl + enter
![](https://lh5.googleusercontent.com/-Pl8j2zsVRvI/VSyQZtcQE0I/AAAAAAAACEs/SSBF3Qc_-JU/w662-h126-no/4.png)
CONECTAR PUNTOS en el Diagrama
Pasa el cursor por encima del elemento que desees conectar haz click sostenido sobre un cuadro verde y desplaza el cursos hacia un punto verde de otro elemento![](https://lh6.googleusercontent.com/-5LlNCFStqn8/VSyQaL7G_sI/AAAAAAAACEw/kuGNpJQi9Ts/w443-h115-no/5.png)
REEMPLAZAR FORMA de los Diagramas
De clic sostenido sobre la forma que desee utilizar y póngala encima del elemento que desee reemplazar
![](https://lh6.googleusercontent.com/-IqKqryHKVJQ/VSyQanNaK5I/AAAAAAAACFA/hCkrAwqnHMQ/w671-h145-no/6.png)
AGREGAR UN ELEMENTO PARA QUEDE CONECTADO CON OTRO
De clic sostenido sobre la elemento que desee utilizar y póngalo encima del elemento con el que desea conectarlo, a continuación ubique el elemento en una de las flechas de tal forma que esta cambie a color azul oscuro.
![](https://lh4.googleusercontent.com/-enNK8loPqO4/VSyQavQy7vI/AAAAAAAACFE/xNJvO1IdLzk/w738-h121-no/7.png)
Activar mas Formas
Dirígete a la parte inferior izquierda y presiona en más formas para seleccionar las que quieras agregar al panel y a continuación selecciona recordar esta configuración.
![](https://lh5.googleusercontent.com/-Dh8vp5HuX-c/VSyQbKG4ZpI/AAAAAAAACFM/_znA_zS1nn8/w757-h428-no/8.png)
Ejemplo de Diagrama de Clases
Se diagramara las relaciones entre las clases partido, arbitro central y arbitro lateral1) Ubicar la categoría UML y seleccionar la forma que representa una clase
![](https://lh3.googleusercontent.com/-KY1dzvyr7TY/VSyQbYz3uYI/AAAAAAAACFQ/2-VAt1OmnrI/w494-h310-no/9.png)
2) Hacer tres copias de la forma, con el segundo método del primer tip
![](https://lh3.googleusercontent.com/-OtRdufVGN2U/VSyQVSlNe8I/AAAAAAAACDo/7hn5GZlnX_M/w442-h234-no/10.png)
3) Ubicar, darle nombre a las clases y escribir sus atributos
![](https://lh5.googleusercontent.com/--FRWVsiYr3g/VSyQWj0aGoI/AAAAAAAACD8/v7S_7Bzb3KE/w781-h377-no/11.png)
4) Ubicar la relación de asociación y unir las clases partido y arbitro
![](https://lh6.googleusercontent.com/-Xx4eREN8ULI/VSyQXJDFH4I/AAAAAAAACEA/HGT4WGSvzh0/w552-h237-no/12.png)
5) Ubicar la relación tipo de y unir las clases arbitro con arbitro central y arbitro lateral
![](https://lh4.googleusercontent.com/-PyMzd5sJwv8/VSyTWMb_oOI/AAAAAAAACFw/P1ygHu-Jhec/w487-h210-no/13.png)
![](https://lh6.googleusercontent.com/-9_UH-49WZN8/VSyQYKhc2wI/AAAAAAAACEQ/nyzTsnFmetY/w779-h397-no/14.png)
Enlace Web: Drawio
Publicar un comentario
¿Tienes algo que Decir?
¡Pues es tu Oportunidad para Opinar!