Creando diagramas desde texto plano
author: Hugo Ruscitti fecha: Agosto 2010
En este artículo veremos una forma alternativa de crear diagramas sencillos usando archivos de texto plano.
También veremos cómo configurar el editor de textos VIM para que podamos dibujar diagramas directamente desde el editor.
Este artículo es útil para programadores y equipos de documentación, donde se trabaja principalmente con texto y se necesita representar ideas o conceptos usando gráficos.
¿Que es ditaa?
Ditta es una utilidad de linea de comandos que te permite crear imágenes de diagramas a partir de texto plano.
Esto te facilita mucho la creación de diagramas simples, por ejemplo en sistemas de wiki, documentación en texto plano o directamente en comentarios de tu código fuente.
Un diagrama de ditaa se ve de la siguientes manera:
+--------------+
Text file ----->| |
+--------------+
y que luego de la conversión se verá así:
Invocando al comando ditaa, un ejemplo
Para comenzar utilicemos el ejemplo mas sencillo, un archivo de texto llamado caja.ditaa con el siguiente contenido:
+------+ | | +------+
Ahora, para generar el gráfico podemos usar el comando:
ditaa caja.ditaa
y se generará el archivo caja.png correspondiente a nuestro diagrama.
Sintáxis
Veamos alguno de los componentes que se pueden dibujar con ditaa.
Formas
Las formas mas comunes de podemos utilizar son las cajas, ya sea con esquinas rectas o redondeadas:
+------+ | | +------+ /------\ | | \------/
Atributos y tags
También se pueden crear otras figuras frecuentes en los diagramas de sistemas, la única diferencia aquí es que se debe especificar la figura entre llaves { }:
+-----+
| {s} |
+-----+
+------+
| {io} |
+------+
+------+
| {d} |
+------+
Colores
Se tiene que incluir una nota dentro de la figura.
Hay varios colores predeterminados como cRed e incluso personalizados como c1AB donde los últimos 3 caracteres son las componentes rojo, verde y azúl en hexadecimal.
Veamos un ejemplo:
+------------------+ | ¡Hola! | +------------------+ +------------------+ | cRED ¡Hola! | +------------------+ +------------------+ | c1AB ¡Hola! | +------------------+
y el resultado de convertirlo con ditaa mensajes.txt es:
Flechas
Las fechas se generan principalmente usando guiones y paréntesis angulares.
--> <-- | V ^ |
Aunque también puedes hacer que las lineas sean punteadas agregando el caracter = en las lineas horizontales y : en las verticales:
a -=---> b
c
:
|
+--> d
Marcas especiales
También podemos señalizar puntos de control mediante asteriscos. Útiles para señalar conexiones entre cajas y lineas.
+---*----+
| |
+-----*--+
|
<-*---*
Figuras personalizadas
ditaa logra interpretar las figuras que le presentemos, y por defecto intenta separarlas en cajas individuales.
Permitiendo dibujar tablas o incluso vectores:
+-----+ | A | +-----+ | B | +-----+ | C | +-----+
Drawit, dibujando diagramas desde VIM
Para simplificar las creación de estos diagramas podemos usar un complemento para el editor de textos VIM.
El complemento en cuestión se llama drawit, y se puede descargar desde la siguiente web:
o directamente desde el sitio de plugins de vim.org:
Una vez que has descargado el archivo DrawIt.vba, tienes que abrirlo con vim y luego ejecutar el comando :source %.
Los archivos vba son archivadores de complementos para vim.
Comandos básicos
Una vez que has instalado el complemento tu editor de textos tendrá un nuevo modo de dibujado. Para entrar y salir de este modo tienes que usar los comandos:
- di Para iniciar el modo de dibujado.
- ds Para terminar el modo de dibujado.
Una vez que inicias el modo de dibujado puedes usar los direccionales del teclado para dibujar lineas. Y si quieres moverte por el documento pero sin dibujar puedes usar las teclas hjlk habituales.
Esto facilita mucho la creación de diagramas un poco mas complejos, como el siguiente:
que genera la siguiente imagen:
Dibujando con bloques
Para crear bloques se puede usar directamente el mouse, seleccionar un bloque y luego pulsar el comando \b.
Algo similar se puede hacer con elipses, solo use e luego de seleccionar una región.
Si no quieres usar el mouse, el modo de selección de bloques en VIM se puede activar con las teclas ctrl + v.
Conclusión
Ditaa es una herramienta útil a tener en cuenta cuando explicamos ideas en archivos de texto. Un escenario habitual para programadores y administradores de sistemas.
