Configurar Emacs para creación de Graficos
1. Introducción
Uno de los grandes poderes ocultos de Emacs y Org Mode es su capacidad para generar gráficos directamente desde el texto. Esta funcionalidad permite a los usuarios crear visualizaciones sofisticadas sin salir de su editor, manteniendo todo el contenido en archivos de texto plano que son fáciles de versionar y mantener.
En este tutorial, exploraremos cómo configurar Emacs para trabajar con diferentes tipos de gráficos directamente desde Org Mode, incluyendo:
- Gnuplot para gráficos científicos y estadísticos
- Ditaa para diagramas ASCII
- Graphviz (DOT) para diagramas estructurales
- PlantUML para diagramas UML
Al final de este tutorial, podrás integrar gráficos impresionantes en tus documentos de Org Mode que se exportarán perfectamente a HTML, PDF y otros formatos.
2. Requisitos previos
Antes de comenzar, asegúrate de tener instalado:
- Emacs (versión 27.1 o superior recomendada)
- Org Mode (versión 9.4 o superior)
- Los programas externos correspondientes para cada tipo de gráfico
3. Configuración básica de Org Babel
Lo primero que necesitamos es configurar Org Babel para permitir la ejecución de bloques de código que generarán nuestros gráficos. Añade este código a tu init.el o .emacs:
;; Activar Org Babel para los lenguajes que usaremos (with-eval-after-load 'org (org-babel-do-load-languages 'org-babel-load-languages '((emacs-lisp . t) (gnuplot . t) (ditaa . t) (dot . t) (plantuml . t) (mermaid . t)))) ;; No pedir confirmación al ejecutar bloques de código (setq org-confirm-babel-evaluate nil)
4. Configuración de Gnuplot
Gnuplot es una herramienta potente para generar gráficos científicos y estadísticos.
4.1. Instalación
En sistemas basados en Debian/Ubuntu:
sudo apt-get install gnuplot
En macOS con Homebrew:
brew install gnuplot
4.2. Configuración en Emacs
Instala el paquete gnuplot-mode usando package.el:
(use-package gnuplot :ensure t)
4.3. Ejemplo de uso
Crea un bloque de código en tu archivo Org Mode:
#+BEGIN_SRC gnuplot :file ./images/seno-coseno.png :exports both set terminal pngcairo size 800,600 enhanced font "Arial,12" set title "Funciones seno y coseno" set xlabel "x" set ylabel "y" set grid set key right bottom plot sin(x) title "sin(x)" with lines linewidth 2, \ cos(x) title "cos(x)" with lines linewidth 2 linecolor rgb "red" #+END_SRC
Al ejecutar este bloque (con C-c C-c), obtendrás una imagen como esta:
5. Configuración de Ditaa
Ditaa convierte diagramas ASCII en imágenes.
5.1. Instalación
En sistemas basados en Debian/Ubuntu:
sudo apt-get install ditaa
En macOS con Homebrew:
brew install ditaa
5.2. Configuración en Emacs
Debes especificar la ruta al ejecutable de ditaa:
(setq org-ditaa-jar-path "/usr/share/ditaa/ditaa.jar") ;; Ajusta esta ruta según tu sistema
5.3. Ejemplo de uso
#+BEGIN_SRC ditaa :file ./images/diagrama-sistema.png :exports both +---------------+ +---------------+ | | | | | Frontend +------->+ API Gateway | | (React) | | (Node.js) | | | | | +-------+-------+ +-------+-------+ ^ | | v | +-------+-------+ | | | +----------------+ Database | | (PostgreSQL) | | | +---------------+ #+END_SRC
Esto generará un diagrama como:
6. Configuración de Graphviz (DOT)
Graphviz es excelente para crear diagramas estructurales, como árboles y grafos.
6.1. Instalación
En sistemas basados en Debian/Ubuntu:
sudo apt-get install graphviz
En macOS con Homebrew:
brew install graphviz
6.2. Configuración en Emacs
No se requiere configuración adicional si Graphviz está en tu PATH.
6.3. Ejemplo de uso
#+BEGIN_SRC dot :file ./images/arbol-decisiones.png :exports both digraph G { node [shape=box, style="rounded,filled", fillcolor=lightblue]; A [label="¿Llueve?"]; B [label="Llevar paraguas"]; C [label="¿Hace frío?"]; D [label="Llevar abrigo"]; E [label="Llevar chaqueta ligera"]; A -> B [label="Sí"]; A -> C [label="No"]; C -> D [label="Sí"]; C -> E [label="No"]; } #+END_SRC
Generará:
7. Configuración de PlantUML
PlantUML es una herramienta para crear diagramas UML a partir de texto.
7.1. Instalación
PlantUML requiere Java y Graphviz:
# Para Debian/Ubuntu sudo apt-get install default-jre graphviz # Descargar PlantUML wget https://sourceforge.net/projects/plantuml/files/plantuml.jar
7.2. Configuración en Emacs
(setq org-plantuml-jar-path "~/ruta/a/plantuml.jar") ;; Ajusta esta ruta
7.3. Ejemplo de uso
#+BEGIN_SRC plantuml :file ./images/diagrama-clases.png :exports both @startuml class Usuario { -id: int -nombre: String -email: String +login(): boolean +logout(): void } class Producto { -id: int -nombre: String -precio: float +aplicarDescuento(porcentaje: float): void } class Carrito { -items: List<Producto> +agregarProducto(p: Producto): void +eliminarProducto(id: int): void +calcularTotal(): float } Usuario "1" -- "0..*" Carrito : tiene > Carrito "1" o-- "0..*" Producto : contiene > @enduml #+END_SRC
Generará:
8. Configuración de Mermaid
Mermaid es una herramienta moderna para crear diagramas de flujo, secuencia, Gantt y más.
8.1. Instalación
Mermaid requiere Node.js:
# Instalar mermaid-cli globalmente npm install -g @mermaid-js/mermaid-cli
8.2. Configuración en Emacs
Primero, instala el paquete ob-mermaid:
(use-package ob-mermaid :ensure t :config (setq ob-mermaid-cli-path "/usr/local/bin/mmdc")) ;; Ajusta según tu instalación
8.3. Ejemplo de uso
#+BEGIN_SRC mermaid :file ./images/flujo-trabajo.png :exports both flowchart TD A[Inicio] --> B{¿Es un bug?} B -->|Sí| C[Reportar en JIRA] B -->|No| D{¿Es una característica nueva?} C --> E[Asignar desarrollador] D -->|Sí| F[Crear propuesta] D -->|No| G[Documentar como mejora] F --> H[Revisión por el equipo] G --> H E --> I[Desarrollo] H --> I I --> J[Testing] J --> K{¿Pasa todos los tests?} K -->|No| I K -->|Sí| L[Despliegue] L --> M[Fin] #+END_SRC
9. Integración con org-static-blog
Para utilizar estos gráficos en tu blog creado con org-static-blog, asegúrate de:
- Crear una estructura de directorios adecuada para tus imágenes:
mkdir -p ~/ruta/a/tu/blog/images/
- Configurar
org-static-blogpara copiar las imágenes al generar el sitio:
(use-package org-static-blog :ensure t :config (setq org-static-blog-publish-title "Emacs con Esteroides") ;; Otras configuraciones... ;; Importante: configurar para que copie las imágenes (setq org-static-blog-publish-url "https://tu-dominio.com/") (setq org-static-blog-publish-directory "~/ruta/al/directorio/público/") (setq org-static-blog-posts-directory "~/ruta/a/tus/posts/") (setq org-static-blog-drafts-directory "~/ruta/a/tus/borradores/") (setq org-static-blog-enable-tags t) ;; Copiar directorio de imágenes al publicar (defun copy-images-after-publish () (copy-directory "~/ruta/a/tu/blog/images/" (concat org-static-blog-publish-directory "/images/") t t t)) (add-hook 'org-static-blog-publish-after-hook 'copy-images-after-publish))
- Referencia las imágenes correctamente en tus posts de Org Mode:
10. Consejos avanzados
10.1. Ejecutar bloques automáticamente al exportar
Para asegurarte de que los gráficos siempre estén actualizados al exportar:
(setq org-export-babel-evaluate t)
10.2. Caché de resultados
Para evitar regenerar gráficos que no han cambiado:
#+BEGIN_SRC gnuplot :file ./images/grafico.png :exports both :cache yes ;; Código del gráfico #+END_SRC
10.3. Personalización de estilos
Crea un archivo .gnuplot en tu directorio home para personalizar estilos globales:
11. Conclusión
Con estas configuraciones, has convertido tu Emacs en una potente herramienta para la creación de gráficos y diagramas integrados directamente en tus documentos de Org Mode. Esta capacidad es especialmente útil para blogs técnicos como "Emacs con Esteroides", permitiéndote mantener todo tu contenido, incluidos los gráficos, como texto plano versionable.
La combinación de Org Mode con herramientas como Gnuplot, Ditaa, Graphviz, PlantUML y Mermaid te da un control sin precedentes sobre tus visualizaciones, sin necesidad de recurrir a programas externos complejos o formatos binarios que dificultan el versionado.
¿Qué gráficos crearás para tu próximo artículo?