Soporte de Mermaid

Diagrammix 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 una función PRO.

Insertar Mermaid (con vista previa y validación)

La forma más rápida de llevar Mermaid a tu lienzo es el panel Insert Mermaid, que previsualiza y valida el diagrama antes de colocar nada.

1. Ve a Edit → Insert Mermaid
2. Pega o escribe tu sintaxis Mermaid en el editor
3. A medida que escribes, Diagrammix valida la sintaxis y la franja de estado muestra el problema o Valid · N nodes, M connectors. También puedes hacer clic en Validate en cualquier momento
4. Haz clic en Apply para colocar el diagrama, o en Cancel para descartarlo. Apply solo coloca un diagrama que sea válido

Pegar Mermaid desde el portapapeles pasa por la misma validación, así que una sintaxis mal formada nunca produce un diagrama roto.

Nota: Mermaid se importa pegando o escribiendo en el panel Insert Mermaid — no hay un comando separado de "importar archivo". Para traer un archivo .mmd, ábrelo en cualquier editor de texto y pega su contenido.

Tipos de Diagrama Admitidos

Diagrammix reconoce una amplia gama de tipos de diagrama Mermaid, incluidos:

Otros tipos de Mermaid (timeline, user journey, quadrant, XY chart, Sankey, Git graph, y más) se reconocen e importan, pero se renderizan como un gráfico genérico de nodos y conectores en lugar de un diseño especializado. Usa Validate para comprobar el número de nodos y conectores antes de aplicar.

Sintaxis de Diagrama de Estados

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

Diagrama de Estados Básico:

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

Estados y Transiciones:

• [*] representa los estados de inicio y fin
• --> crea una flecha de transición
• : label agrega etiquetas de transición
• Los estados anidados usan sangría

Estados Compuestos:

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

Resultado: Un diagrama de máquina de estados con formas de estado adecuadas 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 hacia abajo con figuras de rectángulo, rectángulo redondeado y 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 hay un comando separado de "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 (luego guárdala como un archivo .mmd si quieres)

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

Seguir Editando en Mermaid (Ida y Vuelta)

Los diagramas Mermaid importados conservan su origen, así que puedes seguir trabajando en notación Mermaid en lugar de editar figuras una por una.

1. Selecciona un diagrama Mermaid importado
2. Haz clic en el botón </> (Edit Mermaid Source) del diagrama
3. Se abre el panel Edit Mermaid Source con el texto Mermaid original ya cargado
4. Edita el texto y haz clic en Re-render para actualizar el diagrama en el lugar

Si has cambiado el diagrama en el lienzo desde que se importó, el panel enumera esos cambios bajo On-canvas edits that won't be kept, así puedes decidir antes de volver a renderizar.

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)
• Agregar 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 origen </> para mantenerlo controlado por Mermaid, o edita las figuras directamente para un retoque visual puntual. Las ediciones manuales intensas pueden divergir de lo que produciría volver a renderizar el origen.

Limitaciones

• Estilos complejos: las directivas de estilo de Mermaid pueden no traducirse por completo
• Subgráficos: se convierten en figuras agrupadas
• Funciones avanzadas: algunas funciones específicas de Mermaid (como los controladores de clic) se ignoran
• Ida y vuelta: exportar un diagrama que has editado mucho a mano puede no reproducir una sintaxis Mermaid idéntica — para ida y vuelta, prefiere el editor de origen </>

Consejos

1. Ordena después de importar: usa el diseño automático para organizar los diagramas importados
2. Comprueba las relaciones: verifica que los tipos de relación se hayan importado correctamente
3. Aplica un estilo consistente: usa los estilos de Diagrammix para un aspecto pulido
4. Conserva el origen: guarda tus archivos Mermaid originales para el control de versiones