Repolode
Enviar
Bogdan-Lyashenko

Bogdan-Lyashenko/js-code-to-svg-flowchart

Librería de JavaScript y CLI que convierte código JS en diagramas de flujo SVG, con niveles de abstracción, modificadores de bloques de código y temas.

Ver en GitHub
Estrellas
7,105
Forks
478
Issues abiertos
45
Último commit
hace 3 años

¿Qué es?

js2flowchart analiza código JavaScript y lo convierte en un árbol de sintaxis abstracta; a partir de este, construye un árbol de flujo y lo representa como un diagrama de flujo SVG. Funciona tanto en el cliente como en el servidor y admite sintaxis ES6. El resultado se puede generar mediante una API de JavaScript o desde la línea de comandos con un único argumento de archivo.

La librería permite controlar el nivel de detalle. Los niveles de abstracción predefinidos muestran solo las importaciones y exportaciones, los nombres de clases y funciones, o las dependencias entre funciones; también puedes definir niveles personalizados. Los modificadores pueden representar iteradores como map, forEach y filter con formas de bucle, condensar un bloque en una sola forma o ignorar nodos, como las llamadas a log. Las funciones de enfoque y desenfoque resaltan u ocultan ramas específicas del diagrama.

La representación se puede configurar mediante temas predefinidos (default, black and white, blurred, light) o ajustes personalizados de color y estilo. Un generador de presentaciones produce una serie de SVG con distintos niveles de abstracción, y un editor online permite pegar código y descargar el resultado.

Funciones clave

  • 01Convierte código fuente JavaScript (ES6) en diagramas de flujo SVG en navegadores o Node.js.
  • 02Incluye un CLI que genera un archivo SVG a partir de un archivo JS local.
  • 03Ofrece niveles de abstracción predefinidos, como importaciones y exportaciones, clases y dependencias entre funciones.
  • 04Permite definir niveles de abstracción personalizados y modificadores del árbol de flujo.
  • 05Incluye controles para enfocar, desenfocar y destruir bloques del diagrama.
  • 06Incluye varios temas de color y permite personalizar los estilos.

Casos de uso

  • Documentar el funcionamiento de un módulo o una función mediante un diagrama visual.
  • Aprender a recorrer una base de código desconocida visualizando paso a paso su flujo de control.
  • Generar diapositivas para presentaciones que pasen de una estructura general a una lógica detallada.
  • Crear diagramas de flujo para un proceso descrito con sintaxis JS válida.

Inicio rápido

  1. 1

    Instala el paquete desde NPM

    yarn add js2flowchart
  2. 2

    Instálalo globalmente para usar la CLI desde cualquier lugar

    yarn global add js2flowchart
  3. 3

    Genera un diagrama de flujo SVG a partir de un archivo JS

    js2flowchart main.js

Antes de usarlo

  • La documentación indica que la compatibilidad con varios archivos se gestiona en un proyecto independiente, Codecrumbs, y no en esta biblioteca.
  • El último envío de código fue en octubre de 2023, por lo que el mantenimiento podría ser lento.
  • El README no describe cómo se genera el diagrama de flujo para código distinto al de los ejemplos.

Temas

#javascript#flowchart#svg#visualization#ast#code-analysis#documentation#cli#es6#learning

Preguntas frecuentes

¿Qué es js-code-to-svg-flowchart?
Librería de JavaScript y CLI que convierte código JS en diagramas de flujo SVG, con niveles de abstracción, modificadores de bloques de código y temas. js2flowchart analiza código JavaScript y lo convierte en un árbol de sintaxis abstracta; a partir de este, construye un árbol de flujo y lo representa como un diagrama de flujo SVG. Funciona tanto en el cliente como en el servidor y admite sintaxis ES6. El resultado se puede generar mediante una API de JavaScript o desde la línea de comandos con un único argumento de archivo.
¿js-code-to-svg-flowchart es gratuito? ¿Qué licencia tiene?
js-code-to-svg-flowchart es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿js-code-to-svg-flowchart sigue mantenido?
Sin commits en más de 6 meses. El último commit de js-code-to-svg-flowchart fue el 2 oct 2023.
¿Para qué puedo usar js-code-to-svg-flowchart?
Documentar el funcionamiento de un módulo o una función mediante un diagrama visual. Aprender a recorrer una base de código desconocida visualizando paso a paso su flujo de control. Generar diapositivas para presentaciones que pasen de una estructura general a una lógica detallada. Crear diagramas de flujo para un proceso descrito con sintaxis JS válida.
¿Cómo se instala js-code-to-svg-flowchart?
Instala el paquete desde NPM: yarn add js2flowchart Instálalo globalmente para usar la CLI desde cualquier lugar: yarn global add js2flowchart Genera un diagrama de flujo SVG a partir de un archivo JS: js2flowchart main.js
¿Dónde consigo js-code-to-svg-flowchart?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados