PDF de programación - Lectura 8.1 ¿Cómo dibujar una estructura de datos utilizando Graphviz y su lenguaje DOT?

LECTURA 8.1

¿CÓMO DIBUJAR UNA ESTRUCTURA DE

DATOS UTILIZANDO GRAPHVIZ Y SU

LENGUAJE DOT?

8.9.1 ¿Cómo dibujar una estructura de datos utilizando Graphviz?
Muchos estudiantes de la materia muestran especial interés en mostrar gráficamente
las estructuras de datos en sus aplicaciones; sin embargo, este proceso demanda una
cantidad considerable de tiempo y esfuerzo de programación que puede desviar la
atención del objetivo fundamental del curso. Por esta razón, en esta sección se analiza
una forma de lograrlo sin sacrificar tiempo dedicado en sí a la estructura por medio de
la utilización de un software de libre distribución con este fin: Graphviz y el lenguaje
dot.


8.9.2 Graphviz y el lenguaje dot
Graphviz es un software abierto de libre distribución para graficar, que presenta
información estructural en forma de diagramas y puede aplicarse en diversas áreas
como el análisis de redes, bioinformática, ingeniería de software, bases de datos,
diseño de sitios web, aprendizaje por computadora y tiene interfaces gráficas para
otros dominios.

Su modo de utilización se basa en el diseño de pequeños programas que toman
descripciones de los diagramas de un lenguaje de texto simple y los dibuja en diversos
formatos tales como archivos de imágenes, SVG, PDF ó para desplegarse en
exploradores.

En la práctica, generalmente las gráficas se generan de fuentes de datos externas,
(típicamente mediante el recorrido de la estructura de datos correspondiente) para
crear un programa que pueda ser interpretado y ejecutado por alguno de los
componentes de Graphviz y generar la imagen correspondiente.





Estructuras de Datos Orientadas a Objetos. Pseudocódigo y aplicaciones en C# .NET

8.9.2.1 Un componente de Graphviz: el lenguaje dot
El paquete Graphviz consiste de una variedad de programas para dibujar esquemas,
de las cuales el lenguaje dot es la herramienta principal para dibujar estructuras

jerárquicas o de capas dirigidas que puede ejecutarse como un programa desde la
línea de comandos, servicio de visualización web ó mediante una interfase gráfica
compatible.

Una característica es que contiene diseños de algoritmos bien afinados para colocar
los nodos, bordes, etiquetas, formas, etc. para dibujar estructuras de datos, diseños
jerárquicos y un lenguaje subyacente para manejar herramientas gráficas orientadas a
archivos.

Básicamente dot dibuja figuras con nodos dirigidos mediante líneas ó flechas.

Puede leer archivos de texto que contienen las descripciones de las figuras y crea
imágenes que pueden ser almacenadas en archivos gráficos con diversos formatos
como JPG, GIF, PNG, SVG, PDF, PostScript, etc.


8.9.2.2 Sintaxis de un programa en lenguaje dot
La sintaxis del lenguaje dot tiene una gramática muy completa que permite manipular

varios aspectos de la imagen generada, sin embargo, en esta sección se muestra la
manera más simple de generar una imagen que muestre una estructura de datos. Para
crear un programa en lenguaje dot, basta con escribir un archivo de texto (utilizando
cualquier procesador de textos) y seguir los siguientes pasos:


1.- Definir el tipo y el nombre de la gráfica: En la primera línea se debe colocar el
tipo y el nombre de la figura que se desea graficar. Se pueden nodos unidos mediante
líneas ó flechas dirigidas. Si se desean dibujar nodos unidos mediante flechas se usa el

tipo digraph, en cambio si las relaciones entre los nodos no requieren dirección, se

usa un esquema de tipo graph.


2.- Colocar los nodos y sus relaciones: Después de definir el tipo y nombre de la
figura, las siguientes líneas de código crean los nodos y sus relaciones mediante líneas
ó flechas. Las definiciones de los nodos y sus relaciones se colocan entre los símbolos
{ y }. Un nodo se crea cuando su nombre aparece al principio de la línea y su relación

con otro nodo se genera por medio del operador -> para relaciones dirigidas (con

Lectura 8.1.- ¿Cómo dibujar una estructura de datos utilizando Graphviz y su lenguaje dot?


punta de flecha) ó -- para relaciones no dirigidas (sin punta de flecha). Cuando se

desea etiquetar cada relación con un valor, se coloca la sentencia [label=valor].

Cada definición de los nodos y sus relaciones debe terminar con el símbolo de

puntuación del punto y coma (;).

La Fig. 8.22 muestra un pequeño programa en lenguaje dot que dibuja una

estructura de datos. Esta figura contiene un programa para generar una imagen con un

árbol binario de búsqueda (ABB) llamado Figura cuyos nodos están unidos mediante

flechas (digraph), donde la raíz es el nodo 60 y tiene como hijo izquierdo al nodo 40 y

su hijo derecho es el nodo 90; a su vez el nodo 40 tiene como hijo izquierdo al 34 y
como hijo derecho al 50.


digraph Figura {

Raíz->60;
60->40;
60->90;
40->34;
40->50;



}


Fig. 8.22. Ejemplo de un programa en lenguaje dot para dibujar un ABB.


La Fig. 8.23 muestra la imagen generada con este programa.


Fig. 8.23. Imagen generada con un programa en lenguaje dot.



Estructuras de Datos Orientadas a Objetos. Pseudocódigo y aplicaciones en C# .NET



8.9.2.3 ¿Cómo ejecutar un programa en lenguaje dot?
Para ejecutar un programa en lenguaje dot, es necesario contar con el paquete

Graphviz instalado, el cual puede descargarse de manera gratuita del siguiente sitio:

http://www.graphviz.org/Download.php



Un programa en

lenguaje dot puede ejecutarse desde su editor gráfico

(GVEdit.exe) ó en desde la línea de comandos; sin embargo, en esta sección se

explica ésta última que nos atañe para nuestras necesidades.

Al invocar el interpretador del lenguaje (dot.exe) desde la línea de comandos, se

le pueden proporcionar varios parámetros con funciones específicas. La Fig. 8.24
muestra los principales parámetros.


Parámetro Función

Define el tipo de salida de la imagen de acuerdo a

-T

sus formatos permitidos, p. ejem. jpg, bmp, gif,

svg, png, ps, etc.

Ejemplos

-Tjpg

-Tbmp

-Tgif

-Tps

-O

Genera automáticamente el archivo de salida basado
en el nombre del archivo de entrada y el formato



definido mediante el parámetro -T

Fig. 8.24. Parámetros necesarios para generar un archivo con la imagen en lenguaje dot.



Una vez creado el programa, es necesario ejecutarlo con los parámetros
correspondientes para generar la imagen deseada. P. ejem. suponiendo que el

programa de la Fig. 8.22 se almacena en un archivo de texto llamado Figura (sin

extensión) y desea generar la imagen correspondiente (Fig. 8.23) en un archivo con

formato JPG llamado Figura.jpg, se escribe:



DOT -Tjpg -O Figura



donde se invoca el programa dot.exe y se establecen los parámetros indicados.

Lectura 8.1.- ¿Cómo dibujar una estructura de datos utilizando Graphviz y su lenguaje dot?


8.9.2.4 ¿Cómo generar una imagen desde una aplicación de formas de Windows utilizando un

programa en lenguaje dot?

Como se puede apreciar, es sumamente sencillo generar imágenes utilizando el
lenguaje dot de Graphviz, basta con generar el programa en un archivo de texto con los

nodos y sus relaciones y ejecutarlo para generar una imagen en un formato definido, la
cual se puede desplegar en una forma de Windows mediante un PictureBox. Para ello,

se agregan métodos a la clase de la estructura deseada de la aplicación de formas de
Windows para que permita realizar estas operaciones.



8.9.3 Representación de las clases
Para crear el programa en lenguaje dot, ejecutarlo para generar un archivo con la

imagen de la estructura de datos deseada y mostrarla en una forma de Windows, se
crea una nueva clase (en este ejemplo se dibuja un árbol binario de búsqueda

utilizando una clase llamada ClaseABB; sin embargo, puede aplicarse a cualquier

estructura de datos) que contiene

los métodos CrearArchivoDot() y

RecorrerNodos() y hereda los atributos, métodos y propiedades de la estructura de

datos deseada de la aplicación de formas de Windows resultando las clases mostradas
en la Fig. 8.25.


Estructuras de Datos Orientadas a Objetos. Pseudocódigo y aplicaciones en C# .NET

Fig. 8.25. La ClaseABB que permite dibujar utilizando el lenguaje dot.



En virtud de que la ClaseArbolBinarioBusqueda es igual que en la aplicación

de consola (explicada previamente en el capítulo 8) y por lo tanto las operaciones son

las mismas, centraremos la atención en el diseño de esta nueva ClaseABB.

La declaración de la ClaseABB en C# se almacena en un archivo de clase llamado

ClaseABB.cs cuya codificación se muestra a continuación:

Prog. 8.2 a) Declaración de la clase del ABB (ClaseABB.cs).

class ClaseABB: ClaseArbolBinarioBusqueda // ClaseABB hereda de
ClaseArbolBinarioBusqueda
{
private void RecorrerNodos(ClaseNodoArbolBinarioBusqueda NodoActual, ref string
Resultado)
{
if (NodoActual != null)
{
if (NodoActual.HijoIzq != null)
Resultado = Resultado + "\n" + NodoActual.Dato.ToString() + "->" +
NodoActual.HijoIzq.Dato.ToString() + ";";

if (NodoActual.HijoDer != null)
Resultado = Resultado + "\n" + NodoActual.Dato.ToString() + "->" +
NodoActual.HijoDer.Dato.ToString() + ";";

RecorrerNodos(NodoActual.HijoIzq, ref Resultado); // Llamada recursiva
para recorrer el subárbol izquierdo

RecorrerNodos(NodoActual.HijoDer, ref Resultado); // Llamada recursi