Editor Mermaid
Escribe sintaxis Mermaid y observa una vista previa en vivo de diagramas de flujo, secuencia o clase. Exporta como SVG, PNG o JPEG.
Acerca del Editor de Flowchart Mermaid
Escribe sintaxis de diagramas Mermaid en el editor y observa el diagrama de flujo, diagrama de secuencia, diagrama de clase u otros tipos de diagramas renderizados actualizándose instantáneamente. Carga una plantilla para comenzar rápidamente, luego exporta tu diagrama como SVG, PNG o JPEG o copia la sintaxis para editarla más tarde.
¿Qué es esta herramienta?
Un editor de diagramas Mermaid en vivo que renderiza diagramas de flujo, diagramas de secuencia, diagramas de clase y más mientras escribes. Escribe diagramas como texto usando sintaxis Mermaid y observa instantáneamente el resultado renderizado, luego exporta como imagen.
Cómo usar
- Elige una plantilla (Diagrama de Flujo, Secuencia, Clase, etc.) para cargar sintaxis Mermaid de ejemplo, o escribe la tuya.
- Observa cómo la vista previa del diagrama se actualiza automáticamente a medida que editas la sintaxis.
- Haz clic en Exportar Imagen para descargar el diagrama como SVG, PNG o JPEG, o Copiar Sintaxis para copiar el código Mermaid.
- Si la sintaxis tiene un error, el último diagrama válido permanece visible mientras lo corriges.
Casos de uso común
- Bosquejar un diagrama de flujo para un proceso o árbol de decisiones
- Documentar una secuencia de llamadas API o interacción del sistema
- Dibujar un diagrama de clase o un diagrama entidad-relación para el diseño de software
- Incrustar diagrama como código en documentación o archivos README
Consejos y trucos
- La sintaxis de Mermaid es texto plano, por lo que los diagramas se pueden controlar versiones junto con tu código.
- Usa la exportación SVG para diagramas nítidos en la documentación, y PNG o JPEG para compartir rápidamente en chat o diapositivas.
Preguntas frecuentes
¿Qué tipos de diagramas admite la sintaxis Mermaid?
Diagramas de flujo, diagramas de secuencia, diagramas de clase, diagramas de estado, diagramas entidad-relación y varios otros tipos de diagrama — elige una plantilla para cargar sintaxis de ejemplo para cada uno.
¿Qué pasa si cometo un error de sintaxis mientras edito?
El editor mantiene el último diagrama válido renderizado visible para que tu trabajo en progreso se mantenga visible, en lugar de borrar la vista previa — corrige el error de sintaxis y el diagrama se actualiza automáticamente.
¿Qué formato de exportación debería elegir: SVG, PNG o JPEG?
SVG es basado en vectores y se mantiene nítido a cualquier nivel de zoom, ideal para documentación. PNG y JPEG son formatos raster mejor adaptados para compartir rápidamente en aplicaciones de chat o diapositivas donde la compatibilidad con SVG puede ser limitada.
¿Puedo almacenar mis diagramas en control de versiones junto con mi código?
Sí. Como los diagramas de Mermaid se escriben como sintaxis de texto plano, puedes confirmar la fuente .mmd directamente a git y rastrear cambios en el diagrama como haríascon cualquier otro archivo de código.
¿Se envía mi sintaxis de diagrama a un servidor para renderizar?
No. Los diagramas se renderizan completamente del lado del cliente en tu navegador — tu sintaxis y contenido del diagrama nunca se cargan en ningún lado.
Escribe sintaxis Mermaid y observa una vista previa en vivo de diagramas de flujo, secuencia o clase. Exporta gratis como SVG, PNG o JPEG, sin registro requerido.