Creador de diagramas de flujo con Mermaid
Crea diagramas de flujo arrastrando formas en un lienzo o escribiendo código Mermaid, y TryMermaid mantiene ambos sincronizados. Empieza con el ejemplo de abajo y luego exporta PNG o SVG o comparte un enlace.
Updated · Editable on the visual canvas
Ejemplo de diagrama de flujo
Rendering preview…
flowchart TD
A[Pedido recibido] --> B{¿Está pagado?}
B -->|Sí| C[Preparar artículos]
B -->|No| D[Enviar recordatorio de pago]
D --> B
C --> E([Enviar pedido])¿Qué es un diagrama de flujo?
Un diagrama de flujo es un diagrama que muestra los pasos de un proceso como formas conectadas por flechas. Los rectángulos son pasos, los rombos son decisiones y las flechas indican el orden en que ocurren las cosas. En Mermaid describes un diagrama de flujo como texto que empieza con la palabra clave flowchart y una dirección.
Cuándo usar un diagrama de flujo
- Documentar el proceso de incorporación o de aprobación de una empresa
- Planificar la lógica de una función antes de programarla
- Explicar el recorrido de un usuario por una aplicación
- Mostrar los pasos de decisión de un manual de operaciones
Cómo crear un diagrama de flujo en Mermaid
- Paso 1
Abre el editor
Abre TryMermaid con el ejemplo de esta página, o empieza un diagrama nuevo con flowchart TD (de arriba abajo) o flowchart LR (de izquierda a derecha) en la primera línea.
- Paso 2
Añade pasos y decisiones
Arrastra rectángulos y rombos al lienzo y renómbralos ahí mismo, o escribe nodos como A[Inicio] y B{¿Aprobado?} en el panel de código.
- Paso 3
Conecta las formas
Conecta dos formas en el lienzo o escribe A --> B en el código. Añade una etiqueta a un enlace con A -->|Sí| B.
- Paso 4
Exporta o comparte
Ajusta la disposición, comprueba la vista previa y exporta un PNG o SVG, o comparte un enlace con tu equipo.
Sintaxis de diagrama de flujo: chuleta
| Elemento | Sintaxis | Qué hace |
|---|---|---|
| Paso | A[Texto] | Rectángulo con texto |
| Decisión | B{¿Texto?} | Rombo con una pregunta |
| Inicio o fin | C([Texto]) | Forma redondeada tipo estadio |
| Subproceso | D[[Texto]] | Rectángulo con bordes dobles |
| Base de datos | E[(Texto)] | Forma de cilindro |
| Enlace | A --> B | Flecha entre dos formas |
| Enlace con etiqueta | A -->|Sí| B | Flecha con texto encima |
| Enlace punteado | A -.-> B | Flecha discontinua |
| Dirección | flowchart LR | Hacia dónde crece el diagrama |
| Subgrupo | subgraph Título … end | Agrupa nodos en una caja |
Preguntas frecuentes sobre diagrama de flujo
¿Puedo crear un diagrama de flujo de Mermaid sin escribir código?
Sí. En TryMermaid, los diagramas de flujo se pueden construir por completo en el lienzo de arrastrar y soltar. Cada forma y conexión que añades se escribe automáticamente como código Mermaid, así que puedes pasar al panel de código cuando quieras.
¿Cuál es la diferencia entre graph y flowchart en Mermaid?
Dibujan el mismo tipo de diagrama. graph es la palabra clave original y flowchart es la más reciente, que admite novedades como formas adicionales y opciones de enlace. Usa flowchart para los diagramas nuevos.
¿Cómo cambio la dirección de un diagrama de flujo?
Cambia la dirección después de la palabra clave en la primera línea: flowchart TD dibuja de arriba abajo, LR de izquierda a derecha, BT de abajo arriba y RL de derecha a izquierda.