Soporte de Mermaid

Diagrammix3 admite la importación y exportación de diagramas usando la sintaxis de Mermaid, un popular lenguaje de diagramación basado en texto.

¿Qué es Mermaid?

Mermaid es una herramienta de diagramación basada en JavaScript que usa una sintaxis similar a markdown para definir diagramas. Se usa comúnmente en documentación, wikis y archivos README.

Ejemplo de sintaxis Mermaid:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Importar Diagramas Mermaid

Nota: La importación y exportación de Mermaid son funciones PRO.

Insertar Mermaid (con vista previa y validación)

La forma más rápida de traer Mermaid al lienzo es el panel Insertar Mermaid, que previsualiza y valida el diagrama antes de colocar nada.

1. Ve a Edit → Insert Mermaid
2. Pega o escribe la sintaxis Mermaid en el editor
3. A medida que escribes, Diagrammix valida la sintaxis en tiempo real y muestra:
   • si el diagrama es válido
   • el tipo de diagrama detectado
   • los recuentos de nodos y conectores
   
   Los errores se señalan en línea para que puedas corregirlos antes de que toquen tu lienzo.
4. Haz clic en Apply para colocar el diagrama, o en Cancel para descartar

Pegar Mermaid desde el portapapeles pasa por la misma validación, de modo que una sintaxis incorrecta nunca produce un diagrama roto.

Nota: Mermaid se importa pegando o escribiendo en el panel Insertar Mermaid — no existe un comando independiente para "importar archivo". Para incorporar un archivo .mmd, ábrelo en cualquier editor de texto y pega su contenido.

Tipos de Diagramas Compatibles

Diagrammix reconoce una amplia gama de tipos de diagramas Mermaid, incluyendo:

Otros tipos de Mermaid (línea de tiempo, journey de usuario, cuadrante, gráfico XY, Sankey, gráfico Git y más) se reconocen e importan, pero se representan como un grafo genérico de nodos y conectores en lugar de un diseño especializado. El panel Insertar Mermaid te indica el tipo detectado antes de aplicar.

Sintaxis de Diagramas de Estado

Los diagramas de estado modelan los estados en los que puede estar un objeto y las transiciones entre estados.

Diagrama de Estado Básico:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

Estados y Transiciones:

• [*] representa los estados inicial y final
• --> crea una flecha de transición
• : etiqueta agrega etiquetas de transición
• Los estados anidados usan indentación

Estados Compuestos:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Resultado: Un diagrama de máquina de estados con figuras de estado apropiadas y transiciones etiquetadas.

Ejemplos de Importación

Diagrama de Flujo

Entrada Mermaid:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Resultado: Un diagrama de flujo de arriba a abajo con figuras rectangulares, redondeadas y de rombo conectadas con flechas etiquetadas.

Diagrama de Secuencia

Entrada Mermaid:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Resultado: Un diagrama de secuencia con dos participantes y flechas de mensaje.

Diagrama de Clases

Entrada Mermaid:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Resultado: Un diagrama de clases UML con relaciones de herencia.

Exportar a Mermaid

Copiar Mermaid

Diagrammix exporta a Mermaid a través del portapapeles — no existe un comando independiente para "exportar a archivo".

1. Selecciona las figuras que quieres exportar, o no selecciones nada para exportar todo el lienzo
2. Ve a Edit → Copy Mermaid
3. Pega la sintaxis Mermaid donde la necesites (y luego guárdala como un archivo .mmd si lo deseas)

La exportación se adapta a lo que está dentro del alcance: un mapa mental se copia como sintaxis mindmap y una página de clases o secuencia UML como classDiagram / sequenceDiagram; cualquier otra cosa se exporta como un flowchart.

Seguir Editando en Mermaid (Ida y Vuelta)

Los diagramas Mermaid importados conservan su código fuente, de modo que puedes seguir trabajando en notación Mermaid en lugar de editar figuras una a una.

1. Selecciona un diagrama Mermaid importado
2. Haz clic en el botón </> (Editar Fuente Mermaid) en el diagrama
3. El panel Editar Fuente Mermaid se abre con el texto Mermaid original ya cargado
4. Edita el texto y vuelve a renderizar para actualizar el diagrama en su lugar

Si tus ediciones cambian la estructura del diagrama (por ejemplo, al eliminar nodos de los que dependen otros elementos), el panel lista esas incompatibilidades de antemano para que puedas decidir antes de confirmar.

Editar como Objetos Nativos

También puedes editar un diagrama importado directamente como objetos nativos de Diagrammix:

• Mover y redimensionar figuras libremente
• Cambiar estilos usando el Inspector (colores, fuentes, estilos de línea)
• Añadir nuevos elementos usando las herramientas de Diagrammix
• Modificar conexiones arrastrando los extremos
• Aplicar diseño automático para reorganizar el diagrama

Consejo: Decide de antemano cómo quieres mantener un diagrama. Usa el editor de fuente </> para mantenerlo dirigido por Mermaid, o edita las figuras directamente para un pulido visual puntual. Las ediciones manuales intensivas pueden divergir de lo que produciría volver a renderizar el código fuente.

Limitaciones

• Estilos complejos: Las directivas de estilo de Mermaid pueden no traducirse completamente
• Subgrafos: Se convierten en figuras agrupadas
• Funciones avanzadas: Algunas funciones específicas de Mermaid (como los manejadores de clic) se ignoran
• Ida y vuelta: Exportar un diagrama que hayas editado intensamente a mano puede no reproducir una sintaxis Mermaid idéntica — para la ida y vuelta, prefiere el editor de fuente </>

Consejos

1. Limpia después de importar: Usa el diseño automático para organizar los diagramas importados
2. Verifica las relaciones: Comprueba que los tipos de relación se importaron correctamente
3. Aplica estilos consistentes: Usa los estilos de Diagrammix para una apariencia pulida
4. Conserva el código fuente: Guarda tus archivos Mermaid originales para control de versiones