Generador de diagramas de flujo
Generador de diagramas de flujo: convierte relaciones A → B en sintaxis Mermaid flowchart TD copiable.
Una flecha por relación
Cada línea debe tener la forma «origen -> destino». «Inicio -> Revisar» crea una conexión; «Revisar -> Publicar» añade la siguiente. Una línea sin flecha se rechaza para que un paso suelto no desaparezca silenciosamente del diagrama.
Los textos pueden contener espacios. El generador retira comillas y acentos graves que interferirían con la sintaxis, pero conserva las palabras visibles de cada nodo.
Cómo representar una bifurcación
Repite el nodo de salida en dos líneas. Por ejemplo, «Revisar -> Aprobar» y «Revisar -> Corregir» dibujan dos flechas desde Revisar. Para volver a unirlas, añade «Aprobar -> Publicar» y «Corregir -> Revisar». La herramienta no inventa condiciones; puedes incluir «sí» o «no» en el propio nombre del nodo.
IDs distintos para etiquetas distintas
Mermaid necesita identificadores aunque la persona lea etiquetas. El motor asigna n1, n2 y n3 según aparecen las etiquetas únicas. Reutilizar «Revisar» en varias relaciones apunta al mismo ID, mientras «Revisión» crea otro nodo. Así se evitan colisiones provocadas por espacios o tildes.
Código Mermaid y dibujo descargable
La salida textual empieza por flowchart TD, orientación de arriba abajo. La página también interpreta las relaciones para mostrar una vista SVG. Puedes descargar ese dibujo como SVG o PNG, o copiar Mermaid para cambiar estilos y formas en un editor compatible.
Qué no interpreta
No admite la gramática completa de Mermaid como entrada: subgraphs, clases, flechas etiquetadas y declaraciones de estilo quedan fuera. El formulario espera exclusivamente pares unidos por ->. La vista previa coloca nodos con un esquema simple y puede necesitar edición cuando el flujo es grande.
Ciclos y procesos que vuelven atrás
Una relación puede regresar a un nodo anterior. «Corregir -> Revisar» crea ese ciclo explícito y reutiliza Revisar. Úsalo para iteraciones reales, pero evita conexiones redundantes en ambos sentidos si no expresan algo distinto: demasiadas flechas cruzadas pueden volver ilegible la vista aunque el Mermaid sea válido.
Fuentes y referencias
Continúa con estas herramientas
Preguntas frecuentes
¿Cómo dibujo dos salidas desde el mismo paso?
Escribe dos líneas con el mismo origen y destinos diferentes. Ambas compartirán nodo inicial y tendrán su propia flecha.
¿Puedo añadir un paso sin conectarlo?
No. Toda línea necesita origen y destino. Conéctalo a otro nodo o añádelo después en un editor Mermaid.
¿Qué significa flowchart TD?
Indica un diagrama de flujo orientado de arriba abajo. Es la cabecera que genera esta página.
¿Por qué aparecen nombres como n1?
Son identificadores internos seguros. La etiqueta que ves conserva el texto del paso y puede repetirse en varias conexiones.
¿El PNG conserva el código Mermaid?
No. El PNG es una imagen. Descarga SVG o copia el bloque Mermaid si quieres seguir editando estructura y texto.
¿Acepta sintaxis Mermaid ya escrita?
No como entrada completa. Usa una relación origen -> destino por línea y lleva después el resultado a un editor Mermaid.
Herramienta de OCC Tools