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

Desde el Portapapeles

1. Copia la sintaxis Mermaid a tu portapapeles
2. En Diagrammix3, ve a File → Import → Mermaid from Clipboard
3. El diagrama se creará en tu lienzo

Desde un Archivo

1. Ve a File → Import → Mermaid File...
2. Selecciona un archivo .mmd o .mermaid
3. El diagrama se importará a tu lienzo

Tipos de Diagramas Compatibles

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

Exportar el Diagrama Actual

1. Ve a File → Export → Mermaid...
2. Elige una ubicación para guardar
3. El diagrama se exporta como un archivo .mmd

Copiar como Mermaid

1. Selecciona las figuras que quieres exportar (o selecciona todo con Cmd+A)
2. Ve a Edit → Copy as Mermaid
3. Pega la sintaxis Mermaid donde la necesites

Editar Diagramas Importados

Una vez importados, los diagramas Mermaid se convierten en objetos nativos de Diagrammix. Puedes:

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

La conexión con el código fuente Mermaid original no se mantiene: los cambios se realizan directamente sobre los objetos del diagrama.

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 importado puede no producir una sintaxis Mermaid idéntica

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