Usar Graphviz para generar Slides
index | OSiUX | archive | charlas | docs | links
dot
|
git
|
img
|
plt
|
tty
|
uml
Hace años que utilizo Graphviz 1 cada vez que puedo y ayer
en Nerdearla 2 generé videos e imágenes para la charla
Cómo migrar 6300 equipos a GNU/Linux usando Ansible y AWX
3
dot2png
En lugar de dibujar, se escribe código en lenguaje DOT
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!
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!
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!
timeline2dot
dot2mp4
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.
demasiados pixels
Graphviz suele generar imágenes extremadamente grandes, que luego muy pocos visores pueden mostrar sin colgarse.
Una estrategia es reducir la resolución definiendo:
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, permite hacer zoom y
soporta imágenes grandes sin colgarse.
deep zoom
En la búsqueda por no perder calidad y poder navegar el grafo de
Filiales GNU/Linux
6 me topé con algo genial, se llama
OpenSeaDragon
7 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
8,
un script Python que toma la imagen .png
y la divide en partes.
También podés leer
ChangeLog
2023-05-05 15:33
corregir DESCRIPTION en Usar Graphviz para generar Slides2023-05-05 13:47
agregar DESCRIPTION y KEYWORDS en /Usar GraphViz para generar slides2022-11-13 20:39
agregar y actualizar tags OpenGraph2022-10-26 17:35
agregarUsar Graphviz para generar Slides