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

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

Guía

Cómo usar cada zona de la pantalla

Aprenda a usar cada zona de la pantalla, incluidos ajustes, entrada, vistas previas, resultados y guardado.

01 HOWTO

Área de entrada de sintaxis

Escribe sintaxis Mermaid en el editor izquierdo. Puedes empezar con una plantilla, añadir sugerencias según el tipo de diagrama y comprobar la estructura en la vista previa.

Pantalla que muestra Área de entrada de sintaxis en Vista previa de MermaidPantalla que muestra Área de entrada de sintaxis en Vista previa de Mermaid

Qué puede hacer esta zona

  • Puedes escribir sintaxis Mermaid directamente
  • Puedes insertar una plantilla inicial del tipo de diagrama
  • Puedes añadir sugerencias acordes al diagrama actual
  • Puedes corregir la entrada mirando los errores de la vista previa

Dónde usarla

01
Entrada de sintaxis

Puedes introducir sintaxis Mermaid para diagramas de flujo, secuencia, clases y otros tipos.

Pantalla que muestra dónde usar Entrada de sintaxis en Vista previa de MermaidPantalla que muestra dónde usar Entrada de sintaxis en Vista previa de Mermaid
02
Selección de plantilla

Cuando el editor está vacío, puedes elegir un tipo de diagrama e insertar su estructura inicial.

Pantalla que muestra dónde usar Selección de plantilla en Vista previa de MermaidPantalla que muestra dónde usar Selección de plantilla en Vista previa de Mermaid
03
Sugerencias de entrada

Puedes añadir nodos, conexiones, ramas u otros elementos adecuados en la posición del cursor.

Pantalla que muestra dónde usar Sugerencias de entrada en Vista previa de MermaidPantalla que muestra dónde usar Sugerencias de entrada en Vista previa de Mermaid
04
Revisión de errores

Si hay un problema de sintaxis, puedes corregirlo usando el mensaje de la vista previa.

Pantalla que muestra dónde usar Revisión de errores en Vista previa de MermaidPantalla que muestra dónde usar Revisión de errores en Vista previa de Mermaid

02 HOWTO

Sugerencias de entrada y ayudas de edición

Usa las plantillas y sugerencias sobre el editor, el historial de la barra superior y las acciones de limpiar o copiar del encabezado. Esta área sirve para crear la base del diagrama, añadir piezas y reutilizar un borrador.

Pantalla que muestra Sugerencias de entrada y ayudas de edición en Vista previa de MermaidPantalla que muestra Sugerencias de entrada y ayudas de edición en Vista previa de Mermaid

Qué puede hacer esta zona

  • Puedes insertar una plantilla según el tipo de diagrama
  • Puedes añadir piezas acordes al diagrama actual
  • Puedes volver a un estado reciente desde el historial
  • Puedes limpiar o copiar la sintaxis actual

Dónde usarla

01
Plantillas

Puedes elegir una base para un diagrama de flujo, secuencia, clases u otro tipo.

Pantalla que muestra dónde usar Plantillas en Vista previa de MermaidPantalla que muestra dónde usar Plantillas en Vista previa de Mermaid
02
Sugerencias

Puedes añadir nodos, conexiones, ramas, bucles o relaciones acordes a la sintaxis actual.

Pantalla que muestra dónde usar Sugerencias en Vista previa de MermaidPantalla que muestra dónde usar Sugerencias en Vista previa de Mermaid
03
Historial y borrador

El navegador conserva el borrador actual y el historial permite volver a un estado reciente de edición.

Pantalla que muestra dónde usar Historial y borrador en Vista previa de MermaidPantalla que muestra dónde usar Historial y borrador en Vista previa de Mermaid
04
Limpiar entrada

Puedes borrar la sintaxis actual y crear un nuevo diagrama.

Pantalla que muestra dónde usar Limpiar entrada en Vista previa de MermaidPantalla que muestra dónde usar Limpiar entrada en Vista previa de Mermaid
05
Copiar sintaxis

Puedes copiar el borrador a un README, una especificación o una nota externa.

Pantalla que muestra dónde usar Copiar sintaxis en Vista previa de MermaidPantalla que muestra dónde usar Copiar sintaxis en Vista previa de Mermaid

03 HOWTO

Zona de vista previa y tema

Use el panel de vista previa para confirmar el diagrama Mermaid renderizado y cambiar el tema antes de compartirlo. Si falla el renderizado, el error aparece en esta misma zona.

Pantalla que muestra Zona de vista previa y tema en Vista previa MermaidPantalla que muestra Zona de vista previa y tema en Vista previa Mermaid

Qué puede hacer esta zona

  • Puede cambiar el tema de vista previa
  • Puede confirmar el diagrama renderizado
  • Puede revisar errores de renderizado
  • Puede volver a la entrada y corregir la sintaxis

Dónde usarla

01
Cambiar tema

Cambie el fondo y los colores de línea para ajustarlos al lugar donde compartirá el diagrama.

Pantalla que muestra dónde usar Cambiar tema en Vista previa MermaidPantalla que muestra dónde usar Cambiar tema en Vista previa Mermaid
02
Revisar diagrama

Compruebe si la sintaxis Mermaid se renderiza como el diagrama esperado.

Pantalla que muestra dónde usar Revisar diagrama en Vista previa MermaidPantalla que muestra dónde usar Revisar diagrama en Vista previa Mermaid
03
Revisar errores

Cuando el diagrama no se renderiza, lea el error antes de editar la sintaxis.

Pantalla que muestra dónde usar Revisar errores en Vista previa MermaidPantalla que muestra dónde usar Revisar errores en Vista previa Mermaid
04
Editar entrada

Use el resultado de la vista previa como referencia mientras corrige la sintaxis.

Pantalla que muestra dónde usar Editar entrada en Vista previa MermaidPantalla que muestra dónde usar Editar entrada en Vista previa Mermaid

04 HOWTO

Zona de formato, copia y descarga

Use los controles sobre la vista previa para elegir SVG o PNG, y luego copie o descargue el diagrama renderizado. Si no se puede exportar, revise el error y vuelva a la entrada.

Pantalla que muestra Zona de formato, copia y descarga en Vista previa MermaidPantalla que muestra Zona de formato, copia y descarga en Vista previa Mermaid

Qué puede hacer esta zona

  • Puede elegir SVG o PNG como formato de salida
  • Puede copiar el diagrama renderizado como imagen
  • Puede descargar el diagrama renderizado como archivo
  • Puede copiar la sintaxis Mermaid original
  • Puede revisar errores cuando no se puede exportar

Dónde usarla

01
Formato de salida

Cambie entre SVG y PNG según dónde vaya a compartir o pegar el diagrama.

Pantalla que muestra dónde usar Formato de salida en Vista previa MermaidPantalla que muestra dónde usar Formato de salida en Vista previa Mermaid
02
Copiar imagen

Copie el diagrama renderizado en el formato seleccionado y péguelo en un documento o chat.

Pantalla que muestra dónde usar Copiar imagen en Vista previa MermaidPantalla que muestra dónde usar Copiar imagen en Vista previa Mermaid
03
Descargar imagen

Guarde el diagrama renderizado como archivo SVG o PNG.

Pantalla que muestra dónde usar Descargar imagen en Vista previa MermaidPantalla que muestra dónde usar Descargar imagen en Vista previa Mermaid
04
Copiar sintaxis

Copie la sintaxis Mermaid que genera el diagrama y compártala junto con la imagen.

Pantalla que muestra dónde usar Copiar sintaxis en Vista previa MermaidPantalla que muestra dónde usar Copiar sintaxis en Vista previa Mermaid
05
Revisar errores

Si el diagrama no se puede exportar, revise el error y vuelva a la entrada.

Pantalla que muestra dónde usar Revisar errores en Vista previa MermaidPantalla que muestra dónde usar Revisar errores en Vista previa 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

Referencia detallada por zonas para entrada JSON, formato, compresión, validación, revisión de resultado y copia.

Ver guía
Cómo usar Formateador JSON

Cómo usar PlantUML Preview

Referencia detallada por zonas para entrada PlantUML, acciones de edición, vista previa, temas, salida y errores.

Ver guía
Cómo usar PlantUML Preview

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

Guía por zonas de la pantalla para IP, conexión, datos observados por el servidor, navegador, dispositivo, permisos y JSON compartible.

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