Creación de Diagramas de Procesos con draw.io

Clase 14 de 27 • Curso de Business Analyst para RPA

Clase anteriorSiguiente clase

¿Qué es draw.io?

draw.io es una aplicación para generar diagramas de flujo, gráficos y esquemas sin tener necesidad de instalar ningún software. Es una herramienta gratuita que te permite hacer diagramas, exportarlos, guardarlos para editarlos en el futuro, imprimirlos o enviarlos por email fácilmente a colaboradores o clientes.

Los diagramas que puedes realizar son:

  • Diagramas de flujo.

  • LUM (Lenguaje Unificado de Modelado).

  • MER (Modelo Entidad-Relación).

  • Diagramas de Red.

  • Modelos de Procesos de Negocios.

  • Organigramas.

  • Circuitos electrónicos y más.

  • Wireframing y maquetas.

Sus características son:

  • Cliente nativo HTML 5 con completo soporte para IE 6-8.

  • Enorme biblioteca de plantillas incorporadas.

  • Interfaz intuitiva de arrastrar-y-soltar.

  • Búsqueda de imágenes y función de añadir.

  • Exportación a PNG/GIF/JPG/XML/SVG/PDF.

  • Soporte de dispositivos táctiles.

  • Colaboración en tiempo real.

  • Incorpora diagramas en blogs o wikis.

Primeros pasos

Para poder acceder a la plataforma tenemos que ingresar mediante la siguiente liga: www.draw.io. Al ingresar te va a salir la siguiente ventana:

Crear nuevo diagrama

Al escoger esta opción tu podrás escoger una plantilla dentro de una gama de plantillas disponibles. Al seleccionar la opción deseada, da clic en el botón “Create”.

NOTA: Si tú no deseas utilizar una plantilla, tienes la opción de escoger “Blank Diagram” que te dejará tu espacio de trabajo vacío.

Abrir diagrama existente

Al escoger esta opción se abrirá el explorar de archivos en el cual podras buscar y escoger un diagrama ya creado anteriormente en la aplicación draw.io (file.drawio).

Espacio de trabajo

En el espacio de trabajo tú podrás construir el diagrama deseado con el uso de las opciones de formas disponibles. Tienes a tu disposición un conjunto de objetos que tú podrás utilizar mediante “Drag and Drop” o dando clic sobre él.

Formas a utilizar en el curso

En las siguientes clases vamos hacer uso de esta herramienta para la construcción de mapas de procesos, para ello vas a aprender las formas que vamos a utilizar y su uso:

Horizontal Pool 1

Lo encuentras dentro del grupo “Advanced” de la barra de herramientas. Conocidos como mapas multifuncionales, te permiten detallar las responsabilidades del subproceso en un proceso.

Rounded Rectangle

Lo encuentras dentro del grupo “General” de la barra de herramientas. Se utiliza para representar actividades, las acciones realizadas en el proceso.

Eclipse

Lo encuentras dentro del grupo “General” de la barra de herramientas. Se utiliza para representar dos eventos principales: Inicio y Fin, que te permiten indicar el principio y fin del flujo de un proceso.

Conector Direccional

Lo encuentras dentro del grupo “General” de la barra de herramientas. Se utiliza para indicar el flujo mediante la conexión de objetos.

Caso de ejemplo

Vamos a construir un caso de ejemplo con los objetos antes mencionados, para representar al siguiente proceso:

Envió de archivo de texto con lista de artículos por correo

Pasos del proceso:

  1. Abrir bloc de notas

  2. Ingresar lista de artículos

  3. Guardar archivo

  4. Cerrar archivo

  5. Abrir Outlook

  6. Seleccionar la opción de “Escribir nuevo correo”

  7. Ingresar datos de correo (To, CC, mensaje, etc.)

  8. Adjuntar archivo de texto al correo

  9. Enviar correo

Pasos para la construcción del mapa del proceso:

  1. El primer paso es utilizar el “Horizontal Pool 1” y definir las herramientas participantes del proceso. Quedando de la siguiente manera:

Tips:

Si tienes problema para agregar/quitar subprocesos, da clic en el nombre de una de las cajitas y escoge la opción “Duplicate” o “Delete” para eliminar o agregar subprocesos.

  1. Agrega el objeto “Eclipse” para definir el Inicio y Fin de la tarea y determina el espacio necesario para la adición de las actividades.

  1. Agrega cada una de las actividades en el subproceso correspondiente con la forma “Rounded Rectangle” y conecta cada una de las actividades.

Consideraciones finales

Tú tienes la opción de ponerle estilo a tu diagrama, modificar el color, la línea de los objetos, incluso la fuente y el tamaño del texto. Al escoger un objeto se despliega la barra de modificación del objeto seleccionado.

Mapa del caso ejemplo

Al final podrás exportar tu resultado en una extensión de tu preferencia:

CasoEjemplo

Tarea

Como ejercicio de esta clase, haz el mapa del proceso “Dar de alta nuevos empleados en portal web” en la herramienta draw.io

  1. Abrir Outlook

  2. Abrir correo

  3. Descargar archivo adjunto

  4. Cerrar Outlook

  5. Abrir Excel

  6. Leer información de nuevos empleados

  7. Cerrar Excel

  8. Abrir portal web

  9. Seleccionar módulo “Altas”

  10. Llenar la información de los empleados

  11. Guardar cambios

  12. Cerrar portal web