Excalidraw es una de esas herramientas que, una vez que descubres, no puedes dejar de usar para hacer tus diagramas. Tiene ese equilibrio perfecto entre la sencillez de un dibujo a mano alzada y la potencia de una herramienta de diseño técnico.
¿Alguna vez has intentado explicar una idea compleja en una reunión virtual y has terminado deseando tener una pizarra física a mano? Excalidraw nació para resolver ese problema, ofreciendo una experiencia de dibujo virtual que se siente natural, rápida y, sobre todo, colaborativa.
¿Qué hace a Excalidraw tan especial?
A diferencia de otras herramientas de diagramación rígidas, Excalidraw apuesta por una estética hand-drawn (dibujado a mano). Esto no es solo por estilo: los estudios de diseño sugieren que los bocetos informales invitan más a la colaboración y al feedback que los diagramas perfectamente pulidos, que a veces parecen «finalizados».
- Gratis y de código abierto: Sin barreras de entrada.
- Privacidad total: Tus datos se cifran de extremo a extremo en tu navegador.
- Colaboración en tiempo real: Comparte un enlace y empieza a dibujar con tu equipo al instante.
- Integración con Mermaid: La joya de la corona para los que preferimos escribir código antes que arrastrar cajas.
Cómo crear diagramas con Mermaid en Excalidraw: Paso a Paso
Si eres desarrollador o analista, probablemente ya conozcas Mermaid, un lenguaje de marcado que permite generar diagramas a partir de texto. Excalidraw permite integrar estos diagramas de forma nativa.
Aquí te explico cómo hacerlo:
Paso 1: Abre el editor de Mermaid
En la barra de herramientas de Excalidraw (normalmente en la parte superior o lateral, dependiendo de tu versión), busca el icono de «More tools» (el cuadrado con un signo +) y selecciona la opción de Mermaid. Se abrirá una ventana emergente con un editor de texto.
Paso 2: Elige tu tipo de diagrama
Dentro del editor, deberás escribir el código siguiendo la sintaxis de Mermaid. Por ejemplo, para un Diagrama de Flujo sencillo, podrías escribir:
Fragmento de código
graph TD
A[Inicio] --> B{¿Funciona?}
B -- Sí --> C[¡Genial!]
B -- No --> D[Revisar código]
D --> B
Paso 3: Renderiza y personaliza
Una vez que hayas escrito tu código, haz clic en el botón «Insert». Excalidraw transformará ese texto en un objeto visual dentro de tu lienzo.
Paso 4: Estiliza a tu gusto
Lo mejor de esta integración es que, una vez insertado, puedes cambiar el color de las líneas, el grosor del trazo o incluso el estilo de la fuente (puedes elegir entre el estilo manual, normal o código) usando el panel lateral izquierdo de Excalidraw.
¿Por qué usar Mermaid dentro de Excalidraw?
- Velocidad: Es mucho más rápido escribir
A --> Bque dibujar una flecha y alinear dos cajas manualmente. - Mantenimiento: Si el proceso cambia, simplemente editas el código de Mermaid en lugar de redibujar todo el flujo.
- Híbrido perfecto: Puedes tener un diagrama técnico generado por código y rodearlo de anotaciones, flechas manuales y notas adhesivas para darle contexto humano.
Excalidraw no es solo una pizarra; es el puente entre tu cerebro y la pantalla. Si aún no lo has probado, entra en excalidraw.com y deja que tu creatividad fluya.