Una pizarra virtual de código abierto para dibujar diagramas estilo dibujado a mano, compatible con colaboración en tiempo real, cifrado de extremo a extremo y exportación a PNG/SVG.
Excalidraw
Pizarra virtual para dibujar diagramas con aspecto de boceto a mano alzada GitHub: https://github.com/excalidraw/excalidraw
Resumen
Excalidraw es una aplicación de pizarra virtual gratuita y de código abierto que permite a los usuarios crear diagramas, diagramas de flujo, wireframes y bocetos con una estética distintiva de dibujo a mano alzada. Construida como un componente de React y publicada como un paquete npm, se puede usar de forma independiente en excalidraw.com o incrustarla directamente en otras aplicaciones.
El proyecto fue creado inicialmente por Christopher Chedeau (vjeux) y desde entonces ha crecido hasta convertirse en una próspera comunidad de código abierto adoptada por empresas como Google Cloud, Meta, CodeSandbox, Replit, Notion y Obsidian.
Características Principales
Herramientas de Dibujo
- Formas básicas: rectángulo, círculo, rombo, flecha, línea
- Dibujo a mano alzada y borrador
- Herramienta de texto con fuentes personalizadas (Excalifont)
- Conexión de flechas y flechas etiquetadas
- Bibliotecas de formas para componentes reutilizables
Lienzo y UI
- Lienzo infinito con soporte de zoom y desplazamiento
- Modo oscuro
- Historial de deshacer/rehacer
- Atajos de teclado para un flujo de trabajo eficiente
- Ancho de trazo, rugosidad, color y relleno personalizables
Colaboración y Compartir
- Colaboración multijugador en tiempo real a través de enlaces compartibles
- Cifrado de extremo a extremo para sesiones seguras
- Enlaces compartibles de solo lectura para visualización
- Soporte PWA — funciona completamente sin conexión
- Local-first: autoguardado en el almacenamiento del navegador
Exportación e Integración
- Exportación a PNG, SVG y portapapeles
- Exportación/importación en formato JSON
.excalidraw(abierto, legible por humanos) - Incrustable como componente React a través del paquete npm
@excalidraw/excalidraw - Integrado en herramientas como Obsidian, extensiones de VS Code, Notion y más
Localización
- Soporte completo de i18n (internacionalización) con múltiples idiomas
Pila Técnica
| Capa | Tecnología |
|---|---|
| Frontend | React, TypeScript |
| Lienzo | API Canvas de HTML5 |
| Dibujo | Rough.js (renderizado a mano alzada) |
| Fuentes | Excalifont (personalizada), Virgil (legado) |
| Paquete | Publicado en npm como @excalidraw/excalidraw |
| Licencia | MIT |
Casos de Uso
- Diagramas de arquitectura de sistemas — bocetos informales pero expresivos para equipos técnicos
- Wireframing y maquetas de UI — prototipos rápidos de baja fidelidad antes de Figma
- Brainstorming e ideación — pensamiento visual en reuniones o de forma asíncrona
- Enseñanza y presentaciones — el estilo de dibujo a mano alzada mantiene el contenido accesible
- Documentación — incrustar diagramas en vivo en wikis, páginas de Notion o archivos README
Excalidraw+ (Premium)
Más allá de la versión gratuita de código abierto, el equipo ofrece Excalidraw+, un producto en la nube de pago que añade:
- Almacenamiento en la nube y espacios de trabajo organizados
- Sesiones de colaboración persistentes
- Chat de voz dentro del lienzo
- Modo de presentación (exportación basada en diapositivas a PPTX/PDF)
- Gestión de permisos y uso compartido de invitados
- Prueba gratuita de 14 días disponible
Comunidad y Adopción
- Estrellas: Más de 90.000 estrellas en GitHub (una de las herramientas de pizarra con más estrellas)
- Colaboradores: Más de 800 colaboradores de código abierto
- Utilizado por: Google Cloud, Meta, CodeSandbox, Obsidian, Replit, Slite, Notion, HackerRank
- Integraciones: Extensión de VS Code, plugin de Obsidian, plugin de Confluence y más
Primeros Pasos
Usar en Línea
Visita https://excalidraw.com — no se requiere registro.
Autoalojar / Incrustar
npm install @excalidraw/excalidraw
import { Excalidraw } from "@excalidraw/excalidraw";
export default function App() {
return <Excalidraw />;
}
Ejecutar Localmente
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start
Resumen
Excalidraw se destaca entre las herramientas de diagramación por su deliberada adopción de la estética de dibujo a mano alzada — bordes irregulares y líneas fluidas que mantienen el contenido informal y centrado en las ideas en lugar del pulido. Su combinación de incorporación sin fricciones (sin necesidad de iniciar sesión), potente colaboración, formato abierto e incrustabilidad como biblioteca de React lo convierte en una opción preferida para desarrolladores, diseñadores y equipos de todo el mundo.