SciFig
Comenzar gratis

Convertidor gratuito de Mermaid a PNG y SVG

Pega código Mermaid, visualiza el diagrama en tu navegador y descárgalo en PNG o SVG. Los textos, flechas y grupos quedan reunidos en una imagen que se puede compartir sin un editor de código.

Describe lo que necesitas en el campo de arriba.

Empieza con hasta 150 créditos gratis|Sin tarjeta de crédito

Únete con una invitación y consigue hasta 350 créditos gratis en tu primer día.

3 motores de figuras · más de 500 plantillasCada etiqueta editable · más de 60 esquemas de colorPPTX editable · SVG en capas · 8K PNG / JPG

Convertidor gratuito de Mermaid a PNG y SVG— plantillas y ejemplos

Actualizado

Diagrama mermaid

Convertidor gratuito de Mermaid a PNG y SVG

Convierte código en una imagen nítida con el fondo y la escala de exportación que necesites.

La conversión de Mermaid a PNG transforma el código de un diagrama en una imagen para documentos y presentaciones. Pega código Mermaid, visualiza el diagrama en tu navegador y descárgalo en PNG o SVG. Los textos, flechas y grupos quedan reunidos en una imagen que se puede compartir sin un editor de código.

Crear el diagrama Mermaid
Diagrama de flujo Mermaid que conecta pregunta de investigación, experimento, análisis y figura científica
  • Pegar el código del diagrama
  • Elegir la escala del PNG
  • Exportar con fondo transparente
  • Descargar el SVG

Funciones del diagrama Mermaid

Convierte código en una imagen nítida con el fondo y la escala de exportación que necesites.

Representar el diagrama a partir del código

SciFig dibuja los nodos, relaciones y textos definidos en tu código Mermaid. La imagen sigue el código, sin reinterpretarlo mediante IA. Usa un diagrama de flujo, de secuencia o de clases para convertir una explicación textual en una figura para tu documento.

  • Pegar el código del diagrama
  • Visualizar nodos y relaciones
  • Conservar subgráficos y conexiones
Visualizar el código Mermaid

Exportar imágenes PNG legibles

Elige la escala adecuada para el documento o la diapositiva. Una escala mayor proporciona más píxeles sin cambiar las proporciones del diagrama. El PNG reúne los textos y trazados, por lo que puedes insertarlo en una aplicación que no interprete Mermaid.

  • Elegir la escala del PNG
  • Conservar el diagrama completo
  • Insertar la imagen en diapositivas
Preparar el PNG

Elegir el fondo de la imagen

Un fondo transparente permite colocar el diagrama sobre una diapositiva de color; un fondo blanco lo convierte en una imagen autónoma. SciFig aplica la elección al archivo exportado, manteniendo la estructura y los textos del diagrama que aparece en la vista previa.

  • Exportar con fondo transparente
  • Utilizar un fondo blanco
  • Adaptar la imagen a la diapositiva
Elegir el fondo

Conservar una versión vectorial

Descarga el diagrama Mermaid en SVG cuando necesites un archivo que se pueda ampliar manteniendo líneas y textos vectoriales. El PNG resulta práctico para documentos cotidianos. Ambos formatos se generan a partir del mismo código y del mismo diagrama representado.

  • Descargar el SVG
  • Conservar los trazados vectoriales
  • Guardar código e imagen juntos
Exportar el diagrama Mermaid

Cómo crear la figura

Prepara la figura con los controles siguientes y descarga el resultado.

  1. Pegar el código Mermaid

    Pega el código de un diagrama de flujo, de secuencia o de clases compatible. Incluye los textos y relaciones que deben aparecer en la imagen: esas instrucciones determinan la estructura que se dibuja.

  2. Visualizar el diagrama

    Ejecuta la representación para ver nodos, grupos y conexiones. Si falla, revisa la sintaxis y el tipo de diagrama compatible y vuelve a intentarlo. La vista previa resultante también se utiliza para descargar PNG y SVG.

  3. Elegir fondo y escala

    Selecciona un fondo blanco o transparente y una escala para el PNG. La transparencia se integra con diapositivas de color. Una escala mayor aumenta los píxeles disponibles sin modificar las proporciones del diagrama.

  4. Descargar PNG o SVG

    Descarga PNG para documentos y presentaciones o SVG para conservar una versión vectorial. Guarda el código Mermaid con los archivos exportados; así podrás partir de la fuente original cuando cambien las relaciones o la estructura.

Usos del diagrama Mermaid

Una figura rotulada conecta la explicación con un apoyo visual para investigación y docencia.

Diagrama de flujo Mermaid que conecta pregunta de investigación, experimento, análisis y figura científica

Incluir un proceso en un informe

Convierte el código Mermaid de un procedimiento en PNG para mostrar sus pasos y decisiones sin exigir un editor al lector. Guarda la imagen con el informe y vuelve a generarla cuando cambie el proceso.

Explorar este ejemplo
Diagrama de secuencia Mermaid con la introducción del código, la vista previa y la exportación PNG por un investigador

Compartir una secuencia con el equipo

Representa los participantes y sus mensajes en un diagrama de secuencia. Exporta la interacción completa para una reunión: el orden de los mensajes permanece visible en una presentación o documento sin una integración de Mermaid.

Explorar este ejemplo
Diagrama de clases Mermaid que conecta Experiment y Figure con sus campos y métodos

Documentar relaciones entre clases

Un anexo técnico puede necesitar las relaciones de clases en lugar de una captura del código. Exporta el diagrama en SVG para una figura ampliable o en PNG para un documento que acepte imágenes de mapa de bits.

Explorar este ejemplo
Diagrama de flujo Mermaid que conecta el código, un paso PNG transparente y el fondo de una diapositiva

Adaptar el diagrama a una diapositiva

Coloca un PNG transparente sobre el fondo de la presentación. Elige una escala que conserve la legibilidad de los textos al tamaño final. Los cambios estructurales se hacen en el código antes de producir una nueva imagen.

Explorar este ejemplo
Flujo Mermaid con un subgrafo de preparación de muestras seguido de la medición de respuesta y la comparación de condiciones

Explicar etapas agrupadas

Los subgráficos delimitan grupos de etapas dentro de un proceso mayor. Exporta los límites y textos completos para distinguir cada grupo del recorrido general. Es útil en procedimientos con varios equipos o bloques de actividades relacionados.

Explorar este ejemplo
Diagrama de flujo Mermaid que conecta pregunta de investigación, experimento, análisis y figura científica

Guardar una figura portátil del proyecto

Conserva el código Mermaid y las versiones PNG y SVG en la carpeta del proyecto. La imagen permite compartir el resultado y el código registra las relaciones. SciFig FlowChart (diagramas de flujo) ofrece otra vía para crear diagramas a partir de una descripción.

Explorar este ejemplo

Cómo usan SciFig los investigadores

Nuestro documento de métodos incluía un flujo de trabajo guardado en un archivo Mermaid. Convertí Mermaid a PNG para mostrar los mismos puntos de decisión en el informe sin recurrir a otro editor. Al conservar el código junto a la imagen exportada, el grupo tenía claro dónde modificar el proceso cuando cambiara el protocolo.

Lena W.

Ingeniera de software de investigación, Universidad de Cambridge

Herramientas gratis

Una herramienta para cada figura científica

120 generadores especializados para la figura científica que necesitas: cada uno se abre en el espacio de trabajo adecuado con un ejemplo.

Ilustraciones, estructuras y diagramas conceptuales

60 herramientas
Figura de ejemplo: Generador de estructuras químicasGenerador de estructuras químicasFigura de ejemplo: Creador de resúmenes gráficosCreador de resúmenes gráficosFigura de ejemplo: Generador de diagramas de cuerpo libreGenerador de diagramas de cuerpo libreFigura de ejemplo: Generador de diagramas de circuitosGenerador de diagramas de circuitosFigura de ejemplo: Generador de imágenes científicas con IAGenerador de imágenes científicas con IAFigura de ejemplo: Placa de 96 pocillos editablePlaca de 96 pocillos editableFigura de ejemplo: Generador de estructuras de LewisGenerador de estructuras de LewisFigura de ejemplo: Generador de diagramas de ADNGenerador de diagramas de ADNFigura de ejemplo: Creador de diagramas de cableadoCreador de diagramas de cableadoFigura de ejemplo: Generador de diagramas de tuberías e instrumentaciónGenerador de diagramas de tuberías e instrumentaciónFigura de ejemplo: Creador de pósteres científicosCreador de pósteres científicosFigura de ejemplo: Creador de cladogramasCreador de cladogramasFigura de ejemplo: Creador de redes tróficasCreador de redes tróficasFigura de ejemplo: Generador de ilustraciones médicasGenerador de ilustraciones médicasFigura de ejemplo: Generador de diagramas de PCRGenerador de diagramas de PCRFigura de ejemplo: Conversor de texto de PPT a elementos visualesConversor de texto de PPT a elementos visualesFigura de ejemplo: Generador de diagramas de mitosisGenerador de diagramas de mitosisFigura de ejemplo: Generador de infografías con IAGenerador de infografías con IAFigura de ejemplo: Generador de dibujos anatómicosGenerador de dibujos anatómicosFigura de ejemplo: Comparación de células animales y vegetalesComparación de células animales y vegetalesFigura de ejemplo: Generador de diagramas de célula animalGenerador de diagramas de célula animalFigura de ejemplo: Diagrama de la estructura de un anticuerpoDiagrama de la estructura de un anticuerpoFigura de ejemplo: Diagrama de apoptosisDiagrama de apoptosisFigura de ejemplo: Generador de diagramas de bacteriasGenerador de diagramas de bacteriasFigura de ejemplo: Creador de planos arquitectónicosCreador de planos arquitectónicosFigura de ejemplo: Creador de modelos de BohrCreador de modelos de BohrFigura de ejemplo: Generador de diagramas del ciclo de CalvinGenerador de diagramas del ciclo de CalvinFigura de ejemplo: Generador de diagramas del ciclo del carbonoGenerador de diagramas del ciclo del carbonoFigura de ejemplo: Generador de diagramas del ciclo celularGenerador de diagramas del ciclo celularFigura de ejemplo: Generador de diagramas de respiración celularGenerador de diagramas de respiración celularFigura de ejemplo: Diagrama del sistema del complementoDiagrama del sistema del complementoFigura de ejemplo: Diagrama de CRISPR-Cas9Diagrama de CRISPR-Cas9Figura de ejemplo: Generador de diagramas de replicación del ADNGenerador de diagramas de replicación del ADNFigura de ejemplo: Diagrama de configuración electrónicaDiagrama de configuración electrónicaFigura de ejemplo: Generador de diagramas de la cadena de transporte de electronesGenerador de diagramas de la cadena de transporte de electronesFigura de ejemplo: Diagrama de regulación génicaDiagrama de regulación génicaFigura de ejemplo: Generador de diagramas de glucólisisGenerador de diagramas de glucólisisFigura de ejemplo: Conversor de imagen a SVG editableConversor de imagen a SVG editableFigura de ejemplo: Diagrama de la respuesta inmunitariaDiagrama de la respuesta inmunitariaFigura de ejemplo: Generador de diagramas del ciclo de KrebsGenerador de diagramas del ciclo de KrebsFigura de ejemplo: Creador de diagramas de montaje experimentalCreador de diagramas de montaje experimentalFigura de ejemplo: Generador de diagramas de meiosisGenerador de diagramas de meiosisFigura de ejemplo: Generador de diagramas de orbitales molecularesGenerador de diagramas de orbitales molecularesFigura de ejemplo: Generador de diagramas del ciclo del nitrógenoGenerador de diagramas del ciclo del nitrógenoFigura de ejemplo: Creador de árboles genealógicosCreador de árboles genealógicosFigura de ejemplo: Generador de diagramas de fosfolípidosGenerador de diagramas de fosfolípidosFigura de ejemplo: Generador de diagramas del ciclo del fósforoGenerador de diagramas del ciclo del fósforoFigura de ejemplo: Generador de diagramas de fotosíntesisGenerador de diagramas de fotosíntesisFigura de ejemplo: Creador de árboles filogenéticosCreador de árboles filogenéticosFigura de ejemplo: Diagramas vectoriales de físicaDiagramas vectoriales de físicaFigura de ejemplo: Generador de diagramas de célula vegetalGenerador de diagramas de célula vegetalFigura de ejemplo: Generador de diagramas de síntesis de proteínasGenerador de diagramas de síntesis de proteínasFigura de ejemplo: Creador de cuadros de PunnettCreador de cuadros de PunnettFigura de ejemplo: Creador de diagramas de rayosCreador de diagramas de rayosFigura de ejemplo: Generador de paletas de colores científicasGenerador de paletas de colores científicasFigura de ejemplo: Diagrama de señalización celularDiagrama de señalización celularFigura de ejemplo: Generador de diagramas unifilaresGenerador de diagramas unifilaresFigura de ejemplo: Diagrama de activación de linfocitos TDiagrama de activación de linfocitos TFigura de ejemplo: Generador de diagramas del ciclo del aguaGenerador de diagramas del ciclo del aguaFigura de ejemplo: Generador de diagramas de Western blotGenerador de diagramas de Western blot

Gráficos y curvas estadísticas

28 herramientas
Figura de ejemplo: Generador de diagramas de BodeGenerador de diagramas de BodeFigura de ejemplo: Creador de gráficos de tela de arañaCreador de gráficos de tela de arañaFigura de ejemplo: Curva de supervivencia de Kaplan-MeierCurva de supervivencia de Kaplan-MeierFigura de ejemplo: Creador de gráficos circulares multicapaCreador de gráficos circulares multicapaFigura de ejemplo: Generador de curvas de campanaGenerador de curvas de campanaFigura de ejemplo: Generador de diagramas de GanttGenerador de diagramas de GanttFigura de ejemplo: Generador de diagramas de caja y bigotesGenerador de diagramas de caja y bigotesFigura de ejemplo: Forest plotForest plotFigura de ejemplo: Generador de volcano plotsGenerador de volcano plotsFigura de ejemplo: Creador de gráficos de ParetoCreador de gráficos de ParetoFigura de ejemplo: Creador de diagramas de dispersiónCreador de diagramas de dispersiónFigura de ejemplo: Generador de mapas de calorGenerador de mapas de calorFigura de ejemplo: Generador de gráficos con IAGenerador de gráficos con IAFigura de ejemplo: Creador de gráficos comparativosCreador de gráficos comparativosFigura de ejemplo: Generador de diagramas de SankeyGenerador de diagramas de SankeyFigura de ejemplo: Generador de gráficos de radarGenerador de gráficos de radarFigura de ejemplo: Creador de histogramasCreador de histogramasFigura de ejemplo: Gráfico de barrasGráfico de barrasFigura de ejemplo: Generador de plano cartesianoGenerador de plano cartesianoFigura de ejemplo: Creador de diagramas de puntosCreador de diagramas de puntosFigura de ejemplo: Calculadora de IC50 y curvas dosis-respuestaCalculadora de IC50 y curvas dosis-respuestaFigura de ejemplo: Calculadora DPICalculadora DPIFigura de ejemplo: Diagrama de onda transversalDiagrama de onda transversalFigura de ejemplo: Gráfico de líneasGráfico de líneasFigura de ejemplo: Generador de rectas numéricasGenerador de rectas numéricasFigura de ejemplo: Comprobador de figurasComprobador de figurasFigura de ejemplo: Gráficos de oferta y demandaGráficos de oferta y demandaFigura de ejemplo: Gráfico de cascadaGráfico de cascada

Diagramas de flujo, marcos conceptuales y diagramas de estructura

32 herramientas
Figura de ejemplo: Generador de marcos conceptualesGenerador de marcos conceptualesFigura de ejemplo: Generador de marcos teóricosGenerador de marcos teóricosFigura de ejemplo: Generador de árboles sintácticosGenerador de árboles sintácticosFigura de ejemplo: Creador de claves dicotómicasCreador de claves dicotómicasFigura de ejemplo: Generador de diagramas de oracionesGenerador de diagramas de oracionesFigura de ejemplo: Generador de diagramas a partir de textoGenerador de diagramas a partir de textoFigura de ejemplo: Generador de diagramas de flujo PRISMAGenerador de diagramas de flujo PRISMAFigura de ejemplo: Generador de diagramas de flujo de trabajoGenerador de diagramas de flujo de trabajoFigura de ejemplo: Generador de líneas de tiempoGenerador de líneas de tiempoFigura de ejemplo: Matriz de síntesisMatriz de síntesisFigura de ejemplo: Generador de diagramas ERGenerador de diagramas ERFigura de ejemplo: Generador de diagramas UMLGenerador de diagramas UMLFigura de ejemplo: Generador de diagramas de árbolGenerador de diagramas de árbolFigura de ejemplo: Generador de diagramas de IshikawaGenerador de diagramas de IshikawaFigura de ejemplo: Generador de diagramas de redes neuronalesGenerador de diagramas de redes neuronalesFigura de ejemplo: Generador de árboles de decisiónGenerador de árboles de decisiónFigura de ejemplo: Generador de diagramas de arquitectura de softwareGenerador de diagramas de arquitectura de softwareFigura de ejemplo: Generador de diagramas de flujo CONSORTGenerador de diagramas de flujo CONSORTFigura de ejemplo: Creador de diagramas de contextoCreador de diagramas de contextoFigura de ejemplo: Generador de diagramas de flujo de datosGenerador de diagramas de flujo de datosFigura de ejemplo: Diagrama de flujo experimentalDiagrama de flujo experimentalFigura de ejemplo: Creador de genogramasCreador de genogramasFigura de ejemplo: Generador de organizadores gráficosGenerador de organizadores gráficosFigura de ejemplo: Convertir imagen en diagrama de flujoConvertir imagen en diagrama de flujoFigura de ejemplo: Convertidor de Mermaid a PNGConvertidor de Mermaid a PNGFigura de ejemplo: Generador de diagramas de redGenerador de diagramas de redFigura de ejemplo: Creador de organigramasCreador de organigramasFigura de ejemplo: Generador de diagramas de secuenciaGenerador de diagramas de secuenciaFigura de ejemplo: Generador de diagramas de estadoGenerador de diagramas de estadoFigura de ejemplo: Generador de diagramas de carrilesGenerador de diagramas de carrilesFigura de ejemplo: Generador de diagramas de casos de usoGenerador de diagramas de casos de usoFigura de ejemplo: Generador de diagramas de VennGenerador de diagramas de Venn
Ver todas las herramientas →

Preguntas sobre el diagrama Mermaid

1.

2.

3.

4.

5.

6.

Fondo de llamada a la acción

Diagrama mermaid

Crear el diagrama Mermaid

Crear el diagrama Mermaid

Gratis para empezar · Sin tarjeta de crédito · Pensado para investigadores