Mermaid Preview
Mermaid Preview — se ejecuta en el navegador. No se guardan datos.
Vista previa de Mermaid
Introduce los valores y pulsa Calcular.
Resultado renderizado
Renderiza sintaxis Mermaid como flowchart y sequenceDiagram en el navegador. La entrada no se envía a un servidor.
Cómo usar
- Pega sintaxis como flowchart o sequenceDiagram en Origen Mermaid. También hay un ejemplo de marcador de posición.
- Haz clic en Vista previa. La primera vez, la biblioteca mermaid se carga desde un CDN.
- Revisa el diagrama SVG en Resultado de renderizado abajo.
- Si la sintaxis es incorrecta, aparece un mensaje de error. Corrige el origen y previsualiza otra vez.
- Restablecer restaura el origen de muestra o vacía el campo.
Conceptos clave
La vista previa de Mermaid sirve para dibujar diagramas de flujo y de secuencia antes de confirmarlos en un repositorio. Carga de forma dinámica mermaid 10 de jsDelivr y renderiza SVG en el navegador. El origen no se envía a un servidor. La sintaxis es casi la misma que Markdown de GitHub, pero algunas extensiones pueden diferir según la versión.
Los tipos que admite mermaid 10, como diagramas de clase, Gantt y ER, se pueden probar en general. Los grafos muy grandes pueden forzar el navegador. Los enlaces de imagen externos o la inyección HTML pueden limitarse por seguridad. Usa el número de línea del mensaje de error para corregir flechas e IDs de nodo.
Ejemplo
Previsualiza el ejemplo flowchart TD donde A inicio va a la condición B, Sí completa y No reintenta, y se dibujan cajas y un rombo. Escribe participantes y flechas como sequenceDiagram y aparecen mensajes en orden temporal. Un espacio en un id de nodo causa un error de sintaxis, así que separa un id inglés y una etiqueta entre corchetes. Los diagramas de secuencia se quedan más cortos si reúnes las declaraciones de participantes arriba. Al ponerlo en un documento, copia solo origen que se renderizó bien para reducir huecos de versión. Si pruebas la misma entrada varias veces, restablece y pega de nuevo para no mezclarla con la salida anterior. En un ordenador compartido, vacía los campos al terminar para que el texto original no quede en el monitor. Cerrar la pestaña del navegador también borra lo que acabas de pegar; no hace falta enviar una petición de borrado a un servidor. Los nombres de botones y títulos de campo coinciden con la herramienta de arriba de la página, así que puedes seguir este artículo sobre la marcha. Si el resultado está vacío, primero comprueba que los campos obligatorios estén rellenos y que no haya un mensaje de error oculto. Este artículo es una guía de uso; no significa que los datos de entrada se almacenen en un repositorio externo. En el móvil, el botón de copiar puede pedir permiso del portapapeles: concédelo y pulsa otra vez.
Relacionado: Vista previa de Markdown · Vista previa de fórmulas LaTeX
Preguntas frecuentes
¿Qué versión es la vista previa de Mermaid?
Carga de forma dinámica mermaid 10 de jsDelivr.
¿El origen se almacena en un servidor?
No. Se renderiza solo en el navegador.
¿Por qué el dibujo difiere de GitHub?
La versión mermaid de GitHub y la 10 pueden diferir. Simplifica la sintaxis y dibuja otra vez.
¿Puedo guardar como PNG?
Esta pantalla es un resultado de renderizado SVG. No hay botón de descarga PNG.
¿Dónde veo los errores de sintaxis?
Aparecen en el mensaje de guía bajo el resultado de renderizado.
¿También funcionan los diagramas de secuencia?
Sí. Los ejemplos de flowchart y sequenceDiagram se describen en la pista.
Última revisión: 2026-09-04