Software y sistemas

Herramienta para convertir código JavaScript a diagrama de flujo

He descubierto una herramienta que viene de maravilla para convertir código fuente a un diagrama de flujo, sin esfuerzo; únicamente se pone el código fuente y automáticamente se crea el diagrama de flujo.

Eso sí, el código que soporta es únicamente JavaScript (uno de mis lenguajes favoritos) y los resultados son maravillosos. Por ejemplo, aquí tengo el código de para saber si una persona es mayor o menor de edad en JavaScript:

Diagrama de flujo – Mayor o menor de edad en JavaScript

Ese diagrama de flujo fue generado automáticamente únicamente pegando código. Veamos la página web en donde se puede usar y su forma de uso.

Herramienta code-to-graph

La herramienta o el software no es mío, el repositorio oficial está aquí y la página de demostración aquí.

Convertir código a diagramas de flujo

Una vez en la página de demostración, simplemente escribimos o pegamos el código de la función. En este caso es el de mayor o menor de edad en JavaScript:

const edadDelUsuario = parseInt(prompt("¿Cuál es tu edad?"));
if (edadDelUsuario >= 18) {
    alert("Eres mayor de edad");
} else {
    alert("Eres menor de edad");
}

Al pegar el código, el diagrama se crea automáticamente y luego se puede descargar como SVG haciendo click en Download SVG File:

Utilizando code to graph – Convertir código JS a diagramas de flujo online

Si pudiera mencionar una desventaja sería que el SVG no es tan fácil de convertir a PNG para ponerlo dentro de un documento o algo así, pero siempre podemos tomarle una captura de pantalla o encontrar un buen convertidor en el internet.

El uso que se me ocurre es cuando esos profesores de programación te piden que hagas el diagrama de flujo de cada programa.

Por cierto, este código sencillo fue convertido a diagrama de flujo automáticamente, pero podría ser una función más compleja, por ejemplo, la que convierte minutos a texto legible se ve así:

Diagrama de flujo de minutos a tiempo en JavaScript

Ya que estamos por aquí, te invito a leer sobre las funciones flecha, let y const en JavaScript. Eso es todo por el momento.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.