¿Qué es el Editor de Diagramas Mermaid?
El Editor de Diagramas Mermaid es una herramienta interactiva que te permite escribir código de diagramas usando sintaxis Mermaid.js y ver el resultado renderizado al instante. Ya sea que necesites un diagrama de flujo rápido, un diagrama de secuencia detallado o un gráfico Gantt de proyecto, puedes crearlo directamente en tu navegador con código simple basado en texto.
Mermaid es un lenguaje de diagramación de código abierto popular que convierte texto similar a markdown en diagramas profesionales. Este editor proporciona una interfaz de panel dividido con un editor de código en un lado y una vista previa en vivo en el otro, para que puedas ver tus cambios mientras escribes.
Tipos de Diagramas Compatibles
Diagrama de Flujo
Diagrama de Secuencia
Diagrama de Clases
Diagrama de Estados
Diagrama ER
Gráfico Gantt
Gráfico Circular
Mapa Mental
Gráfico Git
Cómo Usar el Editor de Diagramas Mermaid
Primeros Pasos
Cargar Diagrama de Ejemplo
El editor se carga con un diagrama de flujo de ejemplo. Puedes comenzar a editarlo inmediatamente o elegir un tipo de diagrama diferente del menú desplegable Plantillas.
Escribe Tu Código
Escribe tu código Mermaid en el panel izquierdo. La vista previa del diagrama se actualiza automáticamente mientras escribes, dándote retroalimentación visual instantánea.
Corregir Errores
Si hay un error de sintaxis, aparece un mensaje de error debajo del editor para ayudarte a identificar y corregir el problema rápidamente.
Usar Plantillas
Haz clic en el botón Plantillas en la barra de herramientas para elegir entre 9 plantillas de diagramas integradas. Cada plantilla proporciona un ejemplo funcional que puedes modificar según tus necesidades.
Editar Código
Indentación Inteligente
Atajos de teclado para formato de código eficiente
- Presiona Tab para insertar indentación (4 espacios)
- Presiona Shift+Tab para eliminar indentación
Números de Línea y Guardado Automático
Experiencia de edición mejorada
- Los números de línea ayudan a rastrear la estructura del código
- Tu código se guarda automáticamente y se restaura cuando regresas
Controles de Vista Previa
- Usa los botones de zoom (+/−) o Ctrl + rueda del ratón para ampliar entre 25% y 300%
- Haz clic en el botón de reinicio para volver al zoom del 100%
- Arrastra el controlador de redimensionamiento entre paneles para ajustar la división editor/vista previa
Exportar Tu Diagrama
Exportación SVG
Exportación PNG
Copiar SVG
Características
Vista Previa en Vivo
Ve tu diagrama renderizado en tiempo real mientras escribes. La vista previa se actualiza automáticamente con un pequeño retraso, para que obtengas retroalimentación visual instantánea sin interrumpir tu flujo de trabajo.
9 Tipos de Diagramas
Crea diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas ER, gráficos Gantt, gráficos circulares, mapas mentales y gráficos Git — todo desde código basado en texto usando sintaxis Mermaid.js.
Plantillas Integradas
Comienza rápidamente con plantillas listas para usar para cada tipo de diagrama compatible. Cada plantilla incluye un ejemplo funcional que demuestra la sintaxis y estructura.
Editor de Código con Números de Línea
El editor incluye números de línea, indentación Tab/Mayús+Tab y retroalimentación de errores en tiempo real. Los errores de sintaxis se muestran claramente debajo del editor para que puedas corregir problemas inmediatamente.
Opciones de Exportación Flexibles
Exporta tus diagramas terminados como SVG para gráficos vectoriales escalables, o PNG para imágenes de alta resolución a escala 2x. También puedes copiar el código SVG directamente a tu portapapeles.
Zoom y Redimensionamiento
Amplía la vista previa del 25% al 300% usando botones o Ctrl + rueda del ratón. Arrastra el controlador de redimensionamiento para ajustar los tamaños de los paneles editor y vista previa según tu preferencia.
Guardado Automático
Tu código se guarda automáticamente en el almacenamiento local de tu navegador. Cuando regreses al editor, tu trabajo estará exactamente donde lo dejaste.
Modo Oscuro
El editor es totalmente compatible con el modo oscuro. Cuando cambias temas, el tema del diagrama Mermaid se actualiza automáticamente para coincidir, asegurando que tus diagramas siempre se vean bien.
Tus Datos Permanecen Privados
Todo el renderizado ocurre en tu navegador
- Sin cargas — Tu código nunca sale de tu dispositivo
- Sin seguimiento — No recopilamos datos de uso
Preguntas Frecuentes
¿Qué es Mermaid.js?
Mermaid.js es una biblioteca JavaScript de código abierto que genera diagramas y gráficos a partir de definiciones basadas en texto. En lugar de dibujar diagramas manualmente, escribes código simple que describe la estructura, y Mermaid lo renderiza como un diagrama visual.
Este enfoque hace que los diagramas sean controlables por versión, fáciles de actualizar y perfectos para incrustar en documentación, wikis y archivos markdown.
¿Qué tipos de diagramas puedo crear?
Este editor admite 9 tipos de diagramas:
- Diagramas de flujo
- Diagramas de secuencia
- Diagramas de clases
- Diagramas de estados
- Diagramas ER (entidad-relación)
- Gráficos Gantt
- Gráficos circulares
- Mapas mentales
- Gráficos Git
¿Cómo aprendo la sintaxis de Mermaid?
La forma más fácil de comenzar es seleccionar una plantilla del menú desplegable. Cada plantilla proporciona un ejemplo funcional que puedes estudiar y modificar.
La documentación de Mermaid.js también proporciona referencias de sintaxis completas para cada tipo de diagrama. Comienza con ejemplos simples y agrega complejidad gradualmente a medida que te familiarices con la sintaxis.
¿Cuál es la diferencia entre la exportación SVG y PNG?
Formato Vectorial
- Se escala a cualquier tamaño sin perder calidad
- Ideal para documentos y sitios web
- Puede editarse en software de gráficos vectoriales
- Tamaño de archivo más pequeño para diagramas simples
Imagen Rasterizada
- Exportada a resolución 2x para visualización nítida
- Adecuada para presentaciones y uso compartido
- Funciona en pantallas de alta DPI
- Compatibilidad universal
¿Se guarda mi código?
Sí, tu código se guarda automáticamente en el almacenamiento local de tu navegador. Cuando revisitas el editor, se restaura tu último código.
¿Por qué mi diagrama muestra un error?
Mermaid tiene reglas de sintaxis específicas para cada tipo de diagrama. Los problemas comunes incluyen:
- Flechas faltantes (p. ej.,
-->o--->) - Palabras clave incorrectas o declaraciones de tipo de diagrama
- Corchetes o comillas no coincidentes
- IDs de nodo inválidos o caracteres especiales
- Indentación incorrecta en ciertos tipos de diagramas
Verifica el mensaje de error debajo del editor para obtener detalles sobre qué salió mal. El mensaje generalmente indica el número de línea y el tipo de error.
¿Puedo usar esto en dispositivos móviles?
Sí. En pantallas más pequeñas, el diseño cambia a una disposición vertical con el editor en la parte superior y la vista previa debajo. Todas las características permanecen disponibles, incluidas plantillas, opciones de exportación y controles de zoom.
Para la mejor experiencia en dispositivos móviles, recomendamos usar orientación horizontal cuando trabajes con diagramas complejos.
Aún no hay comentarios. ¡Sé el primero en comentar!