Guía de usuario de Mermster

Inicio rápido: tu primer diagrama

Puedes pasar de abrir la app a un diagrama terminado en unos 60 segundos.

1. Inicia Mermster. La pantalla de bienvenida muestra opciones para crear un diagrama nuevo o elegir entre 12 plantillas integradas.
2. Elige una plantilla (o empieza en blanco). Las plantillas incluyen diagramas de flujo, de secuencia, de clases y más. Haz clic en cualquier plantilla para abrirla en una pestaña nueva, lista para editar.
3. Edita a la izquierda, previsualiza a la derecha. Escribe sintaxis de Mermaid en el editor de código a la izquierda. El diagrama se renderiza en tiempo real a la derecha.
4. Exporta tu diagrama. Pulsa Cmd+Shift+E (macOS) o Ctrl+Shift+E (Windows) para abrir el diálogo de exportación. Elige SVG, PNG o PDF, ajusta la configuración y guarda.

Eso es todo. Has creado y exportado un diagrama.

Gratuito vs. de pago

Mermster funciona desde el primer momento y ofrece acceso completo a todas las funciones. La única diferencia entre la versión gratuita y una con licencia es el aspecto de las exportaciones.

Qué incluye la versión gratuita

• Editor de código Monaco completo con los 10 temas
• Los más de 12 tipos de diagramas de Mermaid
• Vista previa en vivo con desplazamiento, zoom y minimapa
• Exportación a SVG, PNG y PDF (con una pequeña marca de agua «Made with Mermster»)
• Copiar al portapapeles (PNG y SVG)
• Compatibilidad con impresión
• Paleta de comandos, constructor de diagramas, navegador de esquema
• Historial de versiones con vista de diferencias
• Autoguardado y recuperación tras fallos
• 12 plantillas integradas y plantillas personalizadas
• Preajustes de exportación (5 integrados + personalizados)
• 4 paletas de diagrama seguras para daltonismo
• 7 idiomas de interfaz

Qué añade una licencia

Exportaciones limpias, sin la marca de agua. Esa es la única diferencia.

Ambas licencias son compras únicas. Sin suscripción. Las actualizaciones están incluidas.

El editor

El panel izquierdo es un editor de código con todas las funciones, construido con la misma tecnología que Visual Studio Code (el editor Monaco). Está diseñado para que escribir la sintaxis de Mermaid sea lo más fluido posible.

Resaltado de sintaxis

Las palabras clave de Mermaid, los ID de nodo, las flechas, las etiquetas y los comentarios se resaltan para que puedas leer tu diagrama de un vistazo. El resaltado se adapta al tema de editor que elijas.

Autocompletado

Mientras escribes, Mermster sugiere:

• Palabras clave de Mermaid: tipos de diagrama (graph, sequenceDiagram, classDiagram, etc.), direcciones (TD, LR, BT, RL) y palabras clave de bloque (loop, alt, opt, end).
• ID de nodo: una vez que defines un nodo, su ID queda disponible para autocompletar en cualquier otro lugar. Esto evita errores tipográficos y ahorra tiempo en diagramas grandes.

Pulsa Tab o Enter para aceptar una sugerencia.

Diagnóstico de errores

Si tu sintaxis tiene un error, Mermster subraya la zona del problema con una línea ondulada roja y muestra una descripción en el margen del editor. Esto se actualiza en tiempo real mientras escribes.

Buscar y reemplazar

Usa Cmd+F (macOS) o Ctrl+F (Windows) para abrir la función Buscar. Usa Cmd+H / Ctrl+H para buscar y reemplazar.

Configuración del editor

Personaliza el editor en Configuración (Cmd+, / Ctrl+,), en la sección Editor:

Vista previa en vivo

El panel derecho muestra tu diagrama renderizado en tiempo real. Los cambios aparecen unos 300 milisegundos después de que dejas de escribir, así que la vista previa se siente ágil sin parpadear con cada pulsación.

Desplazamiento y zoom

• Desplázate para acercar y alejar.
• Pellizca en un trackpad para hacer zoom.
• Haz clic y arrastra para moverte por el diagrama.
• Usa los controles de zoom en la esquina inferior derecha para ajustes precisos.

Ajustar a la vista

Haz clic en el botón Ajustar de los controles de zoom para escalar el diagrama hasta que quepa por completo en la vista previa. Haz clic en 1:1 para volver al tamaño real.

Vista previa a pantalla completa

Pulsa Cmd+Shift+F (macOS) o Ctrl+Shift+F (Windows) para ocultar el editor y dejar la ventana solo con el diagrama. Pulsa Escape para volver a la vista dividida. Esto es útil para presentaciones.

Minimapa del diagrama

En diagramas grandes, aparece una vista general en miniatura en la esquina de la vista previa. Muestra tu área visible actual como un rectángulo. Haz clic en cualquier punto del minimapa para saltar a esa zona. Actívalo en Configuración > Vista previa > Minimapa del diagrama.

Paletas de diagrama

Mermster ofrece cuatro paletas de color para diagramas, incluidas tres opciones seguras para daltonismo:

Cambia la paleta en Configuración > Apariencia > Paleta del diagrama. La paleta afecta tanto a la vista previa en vivo como a los diagramas exportados.

Trabajar con archivos

Crear un diagrama nuevo

Pulsa Cmd+N (macOS) o Ctrl+N (Windows). Puedes empezar con un diagrama en blanco, elegir entre 12 plantillas integradas o usar una de tus plantillas guardadas.

Las plantillas integradas cubren:

• Básico: Diagrama de flujo, Diagrama de secuencia, Diagrama de clases, Diagrama ER, Diagrama de estados
• Proyecto: Diagrama de Gantt, Línea de tiempo
• Creativo: Mapa mental
• Datos: Gráfico circular, Gráfico de cuadrantes
• Desarrollo: Gráfico Git
• UX: Recorrido del usuario

Abrir archivos

Pulsa Cmd+O / Ctrl+O para abrir un archivo .mmd o .mermaid existente. También puedes arrastrar y soltar un archivo en la ventana de Mermster o hacer doble clic en un archivo .mmd en el Finder o en el Explorador.

Guardar

• Cmd+S / Ctrl+S: Guardar. Si el archivo no se ha guardado antes, se te pedirá que elijas una ubicación.
• Cmd+Shift+S / Ctrl+Shift+S: Guardar como.

Mermster usa la extensión .mmd por defecto. También se admiten archivos con la extensión .mermaid.

Edición en varias pestañas

Cada archivo se abre en una pestaña propia. Tus ediciones y el historial de deshacer se conservan de forma independiente en cada pestaña.

• Cmd+W / Ctrl+W: Cierra la pestaña actual (pide guardar si hay cambios sin guardar).
• Cmd+Shift+T / Ctrl+Shift+T: Reabre la última pestaña cerrada.

Supervisión de archivos

Si un archivo que tienes abierto se modifica externamente (por otro editor, una operación de Git, etc.), Mermster detecta el cambio. Si no tienes ediciones sin guardar, se recarga automáticamente. Si las tienes, un diálogo te pregunta si recargar desde el disco o conservar tu versión.

Archivos recientes

La pantalla de bienvenida muestra tus archivos abiertos recientemente. También aparecen en el menú Archivo.

Exportar diagramas

Mermster exporta en tres formatos: SVG, PNG y PDF.

Diálogo de exportación

Pulsa Cmd+Shift+E (macOS) o Ctrl+Shift+E (Windows) para abrirlo. Cada formato tiene su propia pestaña con opciones específicas:

Exportación rápida

Pulsa Cmd+E / Ctrl+E para exportar de inmediato con tu último preajuste. Si no has exportado antes, se abre el diálogo completo.

Preajustes de exportación

Guarda tus opciones de exportación como un preajuste con un nombre para obtener resultados consistentes cada vez. Mermster incluye 5 preajustes integrados:

• PNG rápido (Retina)
• SVG rápido
• PNG Retina para documentos
• PDF A4
• PDF Letter

Puedes crear tantos preajustes personalizados como necesites. Si modificas las opciones después de seleccionar un preajuste, el menú desplegable muestra (Modificado) para que sepas que la configuración ha cambiado.

Copiar al portapapeles

• Cmd+Shift+C / Ctrl+Shift+C: Copiar como PNG (para pegar en presentaciones, documentos o chats).
• Copiar como SVG está disponible desde la paleta de comandos o desde el menú Editar.

Una notificación confirma que la copia se realiza correctamente.

Impresión

Pulsa Cmd+P / Ctrl+P para abrir el diálogo de impresión de tu sistema.

Herramientas y navegación

Paleta de comandos

Pulsa Cmd+K (macOS) o Ctrl+K (Windows) para abrir la paleta de comandos. Empieza a escribir para buscar cualquier comando: cambiar de tema, exportar, abrir la configuración, alternar paneles y más. Los atajos de teclado se muestran junto a cada comando, lo cual es una buena forma de aprenderlos sobre la marcha.

Navegador de esquema

Pulsa Cmd+Shift+O / Ctrl+Shift+O para abrir el panel de esquema. Muestra una vista estructurada de tu diagrama: nodos, aristas, participantes, estados y otros elementos agrupados por tipo. Haz clic en cualquier elemento para saltar a su línea en el editor.

Constructor de diagramas

Pulsa Cmd+Shift+B / Ctrl+Shift+B para abrir el panel del constructor de diagramas. Muestra botones contextuales según el tipo de diagrama que estés editando. Haz clic en cualquier botón para insertar la sintaxis de Mermaid correspondiente en la posición del cursor, con un texto de marcador de posición que puedes recorrer con la tecla Tabulador.

El constructor de diagramas se adapta a tu tipo de diagrama:

Plantillas

Mermster admite dos tipos de plantillas:

• Plantillas integradas: 12 diagramas de inicio disponibles en la pantalla de bienvenida y al crear un archivo nuevo.
• Plantillas personalizadas: Guarda cualquier diagrama como plantilla reutilizable mediante Archivo > Guardar como plantilla o a través de la paleta de comandos. Dale un nombre, una descripción opcional y una categoría. Tus plantillas aparecen en Mis plantillas cada vez que creas un archivo nuevo.

Seguridad de datos

Mermster protege tu trabajo automáticamente para que no tengas que preocuparte por perderlo.

Autoguardado

Mermster guarda una copia de recuperación de tu trabajo a intervalos regulares. Si la app se cierra de forma inesperada, tu trabajo te espera cuando la vuelvas a abrir. Puedes ajustar el intervalo en Configuración > Seguridad de datos > Intervalo de autoguardado (opciones: desactivado, 15 segundos, 30 segundos, 1 minuto o 2 minutos).

Recuperación tras fallos

Si Mermster no se cierra correctamente (por un fallo, un cierre forzado o un corte de luz), aparece un diálogo de recuperación en el siguiente inicio. Enumera todos los documentos con cambios sin guardar y te permite:

• Recuperar: restaura el documento en una pestaña nueva.
• Descartar: elimina permanentemente los datos de recuperación.
• Recuperar todo / Descartar todo: gestiona todo de una vez.

También puedes buscar Recuperar trabajo no guardado en la paleta de comandos en cualquier momento.

Historial de versiones

Cada vez que guardas, Mermster toma una instantánea. Explora versiones anteriores, compáralas en paralelo con tu archivo actual y restaura cualquier versión.

Abre el historial de versiones con Cmd+Shift+H (macOS) o Ctrl+Shift+H (Windows) o ve a Archivo > Historial de versiones.

En el panel de historial de versiones puedes:

• Comparar: ver una comparación paralela entre tu archivo actual y una versión seleccionada.
• Restaurar: abrir una versión anterior en una pestaña nueva.
• Eliminar: quitar versiones individuales o borrar todo el historial de un archivo.

Configura el número máximo de versiones por archivo en Configuración > Seguridad de datos > Máximo de versiones por archivo (opciones: 10, 25, 50 o 100). Los guardados idénticos se omiten automáticamente.

Personalización

Abre la configuración con Cmd+, (macOS) o Ctrl+, (Windows).

Temas de la aplicación

Mermster ofrece cinco modos de tema:

Temas del editor

Independientemente del tema de la aplicación, puedes elegir un esquema de color para el editor de código. Mermster incluye 10 temas de editor:

Configúralo en Automático (el valor predeterminado) para que el tema del editor siga automáticamente el de tu aplicación. Cambia los temas del editor en Configuración > Apariencia > Tema del editor.

Idioma

Mermster está disponible en 7 idiomas: inglés, japonés (日本語), chino simplificado (简体中文), chino tradicional (繁體中文), español (Español), francés (Français) y alemán (Deutsch). Cambia el idioma en Configuración > General > Idioma, o ponlo en Sistema para seguir la preferencia de tu sistema operativo.

Sugerencias de funciones

La primera vez que usas ciertas funciones, Mermster muestra una breve sugerencia que explica para qué sirven. Las sugerencias aparecen en el navegador de esquema, el constructor de diagramas, el historial de versiones, los preajustes de exportación, la paleta de comandos y el minimapa del diagrama. Si descartas una sugerencia, puedes volver a verla haciendo clic en el botón ? junto a la función, o ir a Configuración > Sugerencias > Mostrar todas las sugerencias de nuevo.

Licencias

Cómo activar

1. En la primera exportación: Mermster muestra el diálogo de activación. Introduce tu clave de licencia o haz clic en un botón de compra para adquirirla.
2. Desde el menú: Ve a Ayuda > Activar licencia o abre Configuración > Licencia.

Pega tu clave de licencia (formato: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) y haz clic en Activar. La activación requiere una breve conexión a internet, pero después tu licencia funciona sin conexión durante 30 días antes de que tengas que volver a verificarla.

Cómo desactivar

Para mover tu licencia a un ordenador nuevo:

1. Abre Configuración > Licencia.
2. Haz clic en Desactivar licencia.
3. Confirma la desactivación.

Esto libera espacio en el dispositivo para que puedas activarlo en otra máquina. Si desinstalas sin desactivar, contacta con mermster@viaelo.app para recuperar el espacio.

Atajos de teclado

En Windows, reemplaza Cmd por Ctrl.

Archivo

Editar

Vista

Exportar

Preguntas frecuentes (FAQ)

¿Mermster requiere conexión a internet?

No. Mermster funciona completamente sin conexión. Las únicas funciones que requieren conexión a internet son la activación y desactivación de la licencia y la búsqueda de actualizaciones. La versión gratuita nunca requiere conexión a internet.

¿Qué tipos de diagramas de Mermaid se admiten?

Todos: diagramas de flujo, de secuencia, de clases, ER, de Gantt, de estados, mapas mentales, gráficos circulares, gráficos de Git, líneas de tiempo, recorridos del usuario, gráficos de cuadrantes y cualquier otro tipo que se añada en futuras versiones de Mermaid.

¿Puedo usar Mermster en varios dispositivos?

Sí. Una licencia personal permite usar hasta 5 dispositivos. Una licencia comercial permite hasta 10. Puedes desactivar un dispositivo en cualquier momento para liberar espacio.

¿Se envían mis datos a algún sitio?

No. Mermster tiene cero telemetría, cero analíticas y cero rastreo. Tus diagramas, archivos y configuración permanecen por completo en tu ordenador. Las únicas solicitudes de red son la validación de la licencia y la búsqueda de actualizaciones.

¿Qué formato de archivo utiliza Mermster?

Archivos de texto estándar .mmd y .mermaid. Son texto plano. Contrólalos con Git, ábrelos en cualquier editor y compártelos como quieras.

¿Puedo usar la versión gratuita para trabajo comercial?

Sí. La versión gratuita no tiene restricciones de uso. Sin embargo, si compartes diagramas de forma profesional y la marca de agua no es apropiada, la licencia Personal ($29) o Comercial ($59) elimina la marca de agua.

¿Cómo busco actualizaciones?

Ve a Ayuda > Buscar actualizaciones. Mermster te avisará si hay una versión más reciente disponible.

Solución de problemas

Advertencia de Windows SmartScreen

La primera vez que ejecutas Mermster en Windows, es posible que veas una advertencia de SmartScreen que dice «Windows protegió tu PC». Esto ocurre porque aún no hemos adquirido un certificado de firma de código de Validación Extendida para Windows. La versión de macOS está totalmente firmada y notarizada por Apple.

Para continuar:

1. Haz clic en Más información en el diálogo de SmartScreen.
2. Haz clic en Ejecutar de todas formas.
3. Esto solo ocurre una vez. Windows recuerda tu elección.

El diagrama no se renderiza

Si la vista previa muestra un error en lugar de tu diagrama:

• Revisa el editor en busca de líneas onduladas rojas. Indican errores de sintaxis.
• Asegúrate de que tu diagrama empiece con una declaración de tipo válida (p. ej., graph TD, sequenceDiagram, classDiagram).
• Intenta crear un archivo nuevo a partir de una plantilla para confirmar que la vista previa funciona, y luego compáralo con tu código.

La exportación se ve borrosa

Si tu exportación PNG se ve borrosa, aumenta el ajuste de DPI en el diálogo de exportación. Usa 144 DPI para pantallas Retina o 300 DPI para impresión. Para una salida nítida a cualquier tamaño, exporta como SVG en su lugar.

Error al activar la licencia

• Comprueba tu conexión a internet. La activación necesita una verificación en línea única.
• Asegúrate de copiar la clave de licencia completa, incluidos los guiones.
• Si has alcanzado tu límite de dispositivos, desactiva primero un dispositivo existente (Configuración > Licencia en ese dispositivo).
• Contacta con mermster@viaelo.app si el problema persiste.

Perdí mi clave de licencia

Envía un correo a mermster@viaelo.app con la dirección de correo que usaste para la compra. Podemos buscarla.

Obtener soporte

Envía un correo a mermster@viaelo.app. También puedes contactarnos desde la app mediante Ayuda > Enviar comentarios o Ayuda > Reportar un problema.