Diagrama de flujo de algoritmos y procesos online

Herramienta en línea para construir diagramas de flujo de algoritmos y procesos de negocio. El diagrama existe a la vez como dibujo y como texto Mermaid: escribe una línea y aparece un bloque, mueve un bloque y cambia el texto, y la colocación manual sobrevive a la edición del texto. La disposición y las flechas que rodean los bloques las calcula el propio editor.

Cómo construir el diagrama

1
Empiece por un ejemplo o por el texto

Cuatro plantillas: proceso simple, bifurcación, algoritmo con bucle y diagrama con carriles. Una línea como «A[Acción] --> B{¿Condición?}» crea dos bloques y una flecha.

2
Edite directamente en el diagrama

«Bloque» añade un paso, «Conectar» traza una flecha, un doble clic cambia la etiqueta de un bloque o de una flecha y los bloques se arrastran con el mouse. Ctrl y la rueda del mouse cambian el zoom.

3
Llévese el resultado

En la pestaña «Exportar»: PNG, SVG, PDF en hoja A4, imagen al portapapeles, texto para README y un enlace que abre el diagrama completo.

🔥 Populares ahora mismo
🗣️ Texto a Voz ✨ Mejorar video ✂️ Recortar audio ✨ Mejorador de audio 🎭 Cambiador de voz 🎙️ Eliminador de voces 🎬 Crear Video desde Audio 🎬 Recortar video

Cree el diagrama con texto, con el mouse o a partir de una descripción

Doble clic: etiqueta · Tab: siguiente paso · flechas: mover · Ctrl+rueda: zoom
¿No sabes qué probar?
800+ herramientas — abre una sorpresa
🎲 Sorpréndeme

Funciones

Texto y dibujo: un mismo documento
A la izquierda el diagrama como dibujo, a la derecha el mismo proceso como texto. Escribe una línea y aparece un bloque; mueve un bloque, cambia su forma o la etiqueta de una flecha y el texto cambia.
Mover un bloque no se pierde al editar el texto
El ajuste se guarda como desplazamiento respecto al lugar que calculó la disposición: añade tres líneas, el diagrama se reconstruye y su bloque queda donde estaba respecto a sus vecinos. En los editores que dibujan desde el texto, la reconstrucción suele borrar la colocación manual.
Diagrama a partir de una descripción o de código
Describa el proceso con palabras o pegue código en Python, C, C++, Java, JavaScript o Pascal: la red neuronal devuelve el texto del diagrama con condiciones, bucles y entrada-salida. Ajustarlo con una frase conserva sus desplazamientos. Disponible con Premium.
Las flechas rodean los bloques en vez de atravesarlos
La línea va en horizontal y en vertical y gira hacia un pasillo libre entre filas. El retorno «volver al paso 2» se lleva por el lado y no tacha el dibujo.
Formas que se leen sin leyenda
Inicio y fin, acción, condición, entrada-salida, preparación, almacenamiento, subproceso, conector: la notación habitual de los diagramas de flujo de algoritmos.
PNG, SVG, PDF e imagen al portapapeles
SVG es vectorial para maquetar, PDF es una hoja A4 para un trabajo o un procedimiento, PNG y la imagen copiada van a Word, a un chat o a una presentación. El estilo en blanco y negro sirve para imprimir.

Qué puede hacer

  • Hacer un diagrama de flujo de un algoritmo con condiciones y bucles
  • Dibujar un proceso de negocio con carriles por departamento
  • Construir un diagrama de flujo a partir de código o de una descripción
  • Convertir texto Mermaid en dibujo y al revés
  • Mover bloques a su gusto sin perder la disposición automática
  • Exportar el diagrama a PDF en hoja A4 o en SVG vectorial
  • Compartir el diagrama con un enlace o pegarlo en un README como bloque mermaid

Por qué aquí

Los editores de diagramas se dividen en dos bandos. Unos construyen el dibujo desde el texto y, al reconstruirlo, borran la colocación de los bloques. Otros dejan mover todo al píxel pero no tienen fuente de texto, así que el diagrama no se puede generar ni comparar entre versiones. Aquí conviven los dos lados: el texto sigue siendo Mermaid normal y los ajustes manuales son una capa aparte que sobrevive a reescribirlo.

Preguntas sobre diagramas de flujo

Moví un bloque y luego añadí una línea al texto. ¿Se pierde el ajuste?

No. El ajuste no se guarda como un punto del lienzo, sino como un desplazamiento respecto al lugar que la disposición calculó para el bloque. El diagrama se reconstruyó entero con la línea nueva y su bloque se movió con él, conservando exactamente el desplazamiento que le dio. El botón «Diseño automático» en la esquina del lienzo quita todos los ajustes de golpe.

¿Qué código se puede convertir en diagrama de flujo?

Python, C, C++, C#, Java, JavaScript, Pascal y lenguajes parecidos, hasta 4000 caracteres por vez. Las condiciones se dibujan como rombos con las etiquetas «sí» y «no», un bucle como condición con retorno, la entrada y la salida como paralelogramos y las funciones del mismo código como subprocesos. El resultado llega como texto del diagrama, así que un bloque de más se quita con una línea.

¿Por qué la flecha va en zigzag y no en línea recta?

Una línea recta hacia la fila vecina suele atravesar un bloque ajeno. Aquí la flecha gira hacia un pasillo libre entre filas: tiene una esquina más, pero no tacha nada y se ve adónde llega.

¿Cómo dibujo un retorno a un paso anterior?

Escriba una flecha hacia atrás, «D --> B», o presione «Conectar» en el bloque de abajo y luego en el de arriba. El editor detecta el ciclo, dispone el diagrama de arriba abajo como siempre y lleva el retorno por el lado, de modo que se lee como un retorno.

¿Se puede abrir el diagrama en otro editor?

Sí, el texto del diagrama es Mermaid normal. Lo aceptan GitHub, GitLab, Notion, Obsidian y los editores Mermaid. «Para README» lo copia directamente como bloque ```mermaid, que GitHub dibuja como diagrama en la descripción del proyecto.

¿Cómo inserto el diagrama en un trabajo académico o en un procedimiento?

O bien «PDF · A4», que coloca el diagrama en una hoja con márgenes de 15 mm a unos 300 puntos por pulgada, o bien «Copiar imagen» y Ctrl+V directamente en Word. Para una impresora en blanco y negro elija antes «B/N para imprimir»: en esa impresora los rellenos de color salen como manchas grises bajo el texto.

¿Qué hay dentro del enlace al diagrama?

El texto del diagrama y los desplazamientos de sus bloques, comprimidos en la dirección de la página. Quien recibe el enlace ve el mismo diagrama con la misma colocación y puede editarlo. Su propio diagrama no se pierde: vuelve con Ctrl+Z.

💡 ¿Quieres que mejoremos esta herramienta para ti?

Podemos hacerlo — ¡y es! Solo envíanos un mensaje rápido con tu idea. Si quieres comentarla en detalle, déjanos tu email y te responderemos. Puedes mantener el anonimato.

¿Cómo valoras esta herramienta?

¡Gracias por tu valoración!
¿Quieres contar más? ¡Deja un comentario!
¡Gracias! Tu comentario aparecerá tras la moderación.
¿Para quién es esta herramienta?
🎓 Estudiantes 📚 Educadores y profesores 💻 Desarrolladores y profesionales de TI 📋 Productividad

Al subir contenido, usted confirma que está facultado para comunicar su contenido a terceros y se compromete a no incluir datos personales de terceros. Más detalles en las Condiciones de uso. Proveedores de IA Tembrica es un producto independiente. No estamos afiliados, avalados ni patrocinados por los creadores de los modelos y servicios aquí indicados; sus nombres se usan solo para indicar con exactitud qué motor ejecuta cada herramienta.

Publicada Actualizada Autor: