Generador de diagramas de flujo
Describa un proceso con una cadena de pasos por línea y obtenga un diagrama de flujo junto con el código Mermaid que lo genera.
Procesado localmente en tu navegador/ Tus datos se quedan en tu navegador.
¿Qué es Generador de diagramas de flujo?
Un diagrama de flujo muestra los pasos de un proceso y las decisiones que lo bifurcan. Esta herramienta ofrece dos formas de crearlo: escribir un esquema sencillo con flechas ("Inicio -> Comprobar -> ¿Válido? -sí-> Guardar") o pegar código Mermaid completo para tener control total.
En modo esquema cada línea es una cadena de pasos. Las etiquetas idénticas reutilizan el mismo nodo, una etiqueta que termina en "?" se convierte en un rombo de decisión, Inicio y Fin pasan a ser terminales redondeados y "-sí->" coloca una etiqueta sobre la flecha. El código Mermaid generado aparece junto al diagrama para que pueda copiarlo y refinarlo.
¿Cómo funciona?
- Escriba una cadena por línea, uniendo los pasos con "->" y etiquetando una flecha con "-texto->".
- Elija la dirección (arriba-abajo, izquierda-derecha, abajo-arriba, derecha-izquierda) y un tema.
- Revise el diagrama y el panel "Código Mermaid"; pegue su propio código Mermaid en cualquier momento.
- Exporte el diagrama como SVG o PNG, o copie el código Mermaid.
Casos de uso habituales
- Documentar un proceso de registro, aprobación o escalado de soporte.
- Explicar un algoritmo o una regla de negocio con ramas de decisión.
- Convertir notas de una reunión sobre un flujo de trabajo en una imagen compartible.
- Obtener rápido un primer borrador en Mermaid y refinarlo después en el editor.
Ejemplos
Prueba esta entrada en la herramienta de arriba:
Start -> Check input -> Valid? -yes-> Save record -> Send confirmation -> End Valid? -no-> Show error message -> Check input
Privacidad
Generador de diagramas de flujo se ejecuta por completo en tu navegador. El texto o los archivos que proporcionas se procesan en tu dispositivo y no se suben, registran ni almacenan en nuestros servidores.
Limitaciones
El modo esquema solo cubre nodos, decisiones y flechas con etiqueta. Los subgrafos, los estilos personalizados y otras funciones avanzadas requieren código Mermaid. Separe las ramas de una decisión repitiendo su etiqueta en otra línea.
Preguntas frecuentes
¿Cómo dibujo una decisión con ramas sí y no?
Termine la etiqueta con un signo de interrogación y escriba una línea por rama: "¿Válido? -sí-> Guardar" y "¿Válido? -no-> Mostrar error". Ambas líneas comparten el mismo rombo.
¿Qué hace la opción de dirección con mi código?
Solo reescribe la primera línea ("flowchart TD" pasa a "flowchart LR", por ejemplo). Elija "Mantener la del código" para respetar una dirección que usted escribió.
¿Puedo pegar código Mermaid en lugar de un esquema?
Sí. Si el texto empieza con una palabra clave de Mermaid como flowchart o graph, se renderiza tal cual, aplicando solo la dirección y el tema opcionales.
Herramientas relacionadas
Editor Mermaid en vivo
Un editor Mermaid libre: escriba el diagrama como código y obtenga una vista renderizada en vivo que puede exportar.
Markdown y diagramas
Generador de diagramas de secuencia
Escriba un mensaje por línea y vea quién habla con quién, en orden, como diagrama de secuencia.
Markdown y diagramas
Generador de diagramas de estados
Liste las transiciones entre estados y obtenga un diagrama de máquina de estados con los eventos sobre las flechas.
Markdown y diagramas
Generador de mapas mentales
Escriba sus ideas como una lista con sangría y véalas como un mapa mental radial.
Markdown y diagramas
Generador de diagramas de clases
Escriba código classDiagram con clases, miembros y relaciones y vea el diagrama UML al instante.
Markdown y diagramas
Generador de diagramas de Gantt
Liste tareas con un inicio y una duración y obtenga un cronograma de proyecto con secciones y dependencias.
Markdown y diagramas