Texto a Diagrama de Flujo
Escribe sintaxis Mermaid y genera diagramas de flujo al instante. Sin servidor — procesamiento 100% local.
Error de sintaxis
Acerca de
Texto a Diagrama de Flujo es una herramienta gratuita para navegador que genera automáticamente diagramas de flujo, secuencias y más a partir de la sintaxis Mermaid.
Todo el renderizado se realiza localmente con Mermaid.js — ningún dato se envía a servidores externos, lo que lo hace ideal para flujos de trabajo confidenciales.
Exporta como SVG o PNG al instante. Sin instalación de aplicaciones — solo abre el navegador y empieza a diagramar.
Cómo usarlo
Escribe el código
Escribe la sintaxis Mermaid en el editor izquierdo. Un diagrama de ejemplo ya está cargado para ayudarte a empezar.
Visualiza en tiempo real
La vista previa de la derecha se actualiza en tiempo real. Si hay un error de sintaxis, se muestra un mensaje de ayuda.
Guarda como SVG o PNG
Haz clic en "Guardar SVG" o "Guardar PNG" para descargar el diagrama directamente a tu dispositivo.
Glosario
- Mermaid.js
- Librería JavaScript que genera diagramas a partir de sintaxis de texto. Compatible de forma oficial con Markdown de GitHub.
- Diagrama de flujo
- Representación visual de un proceso o flujo de trabajo. Se crea en Mermaid con
graph TDograph LR. - SVG (Scalable Vector Graphics)
- Formato de imagen vectorial independiente de la resolución. Se puede ampliar sin perder calidad, ideal para presentaciones e impresión.
- Nodo (Node)
- Cada elemento del diagrama (rectángulo, círculo, rombo, etc.). Se define en Mermaid como
A[Etiqueta]. - Arista (Edge)
- La flecha o línea que conecta los nodos. Se representa con
-->(flecha) o---(línea). - Diagrama de secuencia
- Diagrama que muestra interacciones entre actores en el tiempo. Se crea con
sequenceDiagram.
Preguntas frecuentes
- Q.¿Puedo usar texto en español dentro de los nodos?
- Sí. Mermaid.js es compatible con Unicode, por lo que puedes usar cualquier idioma dentro de los nodos.
- Q.¿Qué hago si el diagrama se sale del área de vista previa?
- El área de vista previa permite desplazamiento. También puedes cambiar la dirección del diagrama de "graph TD" (arriba a abajo) a "graph LR" (de izquierda a derecha) para que quepa mejor.
- Q.¿Mi diagrama se envía a algún servidor?
- No. Todo el renderizado se realiza localmente en tu navegador con Mermaid.js. El contenido de tu diagrama nunca se transmite a ningún servidor externo.
- Q.¿Cuál es la diferencia entre SVG y PNG?
- SVG es un formato vectorial que no pierde calidad al ampliar, ideal para presentaciones y web. PNG es un formato de mapa de bits, conveniente para pegar directamente en documentos.
- Q.¿Puedo crear diagramas distintos al de flujo?
- Sí. Mermaid.js soporta diagramas de secuencia (sequenceDiagram), diagramas de clases (classDiagram), gráficos de Gantt (gantt) y más.
- Q.¿Se guarda mi código entre sesiones?
- La versión actual no guarda el código entre sesiones. Para editarlo más tarde, copia el código Mermaid del editor y guárdalo localmente.
Casos de uso
Documentación de sistemas
Documenta flujos de llamadas API o esquemas de bases de datos con Mermaid e insértalos en documentación técnica.
Actas de reunión y flujos
Visualiza rápidamente flujos de trabajo o procesos de aprobación de reuniones y compártelos con tu equipo.
Diapositivas de presentación
Cuando dibujar diagramas en PowerPoint es demasiado lento, créalos en Mermaid, expórtalos como PNG y pégalos.
Materiales educativos
Visualiza pasos de algoritmos o líneas de tiempo como diagramas de flujo para crear materiales de estudio más fáciles de entender.
Sintaxis Mermaid
Diagrama de flujo básico (graph)
graph TD
A[Inicio] --> B{Condición}
B -->|Sí| C[Proceso A]
B -->|No| D[Proceso B]
C --> E[Fin]
D --> EReferencia de formas de nodo
A[Texto] — RectánguloB(Texto) — RedondeadoC{Texto} — RomboD((Texto)) — CírculoE>Texto] — AsimétricoF[(BD)] — Base de datosEnviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.