334 - Diagramas a mano para Windows, MacOs y Linux

PodcastPodcast

334 - Diagramas a mano para Windows, MacOs y Linux

excalidraw es una herramienta que te permite realizar diagramas a mano en Linux, MacOS y Windows de forma super sencilla y online.

1:25
-3:15

No se exactamente como llamarlos, y de nuevo he tenido que tirar de la RAE para encontrar las palabra mas adecuadas, y creo que aún así, no he acertado. Ciertamente, yo lo estoy utilizando para hacer diagramas de flujo, pero, por supuesto no solo es para esto, sino que también lo puedes utilizar para realizar esquemas, incluso prototipos, ya sea de aplicaciones para móviles o aplicaciones web. Todo depende de ti. Pero lo mas interesante es que el resultado del prototipo o del diagrama, es como si estuviera hecho a mano. Tiene exactamente ese efecto, el de diagramas a mano.

Diagramas a mano para Windows, MacOs y Linux

Diagramas a mano para Windows, MacOs y Linux

Una mirada al pasado

Te puedo asegurar que esto de los diagramas a mano no es algo que me guste recientemente. Lo cierto es que es algo que me tiene enamorado desde hace mucho tiempo. Lo hecho a mano me transmite calidez, y en este sentido es algo que me resulta muy atrayente. De hecho, en muchas ocasiones, sobre un documento PDF, introduzco notas utilizando tipografías manuales o que lo simulan, para que den la impresión de anotaciones. El resultado es espectacular.

Sobre excalidraw

En particular, la herramienta de la que te traigo hoy es excalidraw. Se trata de una herramienta Open Source, liberada bajo licencia MIT, y que te permite realizar diagramas, esquemas y bosquejos de forma super sencilla y con un acabado, que simula hecha a mano. De verdad, que si no te fijas, no tienes la impresión de que sea generada por ordenador, sino que da la impresión de que está realmente hecha a mano.

Pero esto de a mano por ordenador tiene sus ventajas. La posibilidad que te ofrece un el ordenador de copiar y pegar, o de simplemente corregir cuando has cometido un error, es algo, que es muy difícil emular en el 1.0. Así, que aquí gana excalidraw. Pero además tienes, la gracia del efecto de hecho a mano, con lo que tienes ventajas por todas partes.

Sencillez en su máxima expresión

A parte del efecto hecho a mano, esta herramienta tiene la ventaja de ser super sencilla. Recién sacada de caja no tiene mas que ocho herramientas,

  • rectángulo
  • elipse
  • rombo
  • línea recta
  • flecha
  • línea a mano alzada
  • texto
  • imagen

Sin embargo, con estas pocas herramientas, ya tienes mas que suficiente para salir airoso de la mayor parte de soluciones.

Pero, evidentemente, también tienes librerías, que al igual que excalidraw son Open Source liberadas bajo licencia MIT.

Aquí, entre esas librerías puedes encontrar todos los complementos que necesites. Y no solo los que necesites, sino que tu también puedes crear tus propios diseños, y por supuesto compartirlos con todo el mundo, con tan solo hacer un pull request.

Estilos y colores

Por supuesto para cada una de estas formas puedes aplicar diferentes atributos, como son

  • Estilo de borde, pudiendo elegir entre un borde anguloso o redondeado.
  • Estilo del trazo. Esto te permite dar un aspecto mas o menos hecho a mano. Puedes seleccionar entre el estilo arquitecto, artista o el tipo caricatura. Siendo este último el que mas hecho a mano parece. En este caso, particular, prefiero quedarme con el intermedio.
  • Respecto al tipo de línea, puedes seleccionar entre línea contínua, trazos o punteado.
  • Tienes también la opción de elegir entre tres grosores.
  • Igualmente, también puedes elegir entre tres tipos de relleno. O bien, rallado, o bien del tipo mallado o de tipo solido. En cualquier caso, puedes elegir la opacidad de los elementos que dibujes.

Una cuestión muy interesante que tienes también para elegir es el color. Puedes seleccionar tanto el color del fondo como del borde. Desde luego, el fondo con rallado simple, da todavía mas si cabe, sensación de acabado manual.

Respecto a la selección de colores, añade un dígito o carácter sobre cada color para que sea mas rápido de seleccionar. Así que como ves, está todo pensado en la sencillez y la rapidez de uso.

Alineación y capas

Además de lo anterior, y como no podía ser de otra forma, excalidraw, te da la opción de utilizar capas, pudiendo elegir donde queda cada elemento del dibujo sobre el resto. Esto es algo básico en casi cualquier herramienta de dibujo que se precie, y Excalidraw no podía ser menos. Así puedes situar una forma debajo de todo, o encima de todo, o bien, por encima o debajo de otras formas.

Así mismo, otra facilidad que te ofrece esta herramienta es la posibilidad de alinear elementos. Y es que si bien, aunque esté el dibujo hecho a mano, que las formas estén proporcionadas y alineadas, le da un aspecto realmente profesional.

Si te fijas en un croquis o diseño de un arquitecto, realizado a mano, verás que todo está proporcionado y en su sitio, con independencia de que esté hecho a mano.

Y además tienes la posibilidad de agrupar formas. Esto es fundamental para las librerías o bibliotecas, y además te facilita mucho el trabajo, dando de nuevo, un aspecto muy, pero que muy profesional.

Colaborativo

Si todo esto te parece poco, decirte que excalidraw te permite realizar diseños, croquis, bosquejos, diagramas, o como lo quieras llamar de forma colaborativa. Así, podéis trabajar de forma simultánea varios sobre el mismo diagrama, con las ventajas que esto ofrece.

Podrías utilizar esta herramienta en tus sesiones por vídeo conferencia o en un brain storming o cuando tu lo necesites.

Instalación

Aunque como te he dicho, lo puedes utilizar directamente desde el enlace que he dejado en las notas, también puedes levantar tu propia instancia de forma super sencilla. Solo tienes que ejecutar las siguientes instrucciones en un terminal,

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
docker-compose up -d

Abres el navegador en http://localhost:3000 y a disfrutar haciendo tus diagramas a mano, como si no hubiera un mañana.

Conclusión

Se trata de una de esas herramientas que no puedes dejar de probar, porque seguro que te vas a llevar un muy buen sabor de boca, y que utilizarás tarde o temprano. Te recomiendo que la pruebes sin falta.


Imagen de portada de Eleni Koureas

Más información,

Excalidraw
Tecnocincuentones

3 comentarios en “Diagramas a mano para Windows, MacOs y Linux

  1. David Fariña hace 2 semanas

    Hola Lorenzo, has probado mermaid, es un generador de esquemas en texto plano que puedes integrar con markdown. Yo lo uso muchisimo para documentacion, ya que te permite generar todo tipo de diagramas, de clase, de flujo, gantt y hasta git…

    Vamos una maravilla y es open source

    https://mermaid-js.github.io/mermaid/#/

  2. Gaizka hace 2 semanas

    Lorenzo, gracias gracias gracias, llevaba ya un tiempo buscando algo como esto. Lo acabo de agregar a los docker con herramietnas que usamos en el área IT. Me encanta la estética, creo que dará un «toque» a nuestra documentación interna muy interesante. Saludos!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *