Excalidraw en Obsidian: Diagramas dibujados a mano en tus notas

Como se mencionó antes, los archivos Canvas están en formato .canvas y existen separados de los archivos .md: deben gestionarse de forma independiente y no se pueden combinar con notas en el mismo archivo. Este capítulo presenta una herramienta que soluciona este problema: el plugin Excalidraw.

¿Qué es Excalidraw y en qué se diferencia de Canvas?

¿Qué es Excalidraw?

Excalidraw es una herramienta de dibujo en línea gratuita y de código abierto que tiene una versión web independiente (excalidraw.com) que puedes usar directamente en tu navegador sin necesidad de registrarte. Su estilo de dibujo a mano es perfecto para diagramas de flujo, mapas mentales, diagramas de arquitectura y contenido similar.

En Obsidian, usamos la versión del plugin de terceros, mantenida por desarrolladores de la comunidad, no oficialmente por Obsidian, por lo que debe instalarse manualmente. Las funciones principales son las mismas que la versión web, pero con integración adicional profunda con Obsidian.

Diferencias con Canvas

Ambos parecen “dibujar sobre un lienzo”, pero el formato de archivo es completamente diferente, que es la diferencia fundamental:

• Canvas: genera un archivo .canvas. Es un archivo JSON independiente que existe por separado de tus notas .md y debe gestionarse de forma independiente.
• Excalidraw: los datos del dibujo se pueden comprimir e incrustar al final de un archivo .md: un solo archivo, texto y dibujo coexisten, sin necesidad de gestión separada.

Las dos capturas de pantalla a continuación son del mismo archivo:

Por eso recomiendo Excalidraw: cuando abres un archivo, ves el texto; con un interruptor, ves el dibujo. Ambos tipos de contenido en un solo lugar.

Instalación del plugin Excalidraw

Excalidraw es un plugin de terceros y debe instalarse manualmente.

Ruta: Ajustes → Plugins de terceros → Plugins de la comunidad → Buscar “Excalidraw” → Instalar → Activar

Después de la instalación, activa el plugin y verás un icono de Excalidraw en la barra lateral izquierda.

Crear y usar Excalidraw

Cómo crear un nuevo archivo

Hay dos formas:

1. Paleta de comandos: Cmd+P (Mac) o Ctrl+P (Windows), busca “Excalidraw: Nuevo dibujo”, presiona Enter.
2. Barra lateral izquierda: haz clic en el icono de Excalidraw para crear uno nuevo directamente.

De forma predeterminada, un nuevo archivo se crea como .excalidraw (no .md). No te preocupes: cómo hacer que forme parte de un archivo .md es el tema central de la sección “Dos en uno” más adelante.

Operaciones comunes y atajos

En la barra de herramientas de Excalidraw, cada herramienta tiene un número que se muestra debajo: ese es el atajo de teclado. Presiona el número para cambiar de herramienta directamente sin hacer clic en la barra:

Una característica adicional en comparación con Canvas: Excalidraw tiene una herramienta Mano alzada dedicada (atajo 7) que te permite dibujar libremente con el ratón o el trackpad, algo que Canvas no puede hacer.

Flujo de trabajo con teclado: dibujar sin soltar el teclado

Excalidraw también admite un flujo de trabajo puro con teclado, ideal para crear nodos rápidamente, conectarlos y escribir contenido:

Navegación básica (en modo Selección):

Agregar contenido al lienzo

Formas y texto: selecciona una forma de la barra de herramientas y haz clic en el lienzo para dibujarla. Con la herramienta de texto, haz clic y empieza a escribir: se admite chino.

Conexiones con flechas: cuando un rectángulo está seleccionado, al pasar el ratón por su borde aparecen puntos de conexión verdes. Arrastra una flecha desde uno de estos puntos a otra forma y encajará en su lugar.

Notas existentes: arrastra notas directamente desde el árbol de archivos de Obsidian al lienzo de Excalidraw; se incrustarán como tarjetas de vista previa de notas.

Imágenes: arrastra archivos de imagen al lienzo para mostrarlos directamente.

¡Punto clave! Dibujar Excalidraw con IA

De manera similar a la sección “Dibujar Canvas con IA” anterior, Excalidraw también se puede generar directamente con Claude Code.

Contexto

Hemos presentado anteriormente Claude Code y el sistema de Skills. Canvas usa la Skill json-canvas, y Excalidraw también tiene una Skill dedicada: excalidraw-diagram. Por supuesto, hay muchos MCP y Skills sobre Excalidraw; puedes elegir lo que necesites.

Fue creada por axtonliu y es de código abierto en GitHub:

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

Después de descargarla, colócala en el directorio ~/.claude/skills/, igual que las otras Skills.

Esta Skill genera archivos .excalidraw independientes, adecuados para escenarios donde solo necesitas el dibujo y no quieres mezclarlo con el texto de la nota.

Si deseas incrustar el dibujo directamente dentro de un archivo .md (el formato dos en uno que se describe más adelante), he escrito una Skill extendida: obsidian-excalidraw, específicamente para este propósito: el resultado se comprime y se incrusta al final del archivo .md, sin crear archivos adicionales. Las dos Skills tienen diferentes propósitos; elige según lo que necesites.

Cómo usar

En Claude Code, escribe /excalidraw-diagram, selecciona esta Skill, presiona Tabulador, luego describe lo que quieres dibujar. Claude Code generará el archivo Excalidraw correspondiente.

Demostración en vivo

Usé el contenido de este capítulo como demostración: le dije a Claude Code: “Dibuja un diagrama de flujo de la estructura de capítulos de este contenido de Excalidraw, mostrando las relaciones entre las secciones.”

Claude Code leyó el contenido y generó automáticamente un diagrama de estructura, incrustado directamente al final del archivo .md. Cambia al modo Excalidraw para verlo. No es necesario arrastrar nodos manualmente ni conectar líneas: mucho más rápido que dibujar a mano.

¡Punto clave! Incrustar Excalidraw en archivos .md (Dos en uno)

Seamos claros: de forma predeterminada, el plugin Excalidraw crea archivos .excalidraw, que están separados de los archivos .md y deben gestionarse de forma independiente, al igual que Canvas.

La función “dos en uno” no es el comportamiento predeterminado; requiere configuración adicional. Una vez configurada, los nuevos archivos estarán en formato .md, con los datos del dibujo comprimidos y almacenados al final del archivo, de modo que ambos coexistan en el mismo archivo.

Canvas no puede hacer esto, pero Excalidraw sí: después de la configuración, el mismo archivo .md puede servir tanto como nota normal como tablero de dibujo, todo en un solo archivo. Esta es la parte más valiosa de este artículo.

A continuación, lo he dividido en 5 pasos.

5.1 Dos propiedades clave

Los lectores observadores ya habrán visto estas dos propiedades de frontmatter en mis capturas de pantalla anteriores:

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed: le dice al plugin Excalidraw que este archivo .md contiene datos de Excalidraw que deben analizarse. Sin esta propiedad, el plugin no procesará el archivo.

excalidraw-open-md: true: abre el archivo en modo Markdown de forma predeterminada (en lugar de entrar directamente al modo de dibujo). Si se establece en true, verás el texto primero al abrir el archivo y cambiarás manualmente cuando necesites dibujar. Sin ella, cada vez que abras el archivo, saltará directamente al tablero de dibujo y tendrías que volver a cambiar para leer el texto, algo molesto.

Con estas dos propiedades en el frontmatter, el archivo obtiene la capacidad de “modo dual”.

5.2 Crear un archivo de plantilla

La clave para la configuración dos en uno es guardar esta configuración en un archivo de plantilla, para que las nuevas notas la incluyan automáticamente sin tener que agregarla manualmente cada vez.

Pasos:

1. En tu carpeta de plantillas (por ejemplo, 02 Templates/), crea un nuevo archivo .md y nómbralo “Plantilla Excalidraw”.
2. Copia y pega el siguiente contenido en él, luego guárdalo.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Dibujo
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

Esta es una plantilla de Excalidraw con un lienzo vacío. Las dos propiedades de frontmatter (excalidraw-plugin: parsed y excalidraw-open-md: true) le indican al plugin que este archivo está en formato dos en uno y debe abrirse en modo Markdown de forma predeterminada. El compressed-json al final son los datos del lienzo vacío.

5.3 Configuración del plugin Excalidraw

Tener un archivo de plantilla no es suficiente; también debes decirle al plugin Excalidraw “dónde encontrar la plantilla” y desactivar una configuración que interfiere con la gestión de archivos.

Ruta: Ajustes → Excalidraw

Dos cosas para modificar:

① Establecer la ubicación de la plantilla: en la configuración de Excalidraw, busca la opción “Archivo de plantilla” e introduce la ruta a tu plantilla, por ejemplo, 02 Templates/Plantilla Excalidraw. A partir de entonces, cada vez que crees un nuevo archivo con Excalidraw, usará automáticamente esta plantilla, incluyendo la propiedad excalidraw-open-md: true.

② Desactivar “Agregar fecha al nombre del nuevo archivo”: de forma predeterminada, Excalidraw añade la fecha de creación a los nombres de los nuevos archivos, por ejemplo, Dibujo 2026-03-12. Esto hace que los nombres de archivo sean largos e incompatibles con la lógica de nombres de plantillas de Obsidian. Busca esta opción y desactívala.

5.4 Vincular un atajo de teclado

Cambiar entre el modo Markdown y el modo de dibujo a través del menú contextual es demasiado lento: vincula un atajo de teclado para alternar al instante.

Ruta: Ajustes → Atajos → Buscar “Excalidraw”

Encuentra esta entrada: “Excalidraw: Alternar entre modo Excalidraw y modo Markdown”

Vincúlala a Cmd+E (Mac) o Ctrl+E (Windows). Primero verifica si esta combinación de teclas ya está en uso: el Cmd+E predeterminado de Obsidian es para cursiva. Si usas cursiva a menudo, elige una tecla diferente, como Cmd+Mayús+E.

Después de vincularlo, en un archivo dos en uno, presiona Cmd+E para alternar entre “ver texto” y “ver dibujo”, muy conveniente.

5.5 Datos comprimidos al final del archivo

Después de la configuración, cada vez que guardes contenido de dibujo en un archivo dos en uno, se generará automáticamente un bloque de datos al final del archivo:

%%
### Dibujo
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

Este bloque de código compressed-json es el resultado de comprimir todos los datos del dibujo: coordenadas, colores, contenido de texto, relaciones de conexión, todo comprimido en esta única línea de cadena.

Tres cosas a tener en cuenta:

• No elimines este contenido manualmente. Si lo eliminas, los datos del dibujo desaparecen y al cambiar al modo Excalidraw se mostrará un lienzo vacío.
• %% es la sintaxis de comentario de Obsidian. En la vista de lectura, este contenido está oculto y no se mostrará, por lo que no afecta la legibilidad de la nota.
• La línea compressed-json debe ser una línea completa única. Si se rompe con un salto de línea, el archivo dará error y no se podrá abrir.

Resumen

Lo que aprendiste hoy:

1. Excalidraw = herramienta de dibujo gratuita y de código abierto: tiene una versión web independiente; Obsidian usa la versión del plugin de terceros, con estilo de dibujo a mano y lienzo infinito.
2. Diferencia fundamental con Canvas: Canvas genera archivos .canvas separados que requieren gestión independiente; los datos de dibujo de Excalidraw se pueden comprimir e incrustar en archivos .md: un solo archivo, dos usos.
3. Instalación: Ajustes → Plugins de terceros → Plugins de la comunidad → Buscar e instalar Excalidraw.
4. Atajos de herramientas: teclas numéricas 1-8 y 0 para cambiar de herramienta, Esc para salir de edición, Tabulador para saltar entre elementos, teclas de flecha para mover: ritmo principal: teclas numéricas para herramientas + Esc/Tabulador para navegación.
5. Dibujo con IA: la Skill /obsidian-excalidraw permite que Claude Code genere dibujos incrustados directamente, mucho más rápido que arrastrar nodos manualmente.
6. Configuración dos en uno: agrega excalidraw-plugin: parsed + excalidraw-open-md: true al frontmatter, configura mediante un archivo de plantilla, establece la ruta de la plantilla en la configuración de Excalidraw, vincula Cmd+E para cambio rápido de modo.
7. Datos al final del archivo: el bloque de código ## Dibujo + compressed-json son los datos comprimidos del dibujo, envueltos en %%, invisibles en la vista de lectura: no los elimines manualmente.

Agradecimientos: La configuración “Dos en uno” de este capítulo hace referencia al método del creador de Bilibili Fiveth_ (video: BV1hyhPzoEcd), aquí se le atribuye el mérito.