“Cualquiera que use esta herramienta será, con razón, el Rey de los Diagramas de Flujo”. Estas son las palabras grabadas bajo la empuñadura dorada de Excalidraw, el proyecto de código abierto del que hablaré hoy.
Bienvenidos a OpenDev Explorer, mi columna dedicada a explorar el mundo del código abierto con un guiño a la experiencia del desarrollador. Soy Riccardo (también conocido como TheZal) y hoy hablaré de Excalidraw, una herramienta de código abierto para crear diagramas de flujo, así como dibujos a mano alzada para cualquiera que necesite plasmar sus ideas en papel digital.
Visión general
Excalidraw es una tool online de dibujo de código abierto que permite crear bocetos y diagramas de manera fácil e intuitiva.
Su interfaz de usuario minimalista hace que dibujar sea tan intuitivo como en papel, lo cual es ideal para brainstorming, diagramas de flujo y wireframing. Además, Excalidraw permite la colaboración en tiempo real, permitiendo a varios usuarios trabajar juntos en un mismo proyecto simultáneamente.
Es apreciada por su capacidad de crear dibujos con apariencia de hechos a mano y ofrece opciones de exportación en varios formatos, como PNG y SVG, lo que la convierte en una herramienta valiosa para todos.
User Manual
Instalación
Instalar Excalidraw es muy sencillo, ya que está disponible a través de varios gestores de paquetes como npm y yarn, y se puede instalar usando uno de los siguientes comandos:
Usando npm:
<strong>npm install react react-dom @excalidraw/excalidraw</strong>Lenguaje del código: HTML, XML (xml)Usando yarn:
<strong>yarn add react react-dom @excalidraw/excalidraw</strong>Lenguaje del código: HTML, XML (xml)Uso
Usar Excalidraw también es muy simple, ya que solo necesitas importar la biblioteca en tu componente y crear el objeto directamente desde la biblioteca. Aquí tienes un ejemplo:
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</>
);
}Lenguaje del código: JavaScript (javascript)Experiencia de desarrollador
Excalidraw es muy apreciado por los devs por la facilidad con la que se puede implementar en sus proyectos.
Al ser open-source, ofrece una gran flexibilidad y posibilidades de personalización, permitiendo a los desarrolladores adaptarlo a las necesidades específicas de su software. Además, su API está bien documentada y permite una fácil integración con otras aplicaciones y plataformas.
El lightweight code y la arquitectura modular contribuyen a una fácil mantenimiento y escalabilidad, lo que lo convierte en una opción confiable para proyectos de cualquier tamaño.
The Extra Mile
La ventaja adicional de Excalidraw se encuentra en la posibilidad de colaboración en tiempo real entre equipos, permitiendo que múltiples usuarios trabajen simultáneamente en el mismo dibujo, facilitando el intercambio de ideas y mejorando la productividad del equipo.
De hecho, para crear una sesión colaborativa en Excalidraw, solo necesitas iniciar una sesión desde el botón «Compartir» y enviar el enlace generado. Todos los participantes podrán ver y editar el dibujo en tiempo real.
Comparación con el Status Quo
Excalidraw se destaca entre sus competidores como Draw.io gracias a su simplicidad e inmediatez. Esta herramienta de dibujo en línea ofrece una interfaz intuitiva que permite crear diagramas y bocetos con facilidad, sin una curva de aprendizaje pronunciada.
Su naturaleza de código abierto garantiza flexibilidad e innovación continua por parte de la comunidad, que la aprecia particularmente y la convierte casi en un proyecto “impulsado por la comunidad”.
Además, Excalidraw sobresale en la colaboración en tiempo real, permitiendo que múltiples usuarios trabajen simultáneamente en un proyecto con actualizaciones inmediatas, algo que no es posible, por ejemplo, con Draw.io.
A diferencia de herramientas más complejas, Excalidraw se enfoca en lo esencial y la rapidez, lo que la hace ideal para lluvias de ideas y prototipado rápido.
Reflexiones finales
Entonces, Excalidraw es muy fácil de implementar, muy sencillo de usar y además cuenta con funciones integradas de colaboración en tiempo real, lo que la convierte en la herramienta perfecta para la creación de proyectos y prototipos.
Además, se valora por su capacidad para crear dibujos con apariencia de hechos a mano y ofrece opciones de exportación en varios formatos, como PNG y SVG, manteniendo los archivos editables, lo que la convierte en una herramienta valiosa para todos.
