Vista previa de diagramas Mermaid
Introduce código Mermaid y revisa diagramas como flowchart y sequenceDiagram en una vista previa SVG en tiempo real.
Documentación con diagramas
Previsualiza código Mermaid como un diagrama SVG al instante
La vista previa de diagramas Mermaid renderiza sintaxis Mermaid en el navegador para preparar diagramas para README, wikis y documentos de diseño.
Introduce sintaxis Mermaid habitual en documentación, como flowchart, sequenceDiagram, classDiagram y stateDiagram, y revisa el resultado SVG a la derecha.
Si la sintaxis no es válida, el área de vista previa muestra el estado de error junto con el código original para facilitar la corrección.
Copia el SVG renderizado o el código Mermaid original y continúa con README, issues o documentación técnica.
¿Cuándo usarlo?
Úsalo para comprobar flujos de servicio, secuencias de API, transiciones de estado o estructuras de arquitectura simples antes de añadirlas a la documentación.
¿Puedo insertar ejemplos?
Elige un ejemplo de flowchart, sequenceDiagram, classDiagram o stateDiagram sobre el editor para rellenar la entrada al instante.
¿Cómo se muestran los errores?
Cuando falla el renderizado de Mermaid, se muestra el mensaje de error junto con el bloque de código fuente para corregir la sintaxis.
¿Qué puedo copiar?
Copiar SVG copia el resultado renderizado; Copiar fuente copia el código Mermaid introducido.
El Mermaid renderer se carga desde una CDN externa, y la entrada se procesa solo dentro del navegador.
Vista previa de diagramas Mermaid Área de vista previa de diagramas Mermaid
Cómo usar
- 1 Escribe o pega sintaxis Mermaid en el área de entrada izquierda.
- 2 Si necesitas un ejemplo, elige flowchart, sequenceDiagram, classDiagram o stateDiagram sobre la entrada.
- 3 Revisa el diagrama SVG o el mensaje de error en la vista previa de la derecha.
- 4 Cuando el resultado sea correcto, copia lo necesario con Copiar SVG o Copiar fuente.
Casos de uso comunes
- Previsualizar un flowchart para README
- Comprobar un sequenceDiagram de llamadas API
- Revisar un borrador de transición de estados o relación de class
Preguntas frecuentes
¿Qué diagramas Mermaid puedo previsualizar?
La herramienta renderiza como SVG la sintaxis Mermaid común admitida por Mermaid renderer, incluidos flowchart, sequenceDiagram, classDiagram y stateDiagram.
¿Qué ocurre si hay un error de sintaxis?
Si falla el renderizado, el área de vista previa muestra un estado de error y el código fuente original como bloque de código.
¿El código del diagrama se envía al servidor?
No. Esta herramienta es solo client-side y el código Mermaid se procesa en el navegador.