![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnnWMgrIKl3KwzFA190H93_PmQ2CodxAxZVa2GmOJvL1qF0EEUrDJ1tZkbLku647Pg3ouSjegl8YaRm6s3PXwWmGFoYLLIZnFh4nkbPKqE-2gKzPe5ufA8ihqBGuaOvAB7c6hKlBq8HE/s400/diagramas+en+Diagramly.png)
Elementos de un diagrama de flujo
Ovalo: inicio o fin
Rectángulo: actividad
Rombo: decisión
Línea: conector
Ovalo: inicio o fin
Rectángulo: actividad
Rombo: decisión
Línea: conector
Sabiendo esto realiza los siguientes pasos:
1. Abre tu navegador e ingresa la dirección: www.draw.io, si utilizas Chrome inmediatamente se traducirá la página, da clic en “mostrar original” para que cuando ingreses tus datos no se desaparezcan.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvk-r1x0UtmED_znu8_wNaMZQATfWq5DdBg7u9MT4UViNHFJWo985WR596hOLcQndfxOdGfsSU66HdMWrm9ynptULWanUkezjA-u2O9j80pEOW7mZKSaJooP5-AAo8hzRQeT9NKey6CY/s570/1-crear-diagrama-diagramly.png )
2. En la parte izquierda pulsa en diagramas de flujo
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDu28keMdTm3eEsp4Yb9yLfXbbKAX-ewmUgUVOgi65vi9KlOvEfLYiIZTZV5VI0XS05VUrqtxCoAMNQD0G-WeMABbtoWZ4d1NUNP_B0JJ8VCrQ1_dMx2EWNkerIOghrLxmA3BnRXXHHBk/s570/2-crear-diagrama-diagramly.png)
3. Haz clic en el ovalo start. Al hacer esto aparecerá en la esquina superior izquierda de la hoja, arrástralo hasta donde desees y con doble clic ingresa el texto. Se puede cambiar el tamaño, el
tipo y darle estilo en la barra de herramientas
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAG545gWxji00dRu0m5DTQ04D1OrpAnXrZkEILYtP0pvqboodzJ4UefMHMugXvC9SltdFkDBuqQFKw3_mn0YOu8GLHJJNJuX0JKa6AgT5n9_PaTueaDV6-7OSMqbr8uud9Vmn4posa4U/s570/3-crear-diagrama-diagramly.png )
4. Haz Clic en process, seguidamente arrastra el objeto hasta donde desees y con doble clic ingresa el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepsouG-VGbJ4rsIp8KWX43aImCQvpRFpneWywd_z4_4uotKJ22vIW0WJNqpr5GGABEptHhRmeH7kkgpQatJe1o0J8Cp-ed3MsgknYtytX6XSnbPfzGOu0anx85QzyY4Co-bILejT1h6E/s570/4-crear-diagrama-diagramly.png )
5. clic en decisión - arrástralo hasta donde desees- doble clic para ingresar el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRjyB6ei_VQvf5t-R0XfwBakM8fHnNBxNT0Myw-XbJN2vp5p9o1lPZ3G7trHr9ZnVyFDDKttAbCfAEPOehB5EyY-KCTiaCgTaL7PODs1vPcl0MDHXXLXKox8rMtWgOx6_P8NV-u5Xfp0/s570/5-crear-diagrama-diagramly.png )
6. clic en terminator- arrástralo hasta donde desees- doble clic para ingresar el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DZ2QHleloJ5irlJTEmWWkYXrXP7d57mDjWUbcWlVXF__v6N3G12lXvGbMB1EfGBNbLHRfkBigV6T9psd48NRi2sAMO_gAh9cSG8_JwLJgR69EW9BeEiXsYWnmGKbOzgNIKsjGfEXhTg/s570/6-crear-diagrama-diagramly.png )
7. Puedes tener una vista general de tu diagrama alejando la hoja- clic en annotation para unir el elemento decisión con el de proceso
![]( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwHS4RhIgMLI8m7khy-mrBexU-v_C-q9VZgFPTLMkY3Rn2s9QbUwzlLfSj8IhJIRLqXWaKPiy9oMRhhz9bE8V_P9NhSspriUN0ydnRi6R_G94A5YtD7_x2wuqGLW-U6nBNUT5z4MFmF0/s570/7-crear-diagrama-diagramly.png)
8. Para unir los demás elementos ubica el cursor de tal manera que aparezca un pequeño cuadro verde y arrástralo hasta el siguiente haciendo que parezca el mismo cuadro, si no coinciden se duplica
el elemento.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1oY3OnhviWvhIR_29gXz-RumbBOi9eimL0f1AxmZSYawoB0gdXmybT3cH0NUoYdmqumv9wO60QPY3GxLdXrXvAx6DwgBQJUpVDMjkyPtVKNjVfTgwGGIze02hd4q7n2iyBmh1JGLfLI/s570/8-crear-diagrama-digramly.png )
9. Escribe los textos correspondientes a las ramas de la decisión. Clic en general - Text
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRyrJxwaAfMRk-GWvi4HEKCh2w5ePN1CE2bY7cqODzu1AN3C5OlrJrSZdrLJmvD_TOpg37tYB1Dq4KZAgl9BqlxGc_l-AHarCn6q8hZLm5X9QVGTJQVV6I1VZTrdbDOIO7Dio-cZPuoNo/s570/9-crear-diagrama-diagramly.png )
Eso es todo, ahora solo resta exportar tu diagrama en formato NG/GIF/JPG/XML/SVG/PDF, presionando “Ctrl + E” y listo.
1. Abre tu navegador e ingresa la dirección: www.draw.io, si utilizas Chrome inmediatamente se traducirá la página, da clic en “mostrar original” para que cuando ingreses tus datos no se desaparezcan.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvk-r1x0UtmED_znu8_wNaMZQATfWq5DdBg7u9MT4UViNHFJWo985WR596hOLcQndfxOdGfsSU66HdMWrm9ynptULWanUkezjA-u2O9j80pEOW7mZKSaJooP5-AAo8hzRQeT9NKey6CY/s570/1-crear-diagrama-diagramly.png )
2. En la parte izquierda pulsa en diagramas de flujo
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDu28keMdTm3eEsp4Yb9yLfXbbKAX-ewmUgUVOgi65vi9KlOvEfLYiIZTZV5VI0XS05VUrqtxCoAMNQD0G-WeMABbtoWZ4d1NUNP_B0JJ8VCrQ1_dMx2EWNkerIOghrLxmA3BnRXXHHBk/s570/2-crear-diagrama-diagramly.png)
3. Haz clic en el ovalo start. Al hacer esto aparecerá en la esquina superior izquierda de la hoja, arrástralo hasta donde desees y con doble clic ingresa el texto. Se puede cambiar el tamaño, el
tipo y darle estilo en la barra de herramientas
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAG545gWxji00dRu0m5DTQ04D1OrpAnXrZkEILYtP0pvqboodzJ4UefMHMugXvC9SltdFkDBuqQFKw3_mn0YOu8GLHJJNJuX0JKa6AgT5n9_PaTueaDV6-7OSMqbr8uud9Vmn4posa4U/s570/3-crear-diagrama-diagramly.png )
4. Haz Clic en process, seguidamente arrastra el objeto hasta donde desees y con doble clic ingresa el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepsouG-VGbJ4rsIp8KWX43aImCQvpRFpneWywd_z4_4uotKJ22vIW0WJNqpr5GGABEptHhRmeH7kkgpQatJe1o0J8Cp-ed3MsgknYtytX6XSnbPfzGOu0anx85QzyY4Co-bILejT1h6E/s570/4-crear-diagrama-diagramly.png )
5. clic en decisión - arrástralo hasta donde desees- doble clic para ingresar el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRjyB6ei_VQvf5t-R0XfwBakM8fHnNBxNT0Myw-XbJN2vp5p9o1lPZ3G7trHr9ZnVyFDDKttAbCfAEPOehB5EyY-KCTiaCgTaL7PODs1vPcl0MDHXXLXKox8rMtWgOx6_P8NV-u5Xfp0/s570/5-crear-diagrama-diagramly.png )
6. clic en terminator- arrástralo hasta donde desees- doble clic para ingresar el texto
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DZ2QHleloJ5irlJTEmWWkYXrXP7d57mDjWUbcWlVXF__v6N3G12lXvGbMB1EfGBNbLHRfkBigV6T9psd48NRi2sAMO_gAh9cSG8_JwLJgR69EW9BeEiXsYWnmGKbOzgNIKsjGfEXhTg/s570/6-crear-diagrama-diagramly.png )
7. Puedes tener una vista general de tu diagrama alejando la hoja- clic en annotation para unir el elemento decisión con el de proceso
![]( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwHS4RhIgMLI8m7khy-mrBexU-v_C-q9VZgFPTLMkY3Rn2s9QbUwzlLfSj8IhJIRLqXWaKPiy9oMRhhz9bE8V_P9NhSspriUN0ydnRi6R_G94A5YtD7_x2wuqGLW-U6nBNUT5z4MFmF0/s570/7-crear-diagrama-diagramly.png)
8. Para unir los demás elementos ubica el cursor de tal manera que aparezca un pequeño cuadro verde y arrástralo hasta el siguiente haciendo que parezca el mismo cuadro, si no coinciden se duplica
el elemento.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1oY3OnhviWvhIR_29gXz-RumbBOi9eimL0f1AxmZSYawoB0gdXmybT3cH0NUoYdmqumv9wO60QPY3GxLdXrXvAx6DwgBQJUpVDMjkyPtVKNjVfTgwGGIze02hd4q7n2iyBmh1JGLfLI/s570/8-crear-diagrama-digramly.png )
9. Escribe los textos correspondientes a las ramas de la decisión. Clic en general - Text
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRyrJxwaAfMRk-GWvi4HEKCh2w5ePN1CE2bY7cqODzu1AN3C5OlrJrSZdrLJmvD_TOpg37tYB1Dq4KZAgl9BqlxGc_l-AHarCn6q8hZLm5X9QVGTJQVV6I1VZTrdbDOIO7Dio-cZPuoNo/s570/9-crear-diagrama-diagramly.png )
Eso es todo, ahora solo resta exportar tu diagrama en formato NG/GIF/JPG/XML/SVG/PDF, presionando “Ctrl + E” y listo.
Publicar un comentario
¿Tienes algo que Decir?
¡Pues es tu Oportunidad para Opinar!