Señor Herramientas

Cómo usar

Cómo usar Vista previa de Mermaid

Una herramienta de vista previa para diagramas Mermaid. Es útil cuando quiere probar rápidamente la sintaxis mientras construye un diagrama o comprobar el aspecto de diagramas para especificaciones. Cambie de tema para comparar cómo se verá el resultado antes de compartirlo.

Usar Vista previa de Mermaid
Miniatura de Vista previa de MermaidMiniatura de Vista previa de Mermaid
Pasos
2 pasos
Guía
Con capturas
Contenido
Notas y FAQ

Casos de uso

Cuándo usarla

  • Comprobar rápidamente un diagrama de flujo para una especificación
  • Probar y ajustar la sintaxis de diagramas de secuencia
  • Revisar el aspecto de un diagrama Mermaid antes de añadirlo a la documentación
  • Pulir rápidamente un diagrama de secuencia antes de una revisión de diseño
  • Probar la sintaxis de diagramas ER o Gantt
  • Comprobar el aspecto de un diagrama antes de compartirlo con el equipo

Capacidades

Qué puede hacer esta herramienta

  • Comprobar la sintaxis y el diagrama de Mermaid lado a lado
  • Cambiar de tema
  • Confirmar errores de sintaxis y copiar el código fuente
  • Guardar o copiar el diagrama como SVG o PNG
  • Mostrar mensajes de error debajo de la vista previa en tiempo real
  • Admitir diagramas de flujo, secuencia, ER y otros tipos principales

Pasos

Pasos

Se enumeran el orden de las operaciones y los puntos de comprobación para que pueda avanzar mientras mira la pantalla.

PASO 1

Introduzca la sintaxis Mermaid

Escriba la sintaxis Mermaid en el área de entrada de la izquierda. El contenido se refleja automáticamente en la vista previa de la derecha.

Captura recortada del área de entrada en Vista previa de Mermaid mostrando el editor de sintaxis MermaidCaptura móvil recortada del área de entrada en Vista previa de Mermaid mostrando el editor de sintaxis Mermaid

Puntos de comprobación

  • La sintaxis Mermaid aparece en el área de entrada
  • La vista previa de la derecha se actualiza automáticamente

Acciones en esta pantalla

01
Introducir sintaxis Mermaid

Escriba directamente sintaxis de diagramas de flujo o secuencia y refléjela enseguida en el diagrama.

Vista recortada que muestra solo el área de entrada en Vista previa de MermaidVista móvil recortada que muestra solo el área de entrada en Vista previa de Mermaid
02
Borrar la entrada

Borre la sintaxis Mermaid actual y empiece de nuevo desde un ejemplo mínimo.

Vista que muestra dónde está el botón para borrar la entrada en Vista previa de MermaidVista móvil que muestra dónde está el botón para borrar la entrada en Vista previa de Mermaid
03
Copiar la sintaxis

Copie directamente la sintaxis Mermaid y péguela en un README o documento de especificación.

Vista recortada que muestra solo el botón de copiar sintaxis Mermaid en Vista previa de MermaidVista móvil recortada que muestra solo el botón de copiar sintaxis Mermaid en Vista previa de Mermaid

PASO 2

Revise el tema y la salida

Compruebe el diagrama de la derecha mientras cambia de tema. Use copiar o descargar SVG y PNG según cómo quiera compartir el resultado.

Captura recortada del área de vista previa en Vista previa de Mermaid mostrando el diagrama renderizado y los controles de temaCaptura móvil recortada del área de vista previa en Vista previa de Mermaid mostrando el diagrama renderizado y los controles de tema

Puntos de comprobación

  • El diagrama Mermaid aparece a la derecha
  • La apariencia cambia al cambiar de tema
  • Puede usar acciones de copiar o descargar SVG y PNG

Acciones en esta pantalla

01
Cambiar temas

Cambie entre GitHub Light, GitHub Dark, Presentation, Notebook y Terminal para revisar los colores de fondo y líneas.

Vista recortada que muestra solo el selector de tema en Vista previa de MermaidVista móvil recortada que muestra solo el selector de tema en Vista previa de Mermaid
02
Revisar el diagrama

Use copiar o descargar SVG para reutilizar la salida en formato vectorial.

Vista que muestra las acciones de salida SVG en Vista previa de MermaidVista móvil que muestra las acciones de salida SVG en Vista previa de Mermaid
03
Salida PNG

Use copiar o descargar PNG cuando quiera compartirlo como imagen.

Vista que muestra las acciones de salida PNG en Vista previa de MermaidVista móvil que muestra las acciones de salida PNG en Vista previa de Mermaid

Notas

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Qué conviene revisar

Empiece con la sintaxis mínima que genere un diagrama

Si añade muchos elementos a la vez, será más difícil identificar la causa de un error. Empiece por la sintaxis válida más pequeña y luego añada ramas o nodos.

Qué conviene revisar

Cambie de tema para revisar la visibilidad de líneas y texto

Incluso con la misma sintaxis Mermaid, los colores de fondo y líneas cambian según el tema. Revisarlo con un tema cercano al destino final reduce retrabajos.

Nota

Los errores de sintaxis aparecen debajo de la vista previa

Si la sintaxis es incorrecta, se muestra un mensaje de error en el área de vista previa. Cuando no aparezca ningún diagrama, compruebe el mensaje de error y corrija la sintaxis antes de intentarlo de nuevo.

FAQ

Preguntas sobre Vista previa de Mermaid

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿Puedo guardar el diagrama como imagen?

Sí. Se admiten SVG y PNG, tanto para copiar como para descargar.

¿Dónde puedo ver los errores de sintaxis?

Los mensajes de error se muestran debajo de la vista previa, para que pueda identificar enseguida la parte rota mientras edita.

¿Qué tipos de diagrama están disponibles?

Se admiten diagramas de flujo, secuencia, clase, ER, Gantt y otros tipos estándar de Mermaid.

¿Dónde puedo consultar la sintaxis?

La documentación oficial de Mermaid incluye la sintaxis de cada tipo de diagrama. Puede escribir la sintaxis y ver el resultado en esta misma página.

¿Puedo cambiar el color de fondo del diagrama?

Cambiar de tema modifica el estilo general, incluido el fondo. Pruebe distintos temas para comparar el aspecto.

¿Cómo comparto un diagrama como imagen?

Guarde el diagrama como SVG o PNG y comparta el archivo, o cópielo al portapapeles.

Siguientes guías

Guías relacionadas

Las guías relacionadas se muestran a continuación para que pueda continuar sin perderse.

Cómo usar Formateador JSON

Esta guía explica cómo pegar JSON, formatearlo, validar la estructura y copiar el resultado.

Ver guía
Cómo usar Formateador JSON

Cómo usar PlantUML Preview

Esta guía explica cómo escribir sintaxis PlantUML, revisar la estructura del diagrama y elegir el formato de salida.

Ver guía
Cómo usar PlantUML Preview

Cómo usar Comprobador de IP e información de red

Esta guía explica cómo revisar por orden el entorno de conexión actual, el navegador, el dispositivo y la información observada por el servidor.

Ver guía
Cómo usar Comprobador de IP e información de red
Herramientas de imagenHerramientas de videoHerramientas de textoHerramientas de desarrolloHerramientas de diseñoHerramientas de generación