Curso emacs 20. Gráficos con org-mode (ditaa y plantuml)

En esta entrega veremos como crear gráficos con org-mode para que al exportar a html se vean aparentes. En primer lugar, caso de no tenerla instalada, instalamos la aplicación ditaa (apt-get install ditaa), aplicación que transforma caracteres ascii en mapas de bips. Una vez instalado en el sistema, abrimos emacs y visualizamos su página man:

M-x man RET ditaa

Si queremos ver las páginas man con algunos colorines, añadimos al archivo de configuración .emacs las lineas (Los colores, como es natural, al gusto del interesado):

(set-face-attribute 'Man-overstrike nil :inherit 'bold :foreground "orange red")
(set-face-attribute 'Man-underline nil :inherit 'underline :foreground "forest green")

Ditaa también puede usar por terminal:

Naturalmente nosotros la usaremos en org-mode. Tambien descargamos plantuml.jar (http://plantuml.com/download) y lo colocamos, por ejemplo, en /opt/plantuml.jar. Realizamos unos ajustes en el archivo de configuración .emacs para indicarle donde están los ejecutables, ya que por defecto en mi Debian testing busca ditaa en /usr/share/emacs/25.1/lisp/contrib/scripts/ditaa.jar y plantuml en la sierra de Gredos, añadiendo las lineas:

;;; Crear gráficos con org-mode con ditaa y plantuml
(setq org-plantuml-jar-path
      (expand-file-name "/opt/plantuml.jar"))
;
(setq org-ditaa-jar-path "/usr/bin/ditaa")
;

Asegurarse de que la ruta especificada en org-ditaa-jar-patch sea la correcta (whereis ditaa). En el caso de plantuml, si bien también lo tengo instalado en el sistema (apt-get install plantuml) he tenido que bajar el .jar porque no me pillaba el ejecutable situado en /usr/bin/plantuml. A continuación incluir ditaa y plantuml en org-babel-do-load-languages para que resuelvan los caracteres:

(org-babel-do-load-languages
 'org-babel-load-languages
 '((emacs-lisp . t)
   (latex . t)
   (python . t)
   (shell . t)
   (ditaa . t)
   (plantuml . t)
   (sh . t)))

Recargamos la configuración de emacs con M-x eval-buffer o reiniciándolo y empezamos por crear un directorio de trabajo con dos subdirectorios, uno para las plantillas css y el otro para las imágenes:

$ mkdir -p org/{css,images}
$ touch org/pagina.org

De tal manera que el arbol del directorio nos quede:

$ tree org
org
├── css
├── images
└── pagina.org

2 directories, 1 file

Descargamos un paquete de plantillas css de css.tar , que es recopilación de varios lugares (https://github.com/dakrone/dakrone.github.com , https://github.com/fniessen/org-html-themes , http://thomasf.github.io/solarized-css/ , https://raw.githubusercontent.com/orderedlist/modernist/master/stylesheets/styles.css , http://nklein.com/2010/05/org-mode-css/ ). Pedimos indulgencia por las chapucillas que contienen, las tenemos en proceso de revisión pero las cosas no van lo rápido que desearíamos. Como muestras ya nos sirven. Las copiamos en org/css. También descargamos el paquete de imágenes que usamos en este post por si se van copipasteando los codigos en el archivo pagina.org de imagenes.tar y las copiamos en el directorio images

Abrimos pagina.org:

C-x C-f org/pagina.org

Y colocamos un encabezado mínimo: Título y un archivo css, useremos la plantilla org5.css así podremos ir cambiando de plantilla solo cambiando el digito (2) por el que deseemos para ir probandolas todas de forma fácil y rápida:

#+TITLE: GRAFICOS CON ORG-MODE
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="./css/org2.css"/>

Y copia/pasteamos:

#+begin_src ditaa :file ditaa1.png

+-------+   +--------+   +--------------+   +-------+
|{io}   |   |{d}     |   |{s}           |   |cBLU   |
| Nacer +-->+ Crecer +-->+ Reproducirse +-->+ Morir |
| c1BA  |   |        |   |              |   |       |
+-------+   +--------+   +-------+------+   +-------+
              |
              |
           /--+--\             +--------+
           | c2BA|             | c1AB   |         /=\
           | GNU +------+----->+  Vida  |-------> |∞|
           \-----/             | eterna |         \-/
                               +--------+

#+end_src

Pulsamos:

C-c C-e h h

Figure 3: Evaluate?

Pulsamos “y” y nos creará el archivo ditaa1.png y pagina.html en el directorio org.

Figure 4: pagina.html

$ tree org
org
├── css
│   ├── org10.css
│   ├── org11.css
│   ├── org12.css
│   ├── org13.css
     ...
│   ├── org7.css
│   ├── org8.css
│   ├── org9.css
│   └── org.css
├── ditaa1.png
├── imagenes
│   ├── 20-0.png
│   ├── 20-10.png
     ...
│   ├── 20-8.png
│   └── 20-9.png
├── pagina.html
└── pagina.org

2 directories, 33 files

Visualizamos en el navegador org/pagina.html

Figure 5: resultado

Veamos varios ejemplos con sus respectivos resultados que podemos ir copipasteando en nuestro archivo pagina.org

NOTA: Si no queremos que nos pida confirmación por cada grafico siempre podemos incluir en .emacs la linea:

;;; Para que no pregunte si queremos evaluar la expresión de org-babel
(setq org-confirm-babel-evaluate nil)

También podemos pasar un argumento a ditaa, en este caso, para que las esquinas sean redondeadas (:cmdline -r):

#+begin_src ditaa :file ditaa.png :cmdline -r
+-------------------+
|                   |
|      Distros      |
|                   |
+---------+---------+
| Linux   |  GNU    |
|         | cRED    |
+---------+---------+
#+end_src

O que las esquinas sean redondeadas usando los caracteres “\” y “/”:

#+begin_src ditaa :file ditaa2.png
/-----------------\
| Algunas Distros |
| cGRE            |
| - Debian        |
| - Arch          |
| - Ubuntu        |
| - Fedora        |
\-----------------/
#+end_src

Las figuras geométricas que contienen el texto han de estar cerradas usando los caracteres permitidos (-,=,|,/,\,:,<,>,^) Los : y el = son equivalentes y solo colocando uno de estos signos en algún lugar de la figura, la mostrará punteada.

#+begin_src ditaa :file ditaa3.png
/--------=-------------------\
| Linux es un sistema genial |
\----------------------------/
#+end_src

#+begin_src ditaa :file ditaa4.png
Algunos colores
/--------------+--------------\
|cYEL Debian   |cPNK Ubuntu   |
+--------------+--------------+
|cBLK Arch     |cBLU Mint     |
+--------------+--------------+
|c96C Mageia   |c0F0 Tails    |
+--------------+--------------+
|cGRE Fedora   |cRED Suse     |
\--------------+--------------/
#+end_src

Tenemos 3 figuras más a nuestra disposición usando las llaves ({d}, {s} y {io})

#+begin_src ditaa :file ditaa5.png
+----------+  +---------+  +----------+
|{d} cRED  |  |{s} cBLU |  |{io} cPNK |
|          |  |         |  |          |
|  Linux   |  |   es    |  | genial   |
|          |  |         |  |          |
+----------+  +---------+  +----------+
#+end_src

Usando flechas:

#+begin_src ditaa :file ditaa7.png
    +--------+   +--------+    +-------+
    |        | --+ Debian +--> |       |
    | Linux  |   +--------+    |  Dios |
    |  GNU   |   |  Arch  |    |       |
    |     {d}| --+ cRED   +--> | cYEL  |
    +---+----+   +--------+    +-------+
        :                            ^
        |    Camino a la perfección  |
        +----------------------------+
#+end_src

Otros colores permitidos: 789, 000, 222, 333, 555, 666, 777, 888, 999, BBB, CCC, DDD, EEE, ABC, 9CF, BFF, 026, 369, 39C, 69C, 00F, 0FF, 0EE, 0F0, C33, F00, F0F, FBF, 96C, FFF, FF0, C90

Los graficos con ditaa son bastante simples de confeccionar. Plantuml se usa para gráficos más complejos y la verdad yo no lo he precisado nunca, pero me ha parecido interesante, a modo de ejemplo, poner un trozo de código sacado de la web para ver si alguien se anima con él:

Felices orgasmos con emacs. Y recuerda que en http://lapipaplena.org/emacs/ tienes la versión html directa de org-mode y el archivo org se puede descargar de http://www.lapipaplena.org/emacs/curs_emacs.org

 

Share

8 comments

  1. :o !

    No doy crédito, dejo esto unos días y ala! más que aprender, gracias.

  2. Daniel dice:

    una pregunta quisa tonta.

    como actualizo mi emacs?
    tengo la version 24, no he encontrado como actualizarla

  3. Lurkan dice:

    Sabes si funciona al convertir en PDF.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *