PortLab

Un flujo es un grafo, no una jerarquía

Esta página se parece a la de los diagramas de bloques y comparte con ella la mitad del código, pero por debajo tiene otro motor, y vale la pena decir por qué, porque es la misma razón que decide qué herramientas se parecen entre sí y cuáles no.

Un diagrama de bloques es una jerarquía: niveles, recuadros, subrecuadros. La disposición se deduce del anidamiento — medir desde abajo, colocar desde arriba — y las flechas son un adorno sobre una estructura ya fijada. Un diagrama de flujo es un grafo: la estructura son los enlaces. Un rombo abre dos ramas que bajan en paralelo unos cuantos pasos y luego se reúnen; y esa es precisamente la alineación en columnas a través de las filas que no existe en el otro motor.

De ahí se sigue una consecuencia práctica, y es la elección fundacional de esta página: la posición de los bloques no se edita, se calcula. En el otro editor decidir a mano es justamente el objetivo — es una figura para publicación —. Aquí sería una condena: un flujo se modifica insertando un paso por en medio, que es exactamente cuando rehacer la disposición a mano se vuelve insostenible.

Disposición en cuatro pasos

El esquema es el que propusieron Sugiyama, Tagawa y Toda en 1981 para los grafos jerárquicos, el mismo que hay detrás de dot, de Graphviz.

1. Los niveles, por camino más largo

Primero se buscan las aristas de retorno, las que cierran un ciclo: en un flujo son el «volver a intentarlo», y no son un error sino el caso normal. Se apartan, y lo que queda es un grafo acíclico.

Sobre él, el nivel de cada nodo es el camino más largo que llega hasta él. El más largo, no el más corto, y esa es la diferencia que cuenta: con el camino más corto, un nodo alcanzable tanto en un paso como en tres acabaría en el primer nivel, y la flecha larga tendría que volver a subir. Con el más largo, cada nodo queda por debajo de todos sus predecesores, y ninguna flecha de avance apunta hacia atrás.

2. Nodos ficticios: el paso que parece un detalle

Una arista que salta más de un nivel recibe un marcador en cada nivel que atraviesa. A partir de ahí toda arista une niveles adyacentes; los marcadores participan en la ordenación como si fueran nodos reales y, por tanto, reclaman una columna; y la arista no puede pasar por encima de un bloque por construcción.

Vale la pena compararlo con la otra solución que ya guarda este sitio. El visor del esquema de la base de datos resuelve el mismo problema — una línea que tiene que ir de aquí a allá sin cruzar los recuadros — con un encaminador A* sobre una retícula de Hanan: busca el camino. Lo hace porque allí las tablas las coloca el usuario donde quiere, y los obstáculos están donde están. Aquí las posiciones las decidimos nosotros, y podemos reservar el pasillo por adelantado en vez de buscarlo. Cuando se controla la disposición, no hace falta un camino mínimo.

3. El orden dentro de un nivel

Los nodos de cada nivel se reordenan para reducir los cruces, con el método del baricentro: cada uno se coloca cerca de la posición media de sus vecinos en el nivel adyacente, alternando una pasada hacia abajo y otra hacia arriba. Es una heurística, y se declara como tal: hallar el número mínimo de cruces es NP-difícil, y no es más fácil ni siquiera en el caso de dos niveles al que se aplica el método. El baricentro no elimina los cruces: quita la mayoría a coste lineal — y eso basta para una figura legible.

4. Coordenadas, y enderezado

Los nodos se reparten a lo largo del nivel y la fila se centra. Después, unas cuantas pasadas de enderezado tiran de cada uno hacia la media de sus vecinos, restableciendo cada vez la distancia mínima con dos barridos, uno por sentido. Esto es lo que hace que las cadenas salgan rectas, y las cadenas son la mayor parte de un flujo: una cadena torcida se lee mal aunque sea correcta.

Todo esto funciona sobre coordenadas abstractas — una a lo largo del flujo, otra a lo ancho — y se traduce a x e y solo al final. Por eso las direcciones de arriba abajo y de izquierda a derecha no son dos disposiciones, sino la misma leída con los ejes intercambiados.

Las formas, y el rombo que no encaja

Los símbolos son los convencionales de los diagramas de flujo (ISO 5807): estadio para el inicio y el fin, rectángulo para un proceso, rombo para una decisión, paralelogramo para los datos, cilindro para el almacenamiento, hexágono para la preparación, y así sucesivamente.

Una forma, sin embargo, exige cuidado, y dejarla sin tratar estropea el dibujo. En un rombo el área utilizable es la mitad del recuadro que lo contiene: un rectángulo de semilados p y q cabe solo si p/A + q/B ≤ 1, donde A y B son las semidiagonales. El rombo de área mínima que contiene un texto w×h es por tanto 2w×2h: el doble en ambas direcciones. Sin este cálculo las decisiones salen diminutas y con el texto desbordando los vértices.

Hay una corrección: en una sola línea ese cálculo daría un rombo achatado, que no parece el rombo de un diagrama. Se impone además una altura mínima ligada a la anchura. Ensanchar es siempre seguro — más sitio del necesario no hace daño —, mientras que estrechar no lo es.

Un solo motor de texto

La medida calibrada de las cadenas, el intérprete de las etiquetas en línea con sus subíndices, el dibujo de los <tspan> con la contabilidad de los desplazamientos de la línea de base: nada de esto se ha reescrito. Vive en diagramma.js, que lo expone, y esta página lo usa. Son cosas delicadas, y una corrección hecha una vez debe valer para los dos dibujos.

Lo mismo con el andamiaje: deshacer, la copia de seguridad en el navegador, la exportación con los tipos de letra incorporados y los ppp escritos en el PNG, el zoom, la paleta. Nada de esto sabe qué es un diagrama, y vive en js/common/editor_svg.js. La tercera página de este tipo costará la interfaz y nada más.

Bibliografía

• K. Sugiyama, S. Tagawa, M. Toda, Methods for visual understanding of hierarchical system structures, IEEE Transactions on Systems, Man, and Cybernetics 11(2), 109–125, 1981. DOI 10.1109/TSMC.1981.4308636
• E. R. Gansner, E. Koutsofios, S. C. North, K.-P. Vo, A Technique for Drawing Directed Graphs, IEEE Transactions on Software Engineering 19(3), 214–230, 1993. DOI 10.1109/32.221135 — los nodos ficticios y la asignación de coordenadas tal como los hace dot.
• M. R. Garey, D. S. Johnson, Crossing Number is NP-Complete, SIAM Journal on Algebraic and Discrete Methods 4(3), 312–316, 1983. DOI 10.1137/0604033
• ISO 5807:1985, Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts — los símbolos que se usan aquí.
• W3C, Scalable Vector Graphics (SVG) 2, Candidate Recommendation. www.w3.org/TR/SVG2/

Para qué sirve

Para construir diagramas de flujo — procedimientos, algoritmos, cadenas de tratamiento — y llevárselos en SVG o en PNG a la resolución que se quiera. El diagrama se guarda como fichero JSON y se vuelve a abrir cuando hace falta: no se guarda nada en la base de datos, el fichero es el documento.

La diferencia con los diagramas de bloques es que aquí no se colocan los bloques: se dice qué son y cómo están enlazados, y la disposición se calcula. Se trabaja sobre el contenido, no sobre coordenadas.

Las tres partes de la página

A la izquierda, la lista de Bloques, agrupados por nivel — el nivel es el resultado del cálculo, no una orden: mirarlo es la manera más directa de entender por qué el dibujo ha salido así —. Debajo, las Propiedades de lo que esté seleccionado; el botón Diagrama, arriba, vuelve a las propiedades generales. A la derecha, el dibujo, que se rehace con cada cambio, y bajo él la tabla de Enlaces. Un bloque se selecciona desde la lista o pulsándolo en el dibujo: el seleccionado queda perfilado en azul discontinuo.

Manteniendo Ctrl (o Cmd), una pulsación añade a la selección en vez de sustituirla, y pulsar de nuevo la quita. Con varios bloques seleccionados, los campos muestran los valores del último tocado — el del perfil continuo —, pero cada cambio se aplica a todos: así es como seis bloques reciben el mismo color de una vez.

La casilla que está encima de la lista la filtra: solo quedan visibles las entradas que contienen el texto buscado.

Desde el teclado: ↑ y ↓ recorren la lista en el orden en que se muestra, filtro incluido; Intro pone el cursor en el texto del seleccionado; Supr lo elimina — todos, si la selección es múltiple.

Construir un flujo

La vía más rápida es seleccionar un bloque y pulsar Paso siguiente: añade uno debajo, ya enlazado. Repitiéndolo se escribe la cadena principal sin tocar nunca la tabla de enlaces.

Para una bifurcación: seleccione el rombo, pulse Paso siguiente dos veces (las dos ramas) y en la tabla escriba sí y no en las etiquetas respectivas. El motor hace que las dos ramas salgan por lados distintos del rombo, para que los dos rótulos no se solapen.

Añadir un bloque (en las propiedades del diagrama) crea uno sin enlazar; Duplicar copia el seleccionado con todo su estilo; Eliminar lo quita junto con los enlaces que lo nombran, para no dejar referencias rotas.

El identificador es el nombre con el que los enlaces llaman al bloque. Cámbielo y los enlaces se actualizan solos.

Las formas

El campo Forma elige entre los símbolos convencionales: inicio y fin (estadio), proceso (rectángulo), subproceso (con barras laterales), decisión (rombo), entrada y salida (paralelogramo), documento (borde inferior ondulado), almacenamiento (cilindro), preparación (hexágono), manual (trapecio), conector (círculo). Cada forma tiene un color por omisión que puede cambiarse, por separado o con las combinaciones de colores.

Enlaces y retornos

Todo enlace va De un bloque A otro, y puede llevar una etiqueta — el sí y el no de una decisión. El trazo, el color, el grosor y la punta se eligen por enlace.

Un enlace que vuelve hacia arriba, es decir, que cierra un ciclo, se reconoce solo y su fila se pone amarilla: es un retorno. No es un error: es el «volver a intentarlo» de cualquier procedimiento. Los retornos no bajan entre los bloques: viajan por un carril pegado al margen, y la columna Retorno permite elegir izquierda o derecha.

Cuando la disposición no convence

Las propiedades de un bloque tienen dos campos que fijan su posición:

• Nivel: la fila (o la columna, si el flujo va en horizontal) en la que colocarlo. Dejado vacío, decide el programa. Un bloque fijado lleva una chincheta en la lista.
• Orden dentro del nivel: la posición dentro de la fila, contada desde cero.

Fijar un bloque no fija los demás: lo que viene detrás se empuja hacia abajo, y el resto se acomoda alrededor. Si se pide lo imposible — un bloque fijado por encima de otro del que depende —, la página lo dice en rojo debajo del dibujo y dibuja de todos modos.

Las propiedades del diagrama llevan la dirección del flujo (de arriba abajo o de izquierda a derecha) y las dos separaciones, entre niveles y entre bloques: ensanchar la segunda es a menudo lo que hace falta cuando una rama sale apretada.

Texto y tipografía

La familia tipográfica, el cuerpo, los colores y el trazo se fijan en el diagrama y descienden a todos los bloques; un bloque redefine solo lo que tiene que cambiar, y Volver al estilo heredado borra sus excepciones. Lo mismo vale para la casilla Escapar el HTML: desmarcada, <b>, <i>, <u>, <s>, <sub>, <sup> y <br> funcionan dentro de los bloques — así es como se escriben PM_2,5 o m³. Todo lo demás sigue viéndose como texto.

Los tamaños tienen un mando único, en el grupo Tamaños de letra del diagrama: Títulos, Textos y Etiquetas de los enlaces, para cambiar a la vez todos los campos de texto del mismo tipo. Los textos son el tamaño de base; títulos y etiquetas lo siguen mientras su campo esté vacío —los títulos al mismo tamaño, las etiquetas a 0,86 veces— y el valor vigente se lee en gris dentro del campo. Escrito un número, el campo vale por sí mismo; borrado, vuelve a seguir a los textos. Un bloque con un tamaño propio no queda alcanzado: el grupo dice cuántos hay, y Aplicar a todos quita esas excepciones. En un bloque suelto el campo Cuerpo cambia el texto; el título lo sigue solo mientras los títulos del diagrama estén vacíos.

Deshacer, exportar, no perder el trabajo

Las dos flechas curvas deshacen y rehacen, también desde el teclado con Ctrl+Z y Ctrl+Y; se guardan sesenta pasos y una ráfaga de pulsaciones en el mismo campo cuenta como una. Nuevo, Ejemplo y Abrir JSON piden confirmación si hay trabajo sin guardar, el navegador avisa al cerrar y queda una copia de seguridad en el navegador: tras una recarga accidental, una barra amarilla ofrece recuperarla.

SVG es el formato preferible: vectorial, con los tipos de letra incorporados. PNG es para cuando no se acepta el vectorial; el campo ppp fija la resolución y esta se escribe dentro del fichero, de modo que la imagen se coloca en un documento con el tamaño físico correcto. Junto al zoom se muestra el tamaño en píxeles y en centímetros: la figura en centímetros no depende de los ppp, que cambian la nitidez y no el tamaño.

Los dos botones de portapapeles copian en vez de descargar: el que está junto a SVG copia el código, el que está junto a PNG copia la imagen a la resolución elegida, lista para pegarla en un documento o en un mensaje. Necesitan una conexión segura, que el sitio tiene.

El campo cm fija la anchura con la que sale la figura. No redibuja nada: cambia el tamaño declarado en el fichero dejando intacto el sistema de coordenadas — con gráficos vectoriales eso es exacto, no se pierde nada — y el PNG lo sigue con sus ppp. Dejado vacío, vale el tamaño natural; cuando se fija, aparece una flechita junto a las medidas.

PDF es el formato que las revistas piden para las figuras (junto con el EPS, que deriva de él): vectorial, con las fuentes incorporadas como subconjuntos y una página del tamaño exacto de la figura — el de cm, si está fijado. Lo produce el servidor con rsvg-convert, que usa las fuentes del sistema y no las incorporadas en el SVG: si una familia no está instalada en el servidor, la sustitución se avisa enseguida, tras la descarga. La página Diagnóstico tiene el control correspondiente, con el comando de instalación.

En varias páginas. El menú junto a Exportar PDF elige la hoja: una página, del tamaño de la figura como arriba, o A4 o A3, horizontal o vertical. Con una hoja elegida el dibujo no se reduce: sale al tamaño del campo cm (o al natural) y se divide en una cuadrícula de páginas, de izquierda a derecha y luego hacia abajo, con márgenes de 1 cm. La barra dice antes cuántas páginas hacen falta, y el pie de cada una lleva el nombre del archivo, el número y —si la cuadrícula tiene varias filas y varias columnas— la fila y la columna, para volver a juntarlas. Los cortes caen entre los nodos, donde se cruzan menos; una flecha, en cambio, se puede cortar. Por encima de 100 páginas el PDF no se hace: se reduce la anchura en cm o se elige una hoja más grande.

Un fichero JSON también puede arrastrarse directamente sobre el dibujo para abrirlo.

El JSON

El panel de abajo muestra el modelo por extenso. La forma es esta:

{
  "stile":  { "font": "IBM Plex Sans, Arial, sans-serif", "dim": 13 },
  "pagina": { "direzione": "verticale", "gap_livelli": 44, "gap_nodi": 26 },
  "nodi": [
    { "id": "start", "tipo": "avvio",     "testo": "Inicio" },
    { "id": "read",  "tipo": "processo",  "testo": "Leer los datos" },
    { "id": "ok",    "tipo": "decisione", "testo": "¿Datos válidos?" },
    { "id": "error", "tipo": "processo",  "testo": "Avisar", "livello": 3 }
  ],
  "archi": [
    { "da": "start", "a": "read" },
    { "da": "read",  "a": "ok" },
    { "da": "ok",    "a": "error", "etichetta": "no" },
    { "da": "error", "a": "read",  "tratto": "tratteggiato", "lato": "sinistra" }
  ]
}

Las claves omitidas toman el valor heredado, y un flujo válido puede tener cuatro líneas. Pulse Aplicar para llevarlo al dibujo. En el stile del diagrama, dim_titolo y dim_etichetta fijan los tamaños de los títulos y de las etiquetas de los enlaces; si se omiten, siguen a dim.

Límites que conviene conocer

• Los cruces se reducen, no se eliminan: hallar el mínimo es NP-difícil. En un grafo muy entrelazado es mejor partir el diagrama o usar conectores.
• Las posiciones no se pueden arrastrar. Es una elección, no una omisión: se fijan con Nivel y Orden.
• El diagrama no se guarda en el servidor. La copia de seguridad del navegador cubre el descuido, pero no es un archivo: solo hay una, y vive en esta máquina.
• En el PNG solo se incorporan las cuatro familias autoalojadas (IBM Plex Sans, Nunito, Roboto, JetBrains Mono).