El espacio Mermaid abre y crea archivos .mmd y .mermaid. El texto del diagrama es el documento; la imagen se calcula a partir de él y nunca se escribe de vuelta en el archivo.
Visual y Fuente
El selector alterna entre el dibujo y el lenguaje literal.
El mismo motor dibuja los bloques Mermaid de Markdown con la misma configuración. La representación en sí no realiza solicitudes de red.
Modificar sobre el dibujo
Puede manipular el dibujo directamente.
Un clic selecciona un elemento. Arrastrar su cuerpo intenta un movimiento con sentido en la gramática; si no hay un equivalente fiel, vuelve a la posición calculada por Mermaid.
El gesto intercambia el orden visual de dos nodos Flowchart, reordena entradas Timeline, mueve un punto Quadrant o una tarjeta entre columnas Kanban y actualiza coordenadas de tarjetas Wardley. El cambio de posición se anima y la fuente refleja inmediatamente la modificación.
Un tirador separado crea relaciones para no confundir un movimiento con una conexión.
En un flowchart, un doble clic en un nodo o flecha selecciona su etiqueta en el lienzo. Para una flecha sin texto, el campo aparece en el centro del trazado. Añadir, o un doble clic en el fondo, muestra un nodo provisional con «Nodo» seleccionado: escriba el nombre y confirme con Retorno. Escape abandona la entrada; si es un nodo nuevo, cancela completamente su creación. La creación y su primera etiqueta forman una sola acción que se puede deshacer.
Un clic en otra zona confirma el texto y continúa la acción elegida. Guardar, pasar a Fuente y cerrar también confirman la entrada. El campo conserva la selección, los acentos, copiar/pegar y deshacer/rehacer del texto. El diagrama se recalcula tras confirmar, manteniendo el zoom y el encuadre. Suprimir retira la selección cuando no se está editando una etiqueta.
Eliminar un elemento es inmediato, sin confirmación. ⌘Z restaura el elemento y sus conexiones eliminadas; ⇧⌘Z repite la eliminación.
Las flechas tienen un margen invisible para hacer clic: puede seleccionarlas cerca del trazo aunque sea fino o discontinuo. El margen sigue cómodo con el zoom.
Mermaid sigue siendo responsable de la distribución. Balise no recuerda posiciones libres que el formato no puede expresar.
Modificar mediante la estructura
En modo Visual, la navegación muestra la estructura del diagrama.
Seleccione un elemento para cambiar sus campos, use Añadir para una declaración de la familia actual, Conectar cuando la gramática tiene referencias explícitas y Subir o Bajar para reordenar.
Seleccionar en la estructura abre el inspector de propiedades aunque esté oculto. Modifique las propiedades y elija Aplicar, o pulse Retorno en un campo de texto. Para formas y tipos de flechas de un flowchart, un clic en una miniatura aplica la opción inmediatamente; ⌘Z vuelve a la anterior. Varias propiedades se aplican juntas y se deshacen en un paso. Los valores restringidos, como el riesgo de un requisito o la puntuación de un recorrido, ofrecen listas de opciones.
Los campos dependen del diagrama: etiquetas Mindmap y Kanban, participantes y mensajes Sequence, fechas y duraciones Gantt, valores XY, ejes y curvas Radar, propiedades de requisitos o coordenadas Quadrant y Wardley. Una clase puede recibir una etiqueta sin renombrar su identificador referenciado.
La navegación estructurada ofrece las mismas acciones al teclado y a VoiceOver.
Crear con vista previa
Para las otras familias, Añadir abre un formulario adaptado al tipo de elemento. Elija su padre o sección, rellene propiedades y compruebe el dibujo propuesto. La adición está disponible cuando la vista previa del borrador es válida. Cancelar conserva el documento. Un doble clic en un elemento estructurado, o Editar con vista previa en el inspector, abre el mismo formulario para editar.
Las formas y flechas de flowcharts tienen miniaturas con nombres. Las relaciones entre entidades ofrecen cardinalidades ilustradas. Para Gantt, elija una fecha o tarea anterior, una duración con unidad y los estados de tarea. Mover a… ofrece destinos aceptados.
Modificar datos del gráfico
Datos del gráfico abre una tabla para familias con valores o series. Los cambios de celdas se aplican juntos. Para un gráfico XY, el número de categorías ajusta todas las series; los valores añadidos empiezan en cero y reducir el número retira los últimos valores. Se puede deshacer esta operación.
Los formularios de miembros de clases distinguen visibilidad, nombre, parámetros y tipo. Las operaciones Git ofrecen las ramas existentes; renombrar una actualiza sus referencias. La vista previa comprueba la validez de la operación propuesta. Las construcciones avanzadas no reconocidas conservan el acceso a su definición.
Plantillas
El centro de creación ofrece las 28 familias reconocidas por el motor con un punto de partida mínimo para cada una y 16 plantillas recomendadas.
La galería ofrece búsqueda por uso y tipo, vista previa, tres campos de personalización y vistas Favoritos, Recientes y Personales.
Elija una carpeta local con archivos .mmd o .mermaid como biblioteca personal. Las plantillas siguen siendo archivos normales.
Olvidar la carpeta retira solo el acceso de Balise. No elimina archivos.
En un diagrama abierto, Guardar copia como plantilla… añade el diagrama actual a la biblioteca.
En un documento Markdown
Insertar abre la misma galería y coloca la fuente elegida en un bloque delimitado para evitar conflictos con el contenido, en una modificación que se puede deshacer.
Editar sobre un bloque existente abre la misma superficie Visual y Fuente en una ventana redimensionable.
El trabajo permanece aislado: Cancelar no cambia el Markdown y Aplicar sustituye solo el interior del bloque. Una línea que cerraría el bloque antes de tiempo se rechaza para no truncar el documento que lo rodea.
Para generar un diagrama a partir de texto con OpenAI, empiece en el espacio Markdown. Después puede insertar el resultado en Markdown o abrir un borrador Mermaid independiente, según haya texto seleccionado o no. La generación requiere un envío explícito a OpenAI; la representación del diagrama permanece local.
Copiar y exportar
Copie la fuente, copie la imagen o exporte SVG y PNG.
La imagen exportada se sanea para mostrarla y no contiene scripts ni enlaces activos.
Lo que esta superficie no hace
- Balise no recuerda una posición dada a un elemento si Mermaid no puede representarla.
- El diagrama
infono tiene navegación estructurada. - Un diagrama demasiado grande sigue consultable en Fuente, sin dibujo.
Para problemas de dibujo, consulte Cuando un diagrama no aparece.
Siga este recorrido de principio a fin: Mantener un diagrama junto al código.