Excalidraw, extensión para dibujar esquemas y diagramas

Esta extensión es una integración no oficial para usar la herramienta de diagramación Excalidraw en VS Code y dibujar directamente dentro del editor.

Además, una ventaja importante es que puedes trabajar con múltiples archivos de forma simultánea, guardando distintos diagramas dentro de un directorio. A diferencia de la versión web, donde normalmente trabajas sobre un solo archivo a la vez, aquí puedes abrir y editar varios sin problemas dentro de VS Code.

1. Instalación

1. Abre Visual Studio Code
2. Cambia a Extensiones
3. Busca: Excalidraw (autor: pomdtr)

O puedes abrir su página en el Marketplace y añadirlo:

Excalidraw

Esta extensión integra Excalidraw en VS Code, permite diagramas y dibujar directamente en el editor.

Marketplace

2. Crear archivos para Excalidraw

Para habilitar la pizarra y comenzar a dibujar, solo necesitas crear un archivo con la extensión .excalidraw o .excalidraw.png. Al abrirlo, se mostrará automáticamente la interfaz visual.

3. Guardar y exportar

Puedes guardar los archivos .excalidraw o exportar tus dibujos a imágenes .png o vectoriales .svg.

• Para guardar de forma rápida utiliza el atajo Ctrl + S.
• Para expotar a otro formato utiliza el atajo Ctrl + Shift + E .

4. Configuración adicional

Podemos cambiar la apariencia y el idioma de la interfaz a través de la configuración de VS Code en el archivo setting.json

4.1 Alternar entre tema claro y oscuro

Desde la interfaz, en la parte superior, encontrarás un botón que permite alternar entre tres opciones:

• Claro (predeterminado)
• Oscuro
• Automático (se sincroniza con el tema de VS Code en uso)

También puedes cambiar el tema desde el archivo settings.json:

4.2 Cambiar el idioma de la interfaz

De forma predeterminada, la extensión utiliza la configuración de VS Code, si el editor está en inglés la integración de Excalidraw se configura con ese idioma. Para cambiar el idioma, abrimos nuevamente el archivo settings.json y definir el código regional en excalidrar.languaje. Por ejemplo, cambiar el español:

  "excalidrar.languaje": "es-ES"

5. Importar bibliotecas públicas

Puedes importar bibliotecas públicas desde libraries.excalidraw.com que son un conjunto de elementos reutilizables (dibujos, íconos, formas, diagramas, etc.). Para ver todas las bibliotecas, haz clic en el botón “Explorar bibliotecas”:

Luego, puedes agregar las que necesites. A continuación, se puede observar cómo se hace:

6. Tip para productividad

6.1 Split del editor

Podemos dividir el editor en VS Code para visualizar y editar varios archivos de forma simultánea. Esto resulta muy cómodo, ya que permite trabajar en paralelo y arrastrar elementos dentro de la misma instancia, evitando tener que abrir y cerrar archivos constantemente, especialmente cuando los diagramas o contenidos comparten elementos.

6.2 Usar la paleta de comandos

Podemos usar la paleta de comandos para crear un nuevo que es más rápido de llegar a la interfaz para comenzar a dibujar