[2024] Tutorial sobre Draw.io – La mejor herramienta para diseñar diagramas online

tutorial-draw-io-herramienta-diagramas

Hoy veremos un tutorial de Draw.io, la herramienta para hacer diagramas online de forma gratuita.

Por lo general, cuando necesitas hacer un diagrama, por inercia tiendes a coger papel y boli para ponerte a dibujarlo. Es normal, esto nos pasa a todos.

En mi caso coge papel y boli para todo, hasta para crear un funnel de ventas estilo flywheel.

Y lo que pasa es que al final es una pérdida de tiempo y por qué no decirlo, un malgasto de papel.

Que si te equivocas, que si le das otra vuelta, que si toca hacer tachones y al final tirar el diagrama o el funnel a la basura para volver a comenzar desde el principio.

Por eso, para ahorrar tiempo y papel, vamos a ver a fondo una herramienta gratuita y online llamada Draw.io.

Pero, como diseñador web, ¿en qué momento vas a necesitar diseñar un diagrama?

Hay momentos en los que tienes que pensar cómo diseñar una página estratégica, en cómo estructurar las partes de tu web o en cómo puedes crear en enlazado interno de la misma. En estos casos, te recomiento que recurras a esta herramienta de diagramas online.

¿Qué es Draw.io?

Draw.io es una aplicación web con la que podrás crear diagramas online, sin necesidad de descargar ningún software ni adquirir licencias.

Características de Draw.io

La herramienta cuenta con una serie de características y funcionalidades que no quiero dejar pasar por alto.

En primer lugar, destacaría las plantillas o diseños predeterminados que trae. Si te encuentras un poco perdido a la hora de hacer el diseño del diagrama, puedes usar una de las plantillas como guía y modificarla a tu gusto.

Podríamos decir que es como las plantillas que trae el Elementor.

En este caso, Draw.io dispone de una gran variedad de formas. Puedes diseñar tus diagramas en blanco a partir de círculos, líneas de conexión, tablas, imágenes y muchas figuras más aparte de las plantillas de que he mencionado en el punto anterior.

Permite insertar imágenes externas. Es decir, que puedes subir tus imágenes a Draw.io y colocarlas en el diagrama para darle un toque más realista.

draw-io-diagramas-online-2

Además, puedes configurar el texto cambiando el formato. Tienes una opción para elegir la tipografía y cambiarla de acorde con tu imagen corporativa.

Puedes exportar y guardar el diagrama en diferentes formatos, entre los que se encuentran los formatos PNG, GIF, JPG o PDF. También puedes guardar el esquema en formato.XML para seguir editando y modificando más adelante.

Es más, incluso puedes imprimirlo.

Y esto no esto, si quieres insertar el diagrama en una página web, puedes hacerlo a través de un código que obtienes desde el programa.

Para terminar con la serie de características, cabe destacar que la aplicación puedes conectarla con Google Drive en un solo clic, para tener todos tus diagramas bien organizados y al alcance en cualquier momento.

Si tuviese que hacerte un resumen rápido de las características, te diría las siguientes:

  1. Facilidad de Uso
    • Interfaz intuitiva y fácil de navegar.
    • Arrastra y suelta elementos para crear diagramas rápidamente.
  2. Amplia Gama de Plantillas y Formas
    • Plantillas predefinidas para diferentes tipos de diagramas.
    • Biblioteca extensa de formas y símbolos.
  3. Integración y Colaboración
    • Integración con Google Drive, OneDrive, Dropbox, y otros servicios en la nube.
    • Funcionalidades de colaboración en tiempo real para trabajar en equipo.
  4. Exportación y Compartición
    • Exporta diagramas en formatos como PNG, JPEG, SVG, PDF y más.
    • Comparte diagramas fácilmente a través de enlaces o integrándolos en sitios web.
infografia-draw-io-online

Ventajas de Draw.io

En resumen, las ventajas de esta aplicación son las siguientes:

  • Es una herramienta muy intuitiva y de fácil manejo.
  • Lo haces todo online, sin necesidad de descargar e instalar ningún software.
  • La aplicación es gratuita, por lo que no necesitas ninguna licencia.
  • Y cómo no, la mejor ventaja de todas, es que está en español.

¿Cómo funciona Draw.io?

Esta herramienta de diagramas online te lo pone fácil. A continuación te dejo un vídeo tutorial en el que te explico cómo puedes empezar a crear tus diagramas online.

Paso a paso

Aunque tienes todo explicado en el vídeo, quizá la primera parte, la de acceder al editor de la herramienta sea un poco más compleja. Por eso te voy a explicar el paso a paso detallado con imágenes:

1.- Entra a draw.io desde tu navegador de internet.

2.- Elige con cual de las 3 aplicaciones quieres conectarte. La que te recomiendo es Google Drive. Así podrás tener todos tus diagramas en un mismo sitio.

draw-io-que-es

3.- Autoriza a la herramienta de diagramas online a acceder a tu Google Drive.

draw-io-tutorial

4.- Elige con qué cuenta de Gmail quieres acceder.

draw-io-caracteristicas

5.- Ahora tienes dos opciones. Abrir un diagrama ya existente o crear uno nuevo. Si es la primera vez que vas a utilizar la herramienta, dale a crear uno nuevo.

herramienta-diagramas-online

6.- En esta pantalla, haciendo clic en las categorías, podrás acceder a las diferentes plantillas.

diagramas-draw-io

7.- Puedes crear un diagrama en blanco, como el que te muestro en el vídeo, o puedes editar una de las plantillas.

Para seleccionar una plantilla tan solo tienes que elegir una de las categorías y escoger el diagrama que más te guste o se adapte a tu idea.

diagramas-online-draw-io

8.- No me detengo en cómo puedes editar el diagrama, porque encontrarás una explicación mucho más extensa en el vídeo.

Instalar Draw.io en tus aplicaciones de Google

Si quieres tener un acceso más rápido a esta herramienta de diagramas online, puedes instalarla junto con las aplicaciones de Google. Las aplicaciones de Google que puedes utilizar por defecto son Google Drive, Hojas de cálculo, Google Keep, entre otras.

Para instalar esta herramienta junto con las demás aplicaciones, tan solo tienes que poner draw.io para escritorio en tu buscador de Google y entrar el la primera página.

draw-io-para-escritorio

A continuación le darías al botón azul de la derecha que dice Añadir a Chrome y ya está. Tendrías esta herramienta instalada junto con las demás aplicaciones de Google para que te sea más fácil utilizarla cuando la necesites.

instalar-draw-io-escritorio

Conclusión

Para terminar, me gustaría animarte a que utilices esta herramienta para diagramas online. Tiene muchas características que hacen de ella una herramienta muy potente.

Además, no deja de actualizarse, por lo que cada vez podrás encontrar nuevas funcionalidades.

Draw.io es una herramienta poderosa y versátil que facilita la creación de diagramas de manera eficiente y colaborativa. Su accesibilidad y amplia gama de funcionalidades la hacen ideal tanto para profesionales como para usuarios ocasionales.

Curso de diseño web personalizado.

Deja de sufrir por tu sitio web: gana tiempo y diseña webs profesionales con Elementor. Rápido y gratuito.

Responsable » EI Pierre Lacoste
Finalidad de la recogida y tratamiento de los datos personales » enviarte comunicaciones comerciales y Newsletter informativo.
Legitimación » Consentimiento.
Destinatarios » No se ceden a terceros. Se pueden producir transferencias. Los datos están ubicados en los servidores de Siteground (proveedor de hosting de www.beatrizcalvo.com) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/aviso-legal.htm)
Derechos » Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en (hola@beatrizcalvo.com) así como el derecho a presentar una reclamación ante una autoridad de control.
Información adicional: En https://beatrizcalvo.com/politica-de-privacidad,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

Sigue leyendo:

stripe-que-es-y-como-usarlo
Negocios online

Stripe qué es y cómo usarlo: Guía 2024

Stripe es una plataforma de pagos en línea que permite a las empresas aceptar pagos de manera segura y eficiente. Se destaca por su facilidad de uso y por su amplia gama de características que facilitan la gestión de transacciones.

La plataforma de pagos Stripe ha sido creada para simplificar la aceptación de pagos en internet de manera segura. Además, con una amplia gama de características, se adapta a las necesidades de negocios de todos los tamaños, desde pequeñas startups hasta grandes empresas.

En esencia, Stripe permite a las empresas gestionar pagos online. Facilita la transferencia de dinero de clientes a comerciantes de manera segura.

Leer más »
Portales-de-WeTransfer
Marketing digital

[Guía 2024] Cómo usar los Portales de WeTransfer: Tutorial y Características

En esta guía de 2024, exploraremos en detalle qué son los Portales de WeTransfer y cómo utilizarlos para simplificar el proceso de envío de archivos a clientes. Aprende a configurar y sacar el máximo provecho de esta herramienta esencial para diseñadores, fotógrafos y más.

Este post ha sido generado a través de las peticiones de los usuarios que leyeron el artículo de WeTransfer: qué es y cómo usarlo.

¿Qué tipo de archivos necesitaremos compartir con el cliente para revisar?

Como sabes este blog está centrado en el diseño web, así que si eres diseñador web, diseñador gráfico, copywriter, etc. podrás hacer uso de los Portales de WeTransfer de forma gratuita.

Imaginemos que, por ejemplo, necesitas enviar los archivos generados para una identidad visual o después de una sesión fotográfica necesitas enviar las imágenes de la página web o incluso los documentos del contenido que has escrito para la web.

Leer más »
que-poner-en-la-pagina-de-inicio-de-una-web
Blog

[2024] Qué poner en la página de Inicio de una web

La página de Inicio es el elemento más importante de toda la web y juega un papel fundamental. Si no sabes qué poner en la página de Inicio de tu web o estás cometiendo los errores más comunes del diseño web, mal vamos.

Una de las únicas oportunidades que tienes para conseguir nuevos y más clientes (incluso para captar más leads) por Internet es a través de la página de Inicio o Home de tu web.

En ella, aparte de elegir los mejores colores, puedes aplicar estrategias de captación de leads que te permitirán generar visitas a la web.

Leer más »
captacion-de-leads
Blog

Técnicas infalibles para la captación de leads

¿Sabes de qué va la captación de leads? Ya hemos hablado de la importancia de generar visitas a tu web y de tener un sitio estupendo por dentro y por fuera. Pero nos falta algo importantísimo que hoy resolvemos. 

La famosa, imprescindible y deseada lista de suscriptores. Saber captar el nombre y correo electrónico de nuestros potenciales clientes, clasificarlos y conducirlos, es uno de los factores esenciales para aumentar las ventas. 

Demos un recorrido por el arte de atraerlos a todos, o lo que es lo mismo, captar leads para alimentar tu embudo de ventas

Leer más »
wetransfer-que-es-como-usar
Blog

[Guía 2024] Wetransfer: Qué es y cómo usarlo

En este tutorial de WeTransfer, vamos a ver qué es y cómo usarlo.

Imaginemos que estás pensando en crear una web en WordPress.

Cuando contratas el tipo de diseñador web que se ajusta a tus necesidades, la identidad visual y los textos e imágenes de la página web que quieras publicar, por lo general, debes facilitárselos tú.

Para ello, puedes utilizar WeTransfer, la herramienta que te facilitará la vida a la hora de enviar archivos.

Por cierto, si eres diseñador, quizá te interese aprender a usar los Portales de WeTransfer, de forma que compartir archivos con tus clientes sea pan comido.

Si quieres ampliar la información sobre qué documentación deberías enviar a tu diseñador web a través de WeTransfer, puedes leer este artículo sobre qué poner en la página de inicio de tu web, este otro sobre las diferentes partes de una web y, para terminar, este en el que te hablo del contenido de nuestra web.

P.D: Quédate hasta el final porque te contaré 2 trucos que puedes aplicar para ahorrarte adquirir la versión PRO a la hora de enviar archivos.

Leer más »
disenar-pagina-web-estrategica
Blog

Cómo diseñar una página web estratégica y profesional para convertir visitantes en clientes

Diseñar una página web estratégica no es tarea sencilla. Cuando no tienes ni idea de cómo funciona el diseño y quieres hacer la web por ti mismo, sientes que te estás metiendo en un embolado -y grande-.

El diseño web es un mundo enorme, en el que hay que saber de todo para que la web funcione a la perfección. Al fin y al cabo tu página web no deja de ser tu casa digital.

Allá por 2018 cuando me lancé a esto de emprender, decidí que iba a ser diseñadora web. Más que nada porque el tema de los ordenadores se me daba bien y siempre he tenido facilidad para los programas.

El caso es que si lo llego a saber, me lo pienso dos veces.

Leer más »

Curso de
diseño web
personalizado.

Deja de sufrir por tu sitio web: gana tiempo y diseña webs profesionales con Elementor. Rápido y gratuito.

Responsable » EI Pierre Lacoste
Finalidad de la recogida y tratamiento de los datos personales » enviarte comunicaciones comerciales y Newsletter informativo.
Legitimación » Consentimiento.
Destinatarios » No se ceden a terceros. Se pueden producir transferencias. Los datos están ubicados en los servidores de Siteground (proveedor de hosting de www.beatrizcalvo.com) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/aviso-legal.htm)
Derechos » Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en (hola@beatrizcalvo.com) así como el derecho a presentar una reclamación ante una autoridad de control.
Información adicional: En https://beatrizcalvo.com/politica-de-privacidad,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

Comparte: