Volver a home


📝 Blog

Cómo desarrollé una solución para anotaciones y edición de procesos BPMN


En el contexto de mis proyectos de automatización y documentación, constantemente necesitaba una herramienta liviana que me permitiera modelar, editar y anotar procesos BPMN de forma rápida, sin depender de software pesado o entornos cerrados. Fue así que decidí construir una solución propia, con foco en tres ejes: simplicidad, flexibilidad y exportación directa. En este artículo te comparto el enfoque que utilicé, las herramientas elegidas y cómo podés probarlo o integrarlo en tu flujo de trabajo.

La necesidad: La mayoría de las herramientas BPMN que probé funcionaban bien para modelar, pero no me ofrecían una manera directa de agregar anotaciones personalizadas o exportar procesos editados con facilidad. Algunas eran demasiado complejas, otras estaban cerradas detrás de cuentas o suscripciones, y muchas no eran tan amigables para integrarse con otros procesos automatizados.
Mi objetivo fue desarrollar una aplicación web que pudiera:
Cargar y editar diagramas BPMN desde el navegador
Agregar anotaciones visuales directamente sobre el proceso
Exportar los diagramas actualizados en formato XML estándar

Cómo pensé la solución?
La herramienta está basada en bpmn-js, una librería robusta y bien mantenida por el equipo de bpmn.io, que permite renderizar y manipular BPMN directamente en el navegador. A partir de ahí, agregué una capa personalizada de funcionalidades enfocadas en mejorar la experiencia de edición:
Interfaz responsiva con diseño limpio
Anotaciones visuales mediante componentes flotantes sobre los elementos del diagrama
Exportación del proceso en BPMN/XML con un solo clic
Soporte para cargar archivos propios o comenzar desde una plantilla vacía

Demostración y código:
🔗 https://joelvarela.ar/bpmn/

Y el código fuente está disponible en GitLab para quienes quieran revisar, colaborar o reutilizarlo:
🗂 https://gitlab.com/joelvarela/bpmn

Está publicado bajo una licencia abierta, justamente con la idea de que otros puedan aprovecharla o adaptarla a sus necesidades.

Posibilidad de mejora continua con iteraciónes
Aunque la herramienta ya es completamente funcional, tengo en mente algunas mejoras para futuras versiones:
Guardado de procesos en local storage o en cuenta de usuario
Validación de diagramas antes de la exportación
Compartir diagramas mediante enlaces únicos

Conclusión
Esta herramienta surge de una necesidad real y cotidiana: documentar procesos de forma clara y accesible. Al construirla, buscaba no solo resolver un problema propio, sino también compartir una solución que pueda ser útil en contextos similares.
Si trabajás en automatización, procesos de negocio o simplemente necesitás un editor BPMN ágil y en el navegador, te invito a probarlo. Y si tenés ideas, sugerencias o encontrás algo que pueda mejorarse, estoy abierto a recibir feedback.

Volver al listado