Un generador de digrafos de planes de estudio de la Universidad Tecnológica Nacional.

Para cada materia, es posible elegir tanto los estados como la modalidad de cursada.

• Falta cursada: Todavía no cursada. El nodo asociado figura en color gris.
• Cursando: Cursando actualmente. El nodo asociado figura en color celeste.
• Firmada: "Regularizada" o bien con final pendiente. El nodo asociado figura en color naranja.
• Aprobada: Aprobada con final o promoción. El nodo asociado es omitido en el digrafo (aunque en el panel principal figura en color verde).

• Anual: Cursada anual. El nodo asociado posee la forma de un rectángulo.
• Cuatrimestral: Cursada cuatrimestral. El nodo asociado posee la forma de un óvalo.

Viz.js es una herramienta que permite generar grafos en el browser mediante Graphviz a partir de la especificación de una gramática abstracta en DOT, siendo en este caso empleado para generar el digrafo del plan de estudios seleccionado.

Es posible visualizar el digrafo asociado al estado de las materias haciendo click en "Ver digrafo".

Es posible exportar el digrafo en formato SVG haciendo click en "Exportar".

Es posible levantar la aplicación localmente mediante Docker. La imagen del contenedor es obtenible de las siguientes formas estipuladas.

Luego de clonar el repositorio, posicionarse en el directorio raíz del proyecto y ejecutar:

docker build -t utn-flowchart .

La misma es obtenible mediante:

docker pull jlsuh/utn-flowchart:latest

Una vez obtenida la imagen, es posible crear el contenedor y levantar la aplicación de la forma:

docker run --rm -dp 80:80 utn-flowchart

O bien, en caso de haber obtenido la imagen de Docker Hub:

docker run --rm -dp 80:80 jlsuh/utn-flowchart

La aplicación ejecutará en localhost:80.

La extensibilidad de la aplicación se prevé mediante la incorporación de nuevos planes de estudio. Cada plan de estudio debe ser agregado en el directorio src/data/<codigoDelPlan> como un archivo que exporte un único object. El mismo debe ser de la forma:

export const codigoDelPlan = {
  id: "codigoDelPlan",
  branch: "codigoDeLaRegional",
  subjects: [
    [
      // Materias del primer año
      {
        id: "idMateria1Nivel1",
        name: "Nombre completo de la materia 1 nivel 1",
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
      },
      {
        id: "idMateria2Nivel1",
        name: "Nombre completo de la materia 2 nivel 1",
        modes: [modes.QUADRIMESTRAL],
      },
      /* Más materias según corresponda */
    ],
    [
      // Materias del segundo año
      {
        id: "idMateria1Nivel2",
        name: "Nombre completo de la materia 1 nivel 2",
        modes: [modes.ANNUAL],
        taken: ["idMateria1Nivel1", "idMateria2Nivel1"],
      },
      {
        id: "idMateria2Nivel2",
        name: "Nombre completo de la materia 2 nivel 2",
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
        taken: ["idMateria2Nivel1"],
      },
      {
        id: "idMateria3Nivel2",
        name: "Nombre completo de la materia 3 nivel 2",
        modes: [modes.QUADRIMESTRAL],
      },
      /* Más materias según corresponda */
    ],
    [
      // Materias del tercer año
      {
        id: "idMateria1Nivel3",
        name: "Nombre completo de la materia 1 nivel 3",
        modes: [modes.ANNUAL],
        taken: ["idMateria1Nivel2", "idMateria2Nivel2"],
        passed: ["idMateria3Nivel2"],
      },
      {
        id: "idMateria2Nivel3",
        name: "Nombre completo de la materia 2 nivel 3",
        modes: [modes.ANNUAL, modes.QUADRIMESTRAL],
        taken: ["idMateria1Nivel2"],
        passed: ["idMateria2Nivel2"],
      },
      {
        id: "idMateria3Nivel3",
        name: "Nombre completo de la materia 3 nivel 3",
        modes: [modes.QUADRIMESTRAL],
        taken: ["idMateria1Nivel2"],
      },
      /* Más materias según corresponda */
    ],
    /* Más niveles según corresponda */
  ],
};

Observaciones:

• El orden de las modalidades de cursada en el array modes debe ser según el aspecto "por defecto" bajo la cual la regional ofrece como modalidad de cursada de la materia. Por ejemplo, si la materia se ofrece principalmente en forma anual, siendo en forma secundaria cuatrimestral, el orden correcto es: [modes.ANNUAL, modes.QUADRIMESTRAL].
• El array taken contiene los id de las materias que son requisito para poder cursar la materia en cuestión.
• El array passed contiene los id de las materias que son requisito para poder aprobar la materia en cuestión.

Finalmente, el objeto del plan debe ser incorporado al array de planes existentes en src/data/plans.ts:

/* ... */
import { codigoDelPlan } from "./codigoDelPlan";

export const plans = [codigoDelPlan /*, Otros planes según corresponda*/];

La incorporación del plan de estudio al array se verá reflejada en la aplicación mediante una nueva Route, siendo la misma seleccionable desde el Select de planes de estudio: