Mermaid Design Mermaid Design

Acerca de

mermaid.design es un editor de diagramas Mermaid en línea y gratuito. Escribe sintaxis Mermaid a la izquierda y ve el diagrama renderizado en vivo a la derecha. Todo el procesamiento ocurre completamente en tu navegador: tus diagramas nunca salen de tu dispositivo.

Características principales

  • Vista previa en vivo: Los diagramas se vuelven a renderizar mientras escribes, con validación de sintaxis instantánea y notificación de errores
  • Dos modos de renderizado: Renderiza tu diagrama como un SVG nítido o como arte ASCII que puedes pegar en comentarios de código, documentos o terminales
  • Temas de diagrama: Temas de Mermaid con un solo clic, incluidos Predeterminado, Neutral, Bosque, Oscuro y Base, además de colores de fondo personalizados o un fondo transparente
  • Renderizado ASCII: Convierte diagramas de flujo y de secuencia en diagramas basados en texto, con juegos de caracteres Unicode o ASCII puro y un tamaño de fuente ajustable
  • Desplazamiento y zoom: Arrastra para desplazarte y Ctrl/⌘ + rueda para hacer zoom, con una barra de herramientas flotante para un control preciso
  • Editor de código: Editor basado en Monaco (el mismo motor que VS Code) con resaltado de sintaxis de Mermaid
  • Plantillas: Una galería integrada de plantillas de diagramas de flujo, secuencia, clases, estados, ER, Gantt, gráficos circulares, grafos Git, mapas mentales y recorridos del usuario
  • Exportación: Descarga tu diagrama como SVG, PNG, JPG o WebP a resolución 1x, 2x o 4x, o como ASCII de texto plano
  • Solo del lado del cliente: Sin servidores ni subidas: todo se ejecuta localmente en tu navegador

Tipos de diagramas compatibles

Diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas ER, diagramas de Gantt, gráficos circulares, grafos Git, mapas mentales, recorridos del usuario, diagramas C4, cronologías y diagramas de requisitos: todo lo que admite el motor de Mermaid.

Comentarios

Si tienes alguna pregunta o sugerencia sobre nuestra herramienta, no dudes en contactarnos.