PortLab

Un diagrama es una estructura, no un dibujo

Un diagrama de arquitectura como los que aparecen en las páginas técnicas de este sitio no es una ilustración a mano alzada: es una jerarquía —niveles, recuadros, recuadros dentro de recuadros— más un conjunto de relaciones, las flechas. Construir uno arrastrando rectángulos por un programa de dibujo significa rehacer a mano, cada vez, una estructura que la máquina podría disponer sola; y ese trabajo se paga dos veces, porque en cuanto cambia un rótulo las coordenadas ya no encajan.

La elección que se ha hecho aquí es la contraria: se describe la estructura y la disposición se calcula. De ahí se siguen tres consecuencias prácticas, y son la razón por la que vale la pena escribir un motor en vez de abrir Inkscape.

• Se regenera idéntico. Cambiar una palabra mueve ese recuadro y realinea todo lo demás, sin tocar nada.
• Se traduce. Un diagrama en italiano y uno en inglés son el mismo fichero con cadenas distintas: la geometría se vuelve a calcular, y el recuadro inglés, más corto, se estrecha solo.
• Se puede probar. La salida es una cadena, así que puede comprobarse sin navegador. La batería sin interfaz node-tools/test/portlab/diagramma_test.js verifica que ningún texto se salga de su recuadro, que los niveles no se solapen y que una flecha entre dos recuadros alineados en vertical sea realmente vertical.

Disposición: medir y luego colocar

El motor hace dos pasadas, las mismas dos que hace cualquier sistema de composición, de TeX a los motores de CSS. En la primera, de abajo arriba, cada elemento declara el espacio que necesita como mínimo: su propio texto, más sus hijos dispuestos en la dirección pedida, más el margen interior. Un contenedor todavía no sabe dónde acabará, solo cuánto sitio quiere. En la segunda, de arriba abajo, a cada elemento se le da un rectángulo, nunca menor que su mínimo; el sobrante se reparte entre los hijos.

Cómo se reparte es el único parámetro interesante. Sin Llenar la anchura el sobrante se queda en los bordes y el grupo queda alineado; con él, el sobrante se reparte entre los recuadros en proporción a su anchura natural, de modo que la fila llega exactamente hasta los márgenes conservando las proporciones que dictan los rótulos. Este es el glue de Knuth: espacio elástico que se estira en proporción a lo que está dispuesto a ceder.

El diagrama entero es a su vez un elemento —un contenedor vertical sin recuadro— y cada nivel es un contenedor horizontal sin recuadro. No hay un caso especial para el primer nivel: hay una recursión, y cubre también la raíz. El precio es una precaución: ese «sin recuadro, sin margen» es una propiedad de los contenedores de disposición y no debe heredarse, o anularía el margen interior de todos los recuadros de debajo y los rótulos tocarían los bordes. El motor, por tanto, mantiene dos estilos distintos por nodo: el propio y el que transmite.

Las flechas: puntos de enganche y pistas

Una flecha automática sale del centro del lado que mira al otro elemento y entra por el centro del lado opuesto: es donde el ojo la busca, y sigue siendo correcto cuando un recuadro cambia de anchura. Si varias flechas tocan el mismo lado, sus puntos de enganche se reúnen alrededor del centro en el orden de dónde está el otro extremo, así que cerca del recuadro no se cruzan. Si los dos puntos no están alineados, la flecha hace un codo en el espacio vacío entre los dos elementos.

El problema de verdad empieza cuando varios codos atraviesan el mismo espacio. Con todos los tramos transversales a la misma altura, donde dos tramos se solapan ya no se distingue qué flecha va adónde. En el cableado de circuitos es un problema conocido desde hace medio siglo, el channel routing: cada tramo tiene su pista, y las pistas se llenan con el algoritmo del borde izquierdo de Hashimoto y Stevens. El orden de las pistas no es libre. Si la cola con la que una flecha baja a su recuadro cae bajo el tramo de otra, la otra debe ir más arriba, o la corta. Las restricciones se ordenan con el orden topológico de Kahn, y un ciclo de restricciones es un cruce que ningún orden puede evitar. En los diagramas el mismo paso se llama nudging, y es la última etapa del trazado ortogonal de conectores de Wybrow, Marriott y Stuckey.

Queda un caso que ningún orden resuelve: dos flechas que se intercambian el sitio entre columnas alineadas, con la salida de una justo encima de la llegada de la otra. Ahí el cruce es inevitable, y el motor desplaza la llegada medio paso para que las dos flechas no compartan un trozo de cola.

Por qué no Graphviz, por qué no Mermaid

Existen herramientas excelentes para dibujar grafos por capas: el algoritmo de referencia es el de Sugiyama, Tagawa y Toda (1981), que asigna los nodos a capas, los reordena para reducir los cruces y después les asigna coordenadas; dot, de Graphviz, es su implementación clásica, descrita por Gansner y North (2000). Mermaid, conocido por los ficheros Markdown, funciona con el mismo espíritu.

Esas herramientas, sin embargo, se adueñan de la disposición: se declaran nodos y aristas, y el resultado es el que el algoritmo considera mejor. Una figura destinada a publicación necesita lo contrario: decidir qué recuadros comparten fila, cuánto vale el radio de las esquinas, que la geodatabase sea una banda única con sus tablas dentro. Aquí los niveles los declara el autor, y el motor solo mide y alinea. El precio es que el programa no evita los cruces por nosotros; la ganancia es que la figura sale como se había pensado.

Por qué la salida es SVG

Un diagrama es texto y líneas: en SVG sigue siendo vectorial a cualquier aumento, el texto puede seleccionarse y buscarse dentro del fichero, y quien quiera retocarlo puede abrirlo en Inkscape sin perder nada. Un canvas habría producido píxeles de entrada, y con ellos el problema de elegir una resolución antes de saber dónde iba a acabar la figura.

El PNG se obtiene después a partir del SVG, dibujándolo sobre un canvas ampliado por la razón entre los ppp pedidos y los 96 convencionales de la pantalla: como el origen es vectorial, ampliar no emborrona. Hay dos trampas que hay que desactivar a propósito, porque ninguna de las dos da error.

• Los tipos de letra. Un SVG cargado como imagen es un documento aislado: no ve las reglas @font-face de la página que lo ha producido y no tiene permiso para descargar nada. Si se le deja solo, el PNG saldría con una tipografía de reserva — en silencio. Por eso, al exportar, se leen los ficheros woff2 de las familias realmente usadas, se codifican en base64 y se incorporan al dibujo. Los tipos de letra están autoalojados (fonts/common/), así que nunca sale nada del sitio.
• La resolución declarada. Un PNG producido por un canvas no lleva el bloque pHYs, y un PNG sin pHYs se lee como de 96 ppp: una imagen generada a 300 ppp y colocada en un documento aparecería tres veces más ancha, y el usuario la encogería a mano, echando a perder el campo de los ppp. El bloque lo escribimos nosotros, con su propio CRC-32; la especificación exige que pHYs preceda al primer IDAT, y ponerlo justo después de IHDR siempre lo cumple. La imagen cae entonces con el tamaño físico correcto en Word y en LibreOffice.

Cuánto mide un rótulo

La anchura de una cadena solo la conoce el motor de representación que va a dibujarla: depende del tipo de letra, del cuerpo, del kerning. En el navegador se le pregunta al canvas (measureText), y los recuadros se ajustan al texto con precisión de píxel. De ahí se sigue una consecuencia operativa que no es obvia: el primer dibujo tiene que esperar a que se descarguen los tipos de letra, porque medir con una tipografía de reserva produciría una disposición equivocada que ya nunca se corrige.

Fuera de un navegador —en las pruebas, o si algún día las figuras se generasen en el servidor— el motor recurre a una estimación por clases de carácter: caracteres estrechos, dígitos, mayúsculas, letras anchas, minúsculas corrientes. Los coeficientes no están inventados: son un ajuste por mínimos cuadrados sobre quince cadenas medidas con el canvas en Arial a 13 px, con un error típico por debajo del 1% y un peor caso del 4,5% en una cadena enteramente en mayúsculas. Un factor de seguridad del 3% hace preferible un recuadro algo ancho a un texto desbordado: lo primero es un defecto, lo segundo se ve.

Lo que esta página no ha escrito

El motor de texto de esta página —la medida calibrada, el intérprete de las etiquetas en línea, el dibujo de los <tspan>— lo expone diagramma.js y lo usa también el editor de diagramas de flujo, que por lo demás tiene un motor completamente distinto. Lo mismo con el andamiaje: deshacer, la copia de seguridad, la exportación, el zoom y la paleta no saben nada de diagramas y viven en js/common/editor_svg.js. Son cosas delicadas, y una corrección hecha una vez debe valer para los dos dibujos.

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, S. C. North, An open graph visualization system and its applications to software engineering, Software: Practice and Experience 30(11), 1203–1233, 2000. DOI 10.1002/1097-024X(200009)30:11<1203::AID-SPE338>3.0.CO;2-N
• D. E. Knuth, The TeXbook, Addison-Wesley, 1984 — capítulo 12, Glue: el modelo de cajas y espacio elástico del que desciende cualquier motor de composición posterior.
• A. Hashimoto, J. Stevens, Wire routing by optimizing channel assignment within large apertures, Proceedings of the 8th Design Automation Workshop (DAC '71), 155–169, 1971. DOI 10.1145/800158.805069
• A. B. Kahn, Topological sorting of large networks, Communications of the ACM 5(11), 558–562, 1962. DOI 10.1145/368996.369025
• M. Wybrow, K. Marriott, P. J. Stuckey, Orthogonal connector routing, Graph Drawing 2009, LNCS 5849, 219–231, Springer, 2010. DOI 10.1007/978-3-642-11805-0_22
• ISO/IEC 15948:2004, Portable Network Graphics (PNG): Functional specification — la estructura de los bloques, su CRC-32 y el bloque de dimensiones físicas pHYs.
• W3C, Scalable Vector Graphics (SVG) 2, Candidate Recommendation. www.w3.org/TR/SVG2/

Para qué sirve

Para construir diagramas de bloques —arquitecturas, flujos de tratamiento, organigramas— y llevárselos en SVG (vectorial, para retocarlo o para incrustarlo en una página) 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.

Las tres partes de la página

A la izquierda, la Estructura, que es el árbol del diagrama, y debajo las Propiedades de lo que esté seleccionado. A la derecha, el dibujo, que se rehace con cada cambio, y bajo él la tabla de Flechas. Un recuadro se selecciona desde el árbol 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 elementos seleccionados, los campos muestran los valores del último tocado —el del perfil continuo—, pero cada cambio se aplica a todos: así es como seis elementos reciben el mismo color de una vez.

La casilla que está encima del árbol lo filtra: solo quedan visibles las entradas que contienen el texto buscado.

Desde el teclado: ↑ y ↓ recorren el árbol 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.

Las entradas del árbol pueden arrastrarse para reordenarlas, entre iguales: dentro de un nivel, o dentro del mismo contenedor. Para mover un recuadro dentro de otro, la vía siguen siendo los botones o el JSON.

La vista previa se reduce para caber en la columna. Los tres mandos de zoom al final de la barra la devuelven al tamaño real y más allá: útil cuando el diagrama es grande y los recuadros se vuelven demasiado pequeños para pulsarlos.

Niveles, recuadros, recuadros dentro de recuadros

Un nivel es una fila del diagrama. No tiene recuadro propio: es un contenedor, y dice qué está a la misma altura. Puede llevar un título, que se convierte en el rótulo de sección encima de la fila, y un texto.

Un recuadro es un elemento dibujado, con un título (en negrita) y un texto. El botón Recuadro dentro anida otro en su interior, a cualquier profundidad: así se obtiene la banda de la geodatabase con sus tablas dentro. Recuadro al lado añade uno al mismo nivel, y Duplicar hace una copia suya —contenidos y estilo— junto al original. Los identificadores de la copia se renombran, o una flecha que apuntara a ese id caería en uno de los dos al azar.

Recuadro alrededor hace lo contrario: pone un marco nuevo alrededor de un grupo que ya existe. Desde un recuadro encierra ese recuadro y todos los que tiene al lado, en el mismo nivel; con varios recuadros seleccionados con Ctrl, solo esos; desde un nivel, todos los suyos. Los recuadros encerrados conservan su orden y sus identificadores, así que las flechas se quedan donde están; el recuadro nuevo se llama nuevo grupo, y basta con darle título y estilo. El marco tiene su propio margen interno, que ensancharía la fila: si los recuadros encerrados tienen todos una anchura fijada, se estrechan ellos, y la fila queda tan ancha como era. Si alguno tiene la anchura natural, la que dicta su texto, se quedan como están y el marco crece alrededor, porque estrecharlos partiría sus textos en más líneas.

Disposición de los hijos dice si los recuadros anidados van en fila o en columna. Llenar la anchura ensancha los recuadros hasta los márgenes conservando sus proporciones; sin ella, mantienen su anchura natural y el grupo queda centrado.

Para partir una línea dentro de un recuadro, pulse Intro en el campo de texto. Si hay fijada una anchura mínima, el texto se ajusta solo para caber.

Cuando las filas acaban con anchuras distintas, las pone en orden Igualar las anchuras, en las propiedades del diagrama entero, donde una nota dice cuánto mide cada una. Lleva cada fila, con su recuadro más externo, a la anchura escrita en el campo de al lado; con el campo vacío, a la más frecuente entre las filas, o al espacio de la hoja si la hoja tiene una anchura fijada. La anchura se reparte entre los recuadros de la fila en proporción a la que tienen, y dentro de cada contenedor se baja hasta los recuadros más internos, descontando márgenes y distancias. Después, cada recuadro tiene una anchura fijada, también los que antes seguían su texto. Una palabra más larga que su recuadro no se parte, y su fila queda más ancha: la página lo avisa. Como cualquier cambio, se deshace con Ctrl+Z.

Escapar el HTML: subíndices, cursivas y símbolos

La casilla Escapar el HTML, debajo de los campos de texto, decide qué pasa con las etiquetas. Marcada (por omisión), las etiquetas se ven exactamente como se han escrito: PM<sub>2,5</sub> aparece por extenso en el dibujo. Desmarcada, se interpreta una lista corta de etiquetas:

• <b> y <strong> negrita, <i> y <em> cursiva, <u> subrayado, <s> y <del> tachado;
• <sub> subíndice y <sup> superíndice —así se escriben las especies químicas y las unidades: PM<sub>2,5</sub>, NO<sub>2</sub>, µg/m<sup>3</sup>;
• <br> para un salto de línea;
• las entidades numéricas (µ = µ) y las cinco canónicas (&, <, >, ", ', más  ).

Todo lo demás sigue viéndose como texto: una etiqueta con atributos, o una etiqueta que no esté en esta lista, ni se interpreta ni se tira. No hay una etiqueta para el color de una palabra suelta: el color se fija en el recuadro.

La casilla es una propiedad de estilo como las demás, así que se hereda: desmarcarla una vez en el diagrama la desmarca en todas partes, que es lo que suele quererse. Los rótulos laterales de las flechas tienen su propia casilla en la tabla de flechas: mientras no se toque, muestra —y sigue— el ajuste del diagrama.

Estilo y herencia

La familia tipográfica, el cuerpo, los colores, el trazo, el radio de las esquinas y las separaciones se fijan en el diagrama y descienden a todo lo que contiene; un nivel o un recuadro redefine solo lo que tiene que cambiar. Por eso conviene fijar primero el diagrama (seleccionándolo en lo alto del árbol) y ajustar después las excepciones.

Los campos de propiedades muestran siempre el valor vigente, sea propio o heredado; tocar uno lo fija en ese nodo. El botón Volver al estilo heredado borra todas las excepciones del nodo seleccionado y lo devuelve a seguir a su padre.

Los tamaños de letra tienen un mando único, en el grupo Tamaños de letra del diagrama: Títulos, Textos y Rótulos laterales. Los textos son el tamaño de base, el que desciende a todo; títulos y rótulos laterales lo siguen mientras su campo esté vacío —los títulos al mismo tamaño, los rótulos laterales a 0,88 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 nivel o un recuadro con un tamaño propio no queda alcanzado: el grupo dice cuántos hay, y el botón Aplicar a todos quita esas excepciones. El título del diagrama sigue siendo 1,35 veces el tamaño de los títulos.

El mismo grupo, con Títulos y Textos, está también en cada nivel y en cada recuadro: vale para él y para todo lo que contiene, y un campo vacío hereda del contenedor, con el valor vigente en gris. Es la manera de dar una sola vez el tamaño a una fila de recuadros: se selecciona el nivel y se escribe el número. También aquí Aplicar a todos quita los tamaños fijados más abajo, pero solo dentro de esa rama.

Para el fondo y el borde, la casilla ninguno los hace transparentes: un recuadro sin uno ni otro se convierte en un simple bloque de texto, que es la manera de colocar un rótulo libre en algún punto del diagrama.

Las muestras que hay bajo Combinaciones de color fijan a la vez el fondo, el borde y el color del texto con una sola pulsación, ya afinados: el borde es la versión saturada del fondo, y el texto sigue siendo legible sobre él —incluida la última, oscura y maciza, que trae consigo el texto blanco. Elegir los dos colores a mano, recuadro tras recuadro, es el camino más corto hacia un diagrama que parece hecho por varias personas.

La alineación vertical decide dónde se sitúa el contenido cuando el recuadro es más alto que lo que guarda, cosa que ocurre continuamente: en una fila, cada recuadro toma la altura del más alto, así que el que tiene una sola línea de texto le sobra sitio. Por omisión es centro; arriba y abajo apoyan el texto contra un borde. La excepción es un contenedor con Llenar la anchura dispuesto en columna, donde el sobrante va a los hijos y no queda nada que mover.

Flechas y rótulos laterales

Toda flecha une dos elementos por identificador: los del árbol, listados en los desplegables De y A. También pueden unirse niveles entre sí, y eso es lo que hacen las flechas del flujo principal. El identificador de lo seleccionado se lee junto a su nombre, arriba de las propiedades, y se cambia en el campo Identificador: las flechas se actualizan solas.

• Trazado automático: la flecha sale del centro del lado que mira al otro elemento y entra por el centro del lado opuesto —de abajo arriba si uno está debajo del otro, de lado si están uno al lado del otro. Si los dos centros no están alineados, hace un codo en el espacio vacío entre los dos; entre filas distintas, en el que precede a la fila de llegada. Varias flechas del mismo lado se reúnen alrededor del centro, en el orden de dónde está el otro extremo, a una distancia que se ajusta en el campo Distancia entre flechas vecinas de las propiedades del diagrama (16 px si no se toca; menos si el lado es corto). Varios codos en el mismo espacio van a alturas distintas, en un orden que evita los cruces. De un nivel cuentan los recuadros que contiene, no toda la anchura del diagrama.
• Recto donde se pueda: el trazado automático de antes. Si los dos elementos están alineados en vertical, la flecha es un segmento vertical en la mitad de la parte que comparten; si están desplazados, un codo entre los dos centros. Sirve cuando muchas flechas llegan al mismo recuadro desde elementos que ya están encima de él: reunidas en el centro formarían un embudo. El ejemplo lo usa para las fuentes.
• Carril a la izquierda o carril a la derecha: la flecha sale de lado, recorre el margen y vuelve a entrar por el mismo lado. Esta es la flecha de retorno —el control de los trabajos, los resultados que vuelven a entrar como datos. Lo que se escriba en la columna Rótulo lateral aparece girado a lo largo del tramo vertical. Varias flechas del mismo lado se colocan en carriles contiguos, y tocan los recuadros en puntos distintos, en el orden en que no se cortan.
• Directa: un segmento de centro a centro, sin codos.

La columna Lectura fija si el rótulo lateral se lee de abajo arriba o de arriba abajo. Con automático vale la convención de los rótulos de eje: de abajo arriba a la izquierda, de arriba abajo a la derecha, de modo que en ambos casos la parte alta de las letras mire hacia fuera del dibujo. La dirección de lectura es independiente del lado: un rótulo de la izquierda puede leerse de arriba abajo sin mover la flecha.

Si una flecha nombra un elemento que ya no existe, la página lo dice en rojo debajo del dibujo y dibuja todo lo demás: una referencia rota no cuesta el trabajo.

Exportar

SVG es el formato preferible: vectorial, con los tipos de letra incorporados, listo para publicación o para un retoque en Inkscape.

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.

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

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 en los huecos entre los bloques, donde se cruzan menos: un recuadro más ancho que la hoja se corta de todos modos. 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.

PNG es para cuando no se acepta el vectorial. El campo ppp fija la resolución: 96 corresponde a lo que se ve en pantalla, 150 va bien para la impresión corriente, 300 es el valor para publicación y para las figuras de un artículo. La resolución se escribe dentro del fichero, de modo que la imagen se coloca en un documento con el tamaño físico correcto en vez de aparecer enorme.

Junto a los mandos del zoom se muestra el tamaño de la hoja en píxeles y en centímetros: la figura en centímetros es el tamaño que el dibujo ocupa en un documento, y no depende de los ppp. Subir los ppp no hace la figura más grande, la hace más nítida. Para cambiar su tamaño hay que trabajar sobre los cuerpos de letra o sobre la anchura fija de la hoja.

Guardar JSON descarga el modelo: es el documento de trabajo, lo único que hay que conservar. Abrir JSON lo vuelve a leer. Ejemplo carga el diagrama de arquitectura, en el idioma de la página, de UISH, útil como punto de partida; Nuevo empieza con uno vacío.

Deshacer, y no perder el trabajo

Las dos flechas curvas de la barra deshacen y rehacen los cambios, también desde el teclado con Ctrl+Z y Ctrl+Y. Se guardan sesenta pasos; una ráfaga de pulsaciones en el mismo campo cuenta como un paso, de modo que deshacer quita la palabra y no la letra. Dentro del editor JSON manda Ace, con un historial propio.

El diagrama vive en el navegador hasta que se descarga, así que hay tres redes de seguridad. Nuevo, Ejemplo y Abrir JSON piden confirmación si hay trabajo sin guardar. Cerrar la pestaña provoca el aviso del navegador. Y con cada cambio se guarda una copia de seguridad en el navegador: si la página se recarga por accidente, al reabrirla una barra amarilla ofrece recuperar ese diagrama o descartarlo —no se carga solo, porque quien llega a la página espera el ejemplo, no el trabajo de hace tres días.

La copia de seguridad vive solo en este ordenador y en este navegador, y es una red, no un archivo: el documento sigue siendo el fichero JSON.

El JSON, para quien prefiera teclear

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

{
  "titolo": "",
  "stile":  { "font": "IBM Plex Sans, Arial, sans-serif", "dim": 13, "raggio": 8,
              "allinea": "centro", "allinea_v": "centro" },
  "pagina": { "sfondo": "#ffffff", "margine": 22, "gap_livelli": 38 },
  "livelli": [
    { "id": "sources", "riempi": true,
      "elementi": [
        { "id": "cams", "testo": "Análisis CAMS\n(modelo europeo)",
          "stile": { "sfondo": "#fde8ef", "bordo": "#b8306a" } }
      ] },
    { "id": "data",
      "elementi": [
        { "id": "gdb", "titolo": "Geodatabase", "riempi": true,
          "elementi": [ { "id": "t1", "testo": "isolíneas" } ] }
      ] }
  ],
  "frecce": [
    { "da": "sources", "a": "data" },
    { "da": "gdb", "a": "cams", "percorso": "destra", "tratto": "tratteggiato",
      "etichetta": "los resultados vuelven como datos", "verso": "giu" }
  ]
}

La clave elementi es la misma a cualquier profundidad: esa es la recursión. Las claves omitidas toman el valor heredado, y un diagrama válido puede tener tres líneas. Pulse Aplicar para llevarlo al dibujo. En el stile del diagrama, dim_titolo y dim_etichetta fijan los tamaños de títulos y rótulos laterales; si se omiten, siguen a dim.

Límites que conviene conocer

• Las flechas no rodean los recuadros: una flecha que salta una fila la atraviesa. Los cruces entre codos en el mismo espacio se evitan siempre que exista un orden sin cruces; para lo demás, la disposición la decide el autor. Si dos flechas se solapan, mueva un recuadro, use un carril lateral o el trazado recto donde se pueda.
• El diagrama no se guarda en el servidor. La copia de seguridad del navegador cubre el descuido (una recarga, una pestaña cerrada por error), pero no es un archivo: vive en esta máquina, borrar los datos del sitio la elimina, y solo hay una —abrir un segundo diagrama ocupa el lugar del primero. El documento sigue siendo el fichero JSON.
• En el árbol, arrastrar funciona solo entre iguales: mover un recuadro dentro de otro contenedor se hace con los botones o en el JSON.
• En el PNG solo se incorporan las cuatro familias autoalojadas (IBM Plex Sans, Nunito, Roboto, JetBrains Mono). Elegir Georgia o Arial deja el resultado en manos de los tipos de letra instalados en quien lo abra: para una figura destinada a publicación, aténgase a las cuatro primeras.