¿Cómo cambio la dirección de un diagrama de flujo Mermaid?

Agrega la dirección después de la palabra clave `flowchart`: `flowchart TD` para de arriba a abajo, `flowchart LR` para de izquierda a derecha, `flowchart BT` para de abajo a arriba y `flowchart RL` para de derecha a izquierda. El valor predeterminado es TD. Cambiar a LR a menudo funciona mejor para flujos de procesos amplios con muchos pasos secuenciales.

¿Qué formas de nodos están disponibles en los diagramas de flujo Mermaid?

Mermaid admite muchas formas de nodos: `[Texto]` para rectángulos, `(Texto)` para rectángulos redondeados, `([Texto])` para formas de estadio, `{Texto}` para diamantes (decisiones), `((Texto))` para círculos, `>Texto]` para formas asimétricas y `[[Texto]]` para subrutinas. Elegir la forma correcta mejora la legibilidad del diagrama de un vistazo.

¿Puedo agregar etiquetas a las flechas del diagrama de flujo?

Sí. Agrega una etiqueta entre barras verticales en la flecha: `A -->|Sí| B` o `A -- Etiqueta --> B`. Para flechas punteadas con etiquetas usa `A -.->|Nota| B`. Las etiquetas en las ramas de decisión (como Sí/No) son esenciales para que los diamantes de decisión no sean ambiguos.

¿Por qué Claude o ChatGPT generan `graph TD` en lugar de `flowchart TD`?

`graph TD` es la sintaxis heredada de Mermaid para diagramas de flujo; funciona de manera idéntica a `flowchart TD` y es totalmente compatible en todas las versiones actuales de Mermaid. Ambos se renderizan exactamente de la misma manera. La palabra clave más nueva `flowchart` se prefiere en la documentación de Mermaid v10+, pero `graph` continuará funcionando indefinidamente.

Visor de Diagramas de Flujo Mermaid

Pega código de diagrama de flujo Mermaid y obtén una vista previa al instante. Exporta a SVG o PNG. Visor gratuito basado en navegador, sin instalación.

Código Mermaid

Vista Previa

Introduce código Mermaid para previsualizar tu diagrama

Los diagramas de flujo Mermaid son el tipo de diagrama más utilizado en el desarrollo de software. Mapean árboles de decisión, procesos de negocio, lógica de algoritmos y flujos de trabajo del sistema utilizando nodos conectados por aristas dirigidas o no dirigidas. La sintaxis admite múltiples direcciones de diseño: de arriba a abajo (TD), de izquierda a derecha (LR), de abajo a arriba (BT) y de derecha a izquierda (RL), lo que facilita la adaptación a la dirección de lectura natural de su flujo de trabajo. Con el auge de los asistentes de codificación de IA, los diagramas de flujo Mermaid se han convertido en la salida predeterminada cuando los desarrolladores piden a Claude, ChatGPT o Gemini que ilustren un proceso o algoritmo. En lugar de cambiar a una herramienta de diagramación GUI, los ingenieros y gerentes de producto pegan el código generado directamente en un visor para verificar la lógica antes de incluirlo en la documentación o compartirlo con compañeros de equipo. El visor de diagramas de flujo de Zolkit renderiza el diagrama en vivo mientras escribe, resalta los errores de sintaxis en línea y le permite exportar un SVG perfecto en píxeles para wikis y READMEs o un PNG de 2x para presentaciones. Los casos de uso comunes incluyen flujos de incorporación, mapas de canalizaciones CI/CD, manuales de respuesta a incidentes y ciclos de vida de solicitudes de API.

Diagramas Relacionados

← Visor de Diagramas Mermaid Visor de Diagramas de Estado Mermaid Visor de Mapas Mentales Mermaid Visor de Diagramas ER de Mermaid

Visor y Exportador de Diagramas Mermaid Online Gratis

El Visor de Diagramas Mermaid de Zolkit te permite pegar cualquier código Mermaid y ver un diagrama renderizado al instante — sin instalación, sin registro, sin subidas a servidores. Todo se ejecuta en tu navegador, lo que lo convierte en la forma más rápida de verificar diagramas generados por IA desde Claude, ChatGPT o Gemini. Soporta todos los tipos principales de diagramas Mermaid: diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, diagramas de estado, mapas mentales, gráficos Git, gráficos circulares y líneas de tiempo.

Vista Previa Instantánea en Vivo

Los diagramas se renderizan automáticamente mientras escribes, con un retardo de 300 ms para que nunca se sienta lento.

100% Privado

Todo el renderizado ocurre en tu navegador usando mermaid.js. Tu código nunca se envía a ningún servidor.

Exportar SVG y PNG

Descarga tu diagrama como un SVG vectorial nítido o un PNG de alta resolución 2× listo para documentos y presentaciones.

Todos los Tipos de Diagramas Mermaid

Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, mapas mentales, gráficos Git y más.

Listo para Diagramas de IA

Construido para la era de la IA — previsualiza directamente diagramas generados por Claude, ChatGPT, Gemini o cualquier LLM.

Siempre Gratis

No se necesita cuenta, sin límites de uso, sin marcas de agua. El visor Mermaid de Zolkit es completamente gratuito para siempre.

Cómo Previsualizar un Diagrama Mermaid

1
Pega tu código Mermaid en el editor de la izquierda — puedes copiarlo desde un asistente de IA o escribirlo manualmente.
2
El diagrama se renderiza instantáneamente en el panel de vista previa de la derecha. Si hay un error de sintaxis, un mensaje explica el problema.
3
Haz clic en 'Exportar SVG' o 'Exportar PNG' para descargar tu diagrama como un archivo listo para documentación, presentaciones o compartir.