Github y Graphviz: insertar diagramas simples sin tocar el mouse

Graphviz + Gravizo + Markdown = Diagramas en Github!

Hollywood muestra hackers tecleando frenéticamente mientras el trackpad o el mouse se mantienen virginales. Suele ser ridículo, pero algo es cierto: nos gusta actuar con código, shortcut keys y teclado. El mouse no siempre es nuestro amigo. Por eso algunos abandonamos herramientas como Visio y LucidCharts, a cambio de Graphviz.

Código Graphviz

La documentación es un buen lugar donde colocar diagramas y puede que ya estés sacando a relucir tus habilidades con Graphviz para ello. Pero hay un problema: renderizar, corregir, volver a renderizar… guardar la imagen, insertarla … es tedioso ¡Gravizo + Markdown al rescate!

Gravizo

Gravizo: un servicio web para renderizar código Graphiz

Gravizo es simple: le das una URL con código graphviz y te entrega el diagrama resultante (como imagen).

Ejemplo:

http://gravizo.com/g?digraph mygraph { rankdir=LR; fear->anger->"dark side" }

El resultado es:

Nota: evité encodear la URL (ej: %20 para los espacios), pero en ciertos casos puede ser necesario, para mayor compatibilidad.

Markdown

Markdown es capaz de insertar una imagen desde una URL en el documento que se está redactando. Entonces, podemos usar la URL de Gravizo para insertar nuestro diagrama:

![My Graph](http://gravizo.com/g?digraph mygraph { rankdir=LR; fear->anger->"dark side" })

Ahora la guinda de la torta:

Github

Github permite usar markdown en prácticamente cualquier textarea: descripciones de issues y pull requests; comentarios; notas en líneas de código; etc.

Cuando quieras insertar un diagrama, usa lo aprendido hoy:

Al presionar “Preview”:

Limitante: largo de la URL

El código graphviz debe tener menos de 2.000 caracteres. Esto puede dejar fuera diagramas complejos (este es el más extenso que he renderizado con gravizo: https://gist.github.com/tgirardi/f048238972220accd724).

Otras incompatibilidades: http://www.gravizo.com/#incompatibilities

Nota: Hace poco postié un Issue en el proyecto de Gravizo que postula la idea de usar un Gist como fuente del código graphviz. Esto resolvería dicha limitante y facilitaría el trabajo colaborativo. Puedes hacer +1 o comentar aquí: https://github.com/TLmaK0/gravizo/issues/6


¿Like? Puedes seguirme aquí (en Medium) o en twitter @1024ktips para más tips de programación y administración de sistemas.