Pizarra en línea

Para qué es esta herramienta

Un diagrama rápido: cajas y flechas para un diseño de servicio, un wireframe de una pantalla, un esbozo pegado en una solicitud de extracción. El tipo de dibujo donde abrir una herramienta de diseño, iniciar sesión y elegir una plantilla cuesta más de lo que vale el dibujo.

El editor es Excalidraw 0.18.1 incrustado directamente en la página. Su aspecto dibujado a mano no es decoración — un esbozo que se ve provisional invita a la gente a discutir con él, que es usualmente lo que quieres de un diagrama de arquitectura en la primera semana.

Dónde vive el dibujo

Esta es la parte que vale la pena entender antes de que dependas de ella.

Cada cambio que haces se guarda en localStorage de este navegador, bajo la clave anytools:whiteboard:v1, aproximadamente medio segundo después de que dejes de mover el ratón — formas y texto, pero también el color de fondo del lienzo, la cuadrícula, el zoom y dónde habías desplazado. Esa es la historia de persistencia completa. No hay cuenta, no hay copia de servidor, y no hay sincronización:

• Recarga la página, cierra la pestaña, reinicia el navegador — la pizarra vuelve.
• Abre la misma URL en un navegador diferente, un perfil diferente, o en tu teléfono — la pizarra no está allí. Nunca salió de la máquina en la que se dibujó.
• Borra datos del sitio, usa "borrar cookies y datos del sitio", o cierra una ventana privada — la pizarra se ha ido, permanentemente.

La línea de estado bajo la barra de herramientas dice "Guardado en este navegador" cada vez que se guarda un cambio, por lo que puedes ver el mecanismo funcionando en lugar de confiar en él.

Hay un límite de tamaño: aproximadamente 5 MB. Esa es una restricción del navegador, no nuestra — localStorage limita cada origen a aproximadamente eso. Las formas y el texto son pequeños, así que no te acercarás editando; te acercarás pegando fotografías, que se almacenan como base64 dentro de la escena. Eliminar una imagen pegada devuelve su espacio en el siguiente guardado: solo las imágenes que la pizarra aún muestra se escriben. Si una pizarra pasa el límite de todas formas, la herramienta detiene el guardado automático y lo dice — incluyendo que la copia aún en el navegador es ahora la más antigua — en lugar de fallar silenciosamente en algún editar posterior no relacionado.

Exportación: tres formatos, tres propósitos

PNG es para pegar en un chat, un ticket o un documento. Es una imagen plana con los colores actuales del lienzo, con 16 px de relleno alrededor del contenido. No se puede editar después.

SVG es para cualquier cosa que se redimensione o imprima — sitios de documentación, diapositivas, un README. La exportación incorpora las fuentes que utilizó, por lo que el archivo se renderiza idénticamente en una máquina que nunca ha oído hablar de Excalifont. Eso también hace que las exportaciones SVG sean notablemente más grandes de lo que podrías esperar.

.excalidraw es la única que sigue siendo un dibujo. Es JSON, escrito por el propio serializador de Excalidraw, y se abre nuevamente aquí o en excalidraw.com con cada forma aún editable. Si te importa una pizarra, esta es la exportación que importa; PNG y SVG son imágenes de ella.

Cada exportación produce un enlace de descarga bajo la barra de herramientas en lugar de comenzar una descarga inmediatamente, por lo que un clic accidental no llena tu carpeta de Descargas.

Mover una pizarra a otra máquina

No hay sincronización, por lo que el movimiento es manual y toma tres pasos: exporta .excalidraw aquí, obtén el archivo en la otra máquina de la manera que normalmente mueves archivos, luego usa Abrir .excalidraw allá. El importador verifica la envoltura antes de cargar cualquier cosa — que sea JSON, que su campo type diga excalidraw en lugar de excalidrawlib, que su versión sea una que esta compilación entienda, y que esté bajo el límite de tamaño — y te dice cuál de esos falló en lugar de mostrar un lienzo vacío.

Abrir un archivo reemplaza lo que hay en la pizarra, por lo que pregunta primero, de la misma manera que Nueva pizarra — a menos que el lienzo esté vacío, donde no hay nada que preguntar.

Las escenas importadas se ejecutan a través de restore() de Excalidraw, que actualiza elementos escritos por versiones anteriores y descarta los malformados. Una escena de 2021 se abre bien. El contenido web incrustado es lo único que no sobrevive el viaje: ver abajo.

Empezar de nuevo

Nueva pizarra pregunta primero, luego borra tanto el lienzo como la copia guardada. No hay deshacer para ello y no hay historial de versiones — el guardado automático mantiene un estado, el actual. Exporta antes de borrar si hay alguna duda.

Qué se apaga y por qué

Excalidraw envía varias características que necesitan un servidor. Todas ellas se desactivan aquí en lugar de dejarse al azar:

• Incrustaciones web — Excalidraw puede colocar un <iframe> en vivo en el lienzo que contenga un video de YouTube, un marco de Figma, una esencia o un tweet. Dejado en su comportamiento predeterminado el componente permite su propia lista de esos hosts, y tres rutas la alcanzan sin preguntar: la herramienta Web Embed de la barra de herramientas, pegar un enlace, y abrir un archivo .excalidraw que ya contiene uno. Los tres están cerrados aquí — la entrada de la barra de herramientas está oculta, los enlaces pegados siguen siendo enlaces, e incrustaciones en un archivo abierto se eliminan antes de que cargue, con un conteo para que sepas que tu archivo fue modificado.
• Colaboración en vivo — nunca inicializada, por lo que ningún socket se abre.
• Wireframe-a-código — esto publica el lienzo en el endpoint de IA de Excalidraw. Está activado de manera predeterminada en el componente; está explícitamente desactivado aquí.
• Enlaces compartibles y exportación Excalidraw+ — el diálogo de exportación solo guarda en disco.
• Navegar por la biblioteca de formas pública — el enlace externo está oculto; importar un archivo .excalidrawlib desde tu disco aún funciona.
• Fuentes CDN — las fuentes manuscritas se sirven desde este dominio, no desde esm.sh.

Si quieres colaboración en tiempo real, excalidraw.com lo hace correctamente y de forma gratuita. Esta página es para el caso en el que prefieres que nada salga de la máquina.

¿Dónde se almacena mi dibujo?

En este navegador, en este perfil, en este dispositivo, y en ningún otro lugar. La pizarra se escribe en localStorage bajo la clave anytools:whiteboard:v1 aproximadamente medio segundo después de que dejes de dibujar. Nada se carga, no hay cuenta, y no hay sincronización entre tu teléfono y tu portátil.

La consecuencia práctica vale la pena declarar claramente: limpiar datos del sitio, ejecutar una herramienta "limpiar datos de navegación" o usar una ventana privada que luego cierres borrará la pizarra sin forma de volver. Si un dibujo importa, exporta un archivo .excalidraw. Ese archivo es la copia que posees.

Lo que se guarda es la pizarra como se ve: formas, texto, el color de fondo del lienzo, la configuración de la cuadrícula y dónde habías desplazado. Las imágenes que pegaste y luego borraste no son parte de eso — cada guardado mantiene solo los datos de imagen que la pizarra aún muestra, por lo que eliminar una captura de pantalla devuelve el espacio en lugar de dejarlo en almacenamiento para la vida del perfil del navegador.

¿Cuál es el editor?

Excalidraw, el editor de código abierto con licencia MIT, insertado como un componente React. La versión aquí es 0.18.1. Es la misma superficie de edición que excalidraw.com, menos cada característica que necesita un servidor: sin colaboración en vivo, sin enlaces compartibles, sin "wireframe a código", sin integración de Excalidraw+.

¿Se cargan las fuentes manuscritas desde un CDN?

No. El comportamiento predeterminado de Excalidraw es obtener Excalifont, Virgil, Cascadia Code, Nunito, Lilita One, Comic Shanns, Liberation Sans y Xiaolai de esm.sh bajo demanda. Esta compilación establece EXCALIDRAW_ASSET_PATH en /third-party/excalidraw/ y sirve a todos ellos desde este dominio. Si abres el panel de red de tu navegador mientras escribes, cada solicitud .woff2 va a este sitio.

Eso incluye la familia Xiaolai de 12 MB, que cubre texto chino, japonés y coreano. Solo se solicita cuando realmente escribes esos caracteres — las caras de fuente se dividen por rango Unicode — pero se aloja aquí en lugar de descartarse, porque una fuente faltante no es un espacio en blanco: Excalidraw enumera el CDN como una fuente de reserva en la misma regla @font-face, por lo que eliminarlo enviaría a usuarios CJK a un tercero sin decirles.

¿Puedo colaborar con alguien en tiempo real?

No. La colaboración necesita un servidor para retransmitir la sesión, y este sitio no tiene uno para dibujos. Si necesitas eso, excalidraw.com lo hace bien y es gratis. Lo que puedes hacer aquí es exportar un archivo .excalidraw y enviarlo a alguien, quien puede abrirlo aquí o allá.

¿Un archivo exportado aquí se abrirá en excalidraw.com?

Sí. .excalidraw es JSON plano con una envoltura documentada, y la exportación utiliza el serializador propio de Excalidraw, por lo que el archivo es byte-compatible con lo que excalidraw.com escribe. El inverso también funciona — una escena guardada allá se abre aquí. Los archivos por encima de 5 MB se rechaza, que es un límite del almacenamiento del navegador en lugar del formato.

¿Puedo incrustar un video de YouTube o un marco de Figma en la pizarra?

No. Excalidraw tiene una característica "Incrustar en la Web" que pone un <iframe> en vivo en el lienzo — un video, un archivo de Figma, una esencia, un tweet — y se apaga aquí en su totalidad. La entrada de la barra de herramientas está oculta, pegar un enlace te da un enlace en lugar de un reproductor, y si abres un archivo .excalidraw que ya contiene incrustaciones, se eliminan antes de que se cargue el archivo y la herramienta te dice cuántas eliminó.

La razón es la promesa en el resto de esta página. Una incrustación es una página de terceros que se ejecuta dentro de esta: obtiene de los servidores de ese tercero, y puede ver que la abriste. Eso es lo opuesto a "nada sale de tu dispositivo", y un archivo .excalidraw es un documento JSON plano que cualquiera puede enviarte por correo, por lo que "solo si añades uno tú mismo" no habría sido verdad de todos modos. Todo lo demás sobre una escena — formas, texto, imágenes, flechas, marcos — se abre normalmente.

¿Por qué solo puedo importar .excalidraw, no .excalidrawlib?

Un archivo .excalidrawlib es una biblioteca de formas, no un dibujo, y entra a través del panel de biblioteca en el editor en lugar del botón "Abrir". Entregar uno al botón Abrir te da un mensaje que dice exactamente eso en lugar de un error genérico.

¿Funciona en un teléfono?

Se renderiza y es utilizable con un dedo o un estilete, pero un lienzo de 70%-de-viewport en una pantalla pequeña es apretado, y la barra de herramientas se desmorona. Esta es una herramienta de escritorio primero. Los dibujos no se sincronizan en ningún lado, así que una pizarra comenzada en un teléfono se queda en ese teléfono.

¿Hay un límite de deshacer o un historial de guardado automático?

Deshacer es el propio de Excalidraw, en la memoria, y se restablece cuando recargas la página. No hay historial de versiones — el guardado automático mantiene exactamente un estado, el último. "Nueva pizarra" lo borra después de preguntar.