Para conectar dos subgrafos Mermaid en Obsidian, asigna a cada grupo un ID explícito y conecta esos ID. En tu Mac, prueba primero un diagrama mínimo y luego comprueba si el problema se debe a la sintaxis, a la dirección del diseño o a una diferencia en el renderizador instalado.
Esta guía explica cómo mostrar flechas entre grupos en un mismo diagrama de flujo. El objetivo es que aparezca la conexión prevista, identificar sus extremos y elegir una alternativa práctica cuando el renderizador no produzca la disposición requerida.
Empieza con una conexión mínima entre dos grupos
Crea una nota temporal y pega el bloque cercado completo que aparece abajo. El método documentado por Obsidian para añadir un diagrama es un bloque de código cuyo lenguaje es mermaid; no hace falta un archivo de diagrama aparte. Sintaxis de formato avanzada
```mermaid
flowchart LR
subgraph groupA [Group A]
direction TB
A1[Item A1] --> A2[Item A2]
end
subgraph groupB [Group B]
direction TB
B1[Item B1] --> B2[Item B2]
end
groupA --> groupB
```
Mermaid documenta los ID explícitos de subgrafos y las conexiones hacia y desde subgrafos. Aquí, groupA y groupB identifican los contenedores; el texto entre corchetes indica sus títulos. La última línea conecta los contenedores. Sintaxis de diagramas de flujo
Cambia a Reading view para inspeccionar el resultado. En macOS, el atajo documentado para alternar entre las vistas de lectura y edición es Cmd+E. También puedes seleccionar Reading view mediante el control de vista de la barra de estado. Para editar el código fuente con precisión, elige Source mode. Vistas y modo de edición
Comprueba tres cosas: que aparezcan ambos grupos, que aparezcan sus elementos internos y que una flecha conecte los límites de los dos grupos. En esta primera comprobación, deja de lado el espaciado y el estilo. Estos ejemplos siguen la documentación de sintaxis consultada; no se han renderizado en una instalación local de Obsidian para este artículo.
Si el ejemplo mínimo funciona, conserva esa nota como referencia. Compara tu diagrama original con él en pasos pequeños: primero las declaraciones de los grupos, luego sus ID y, por último, la única línea de conexión. Añade el resto del contenido solo después de que se vea la conexión básica.
Comprueba qué renderizador usa tu versión de Obsidian
Anota la versión instalada de la aplicación antes de comparar los resultados con ejemplos en línea. La documentación de actualización de Obsidian indica que las versiones de la aplicación y del instalador aparecen en Settings → General. Selecciona Check for updates y, si se ofrece una actualización, elige Relaunch. Sigue también cualquier aviso independiente sobre el instalador. Actualizar Obsidian
Hay una diferencia importante entre versiones: las notas de la versión del 22 de octubre de 2026 de Obsidian identifican Desktop 1.15.0 como una versión de acceso anticipado e indican que los diagramas usan Pele, con compatibilidad de sintaxis de Mermaid 12.1.0. Las mismas notas dicen que Obsidian ya no incluye Mermaid en esa versión. Considera que las instrucciones que suponen que todas las instalaciones de Obsidian incluyen Mermaid dependen de la versión. Obsidian 1.15.0 Desktop (acceso anticipado)
Esas notas de la versión también indican que se elimina la opción Show Mermaid diagrams in notes en 1.15.0. Si tu instalación muestra esa opción o un aviso para habilitarla, anota esa diferencia en lugar de buscar indefinidamente un control descrito para otra versión. Obsidian 1.15.0 Desktop (acceso anticipado)
Para solucionar problemas, lleva un registro breve: versión de la aplicación, vista de edición o lectura, texto exacto del diagrama y resultado observado. Describe el resultado de forma concreta; por ejemplo: «aparecen dos grupos, pero falta la flecha de conexión». Esto resulta más útil que anotar solo que el diagrama no funciona.
Decide si la flecha debe conectar grupos o elementos
Elige los extremos según lo que el diagrama debe comunicar. Para indicar una relación general entre grupos, empieza con el ejemplo de contenedores. Para mostrar una transición concreta entre elementos, usa la siguiente alternativa completa y evalúala por separado.
```mermaid
flowchart LR
subgraph groupA [Group A]
A1[Item A1] --> A2[Item A2]
end
subgraph groupB [Group B]
B1[Item B1] --> B2[Item B2]
end
A2 --> B1
```
La última línea ahora conecta elementos con nombre a través del límite del grupo. La documentación de diagramas de flujo de Mermaid distingue entre nodos, conexiones y subgrafos; usa de forma coherente los ID de los extremos que quieras conectar. Sintaxis de diagramas de flujo
Si el ejemplo de contenedores falla en el renderizador instalado, pero el ejemplo de elementos funciona, la segunda opción es una alternativa práctica cuando una relación entre elementos expresa el significado que buscas. Mantén esa distinción en el diagrama: no presentes una transición entre elementos concretos como prueba de que los contenedores están conectados entre sí.
Al adaptar cualquiera de los ejemplos, haz un cambio a la vez. Primero cambia los títulos visibles, inspecciona el resultado y luego añade más elementos. Deja el estilo y los subgrafos anidados para más adelante. Así, cada edición tiene un propósito claro y resulta más fácil identificar el primer cambio asociado a un fallo.
Entiende por qué cambia la dirección de un subgrafo
Mermaid documenta una limitación del diseño: cuando un nodo de un subgrafo se conecta con algo fuera de su grupo, se ignora la dirección propia del subgrafo y este hereda la dirección del diagrama principal. La documentación contrasta ese caso con una conexión al contenedor. Dirección en subgrafos
Por eso, una flecha puede ser correcta aunque la disposición no coincida con lo que esperabas. En el primer ejemplo, inspecciona por separado las pilas internas y la flecha entre grupos. En el segundo, comprueba primero los extremos de los elementos antes de evaluar la disposición. Ten presente la diferencia entre renderizadores descrita antes al interpretar cualquiera de los resultados.
Si necesitas tanto una conexión entre elementos concretos como una dirección interna diferente, considera esos requisitos de aceptación por separado. La limitación documentada de Mermaid significa que no puedes dar por hecho que añadir una indicación de dirección local vaya a satisfacer ambos requisitos. Elige la conexión que exprese la relación con precisión y, si hace falta, simplifica la disposición.
Una alternativa útil es conservar una sola dirección general y acortar el diagrama hasta que resulte fácil seguir los elementos conectados. Si basta con mostrar la relación entre grupos, vuelve al primer ejemplo. Estas son decisiones editoriales sobre lo que comunica el diagrama, no garantías sobre posiciones exactas ni sobre el trazado de las flechas.
Aísla el fallo antes de reconstruir el diagrama
Sigue esta secuencia de diagnóstico para decidir qué probar después. Es una guía para tomar decisiones basada en la sintaxis documentada y las diferencias entre renderizadores, no una lista de defectos confirmados.
| Observación | Siguiente comprobación | Qué anotar |
|---|---|---|
| La nota muestra el texto literal del diagrama | Revisa las cercas de código de apertura y cierre y luego cambia a Reading view |
Si el bloque se renderiza |
| El ejemplo mínimo produce un error | Compara carácter por carácter el bloque pegado con el ejemplo | El texto completo del error |
| Se renderizan los grupos, pero no su conexión | Prueba por separado la alternativa completa de conexión entre elementos | Qué tipo de extremos funciona |
| Aparece la flecha, pero cambia la dirección interna | Revisa la limitación documentada sobre la dirección de nodos externos | Si el problema pendiente es la conexión o la disposición |
| El ejemplo funciona hasta que se restablece más contenido | Deshaz la última adición y repite solo ese cambio | La adición más pequeña asociada al fallo |
| El mismo texto se comporta de forma distinta en otro lugar | Compara versiones de la aplicación, renderizadores y modos de vista | Los entornos y resultados exactos |
Para comparar la sintaxis de forma independiente, la documentación de Obsidian recomienda el editor en vivo de Mermaid. Pega allí el contenido del diagrama sin las cercas Markdown que lo rodean. Que el diagrama se renderice correctamente en el navegador sirve como referencia, pero no demuestra que se comporte igual en tu versión de Obsidian. Sintaxis de formato avanzada
Si el resultado sigue siendo distinto en Obsidian, repite la prueba mínima en la bóveda de pruebas de escritorio. La guía oficial de solución de problemas de Obsidian indica que Open Help > Sandbox Vault permite comprobar en la versión de escritorio si el problema se reproduce fuera de la configuración habitual de la bóveda. También recomienda actualizar los temas y complementos de la comunidad y reiniciar antes de continuar con el diagnóstico. Acerca de la categoría de informes de errores
Si la prueba funciona en la bóveda de pruebas, investiga de uno en uno los elementos que difieren en la bóveda original. Si tampoco funciona allí, conserva el ejemplo mínimo, las versiones de la aplicación y del instalador, el modo de vista y el resultado observado exacto. Antes de informar del problema, busca en el foro oficial si ya existe un informe similar, tal como solicita la guía de Obsidian para informar de errores. Acerca de la categoría de informes de errores
Termina con el diagrama más pequeño que comunique la relación necesaria. Mantén una conexión entre contenedores cuando los extremos previstos sean los grupos; conecta elementos cuando la transición corresponda a elementos concretos. Cuando esa opción se renderice de forma aceptable en tu versión instalada de Obsidian, restablece los detalles adicionales poco a poco y detente cuando el diagrama siga siendo legible.
Fuentes
- Sintaxis de formato avanzada — Ayuda de Obsidian.
- Sintaxis de diagramas de flujo — Mermaid.
- Vistas y modo de edición — Ayuda de Obsidian.
- Actualizar Obsidian — Ayuda de Obsidian.
- Obsidian 1.15.0 Desktop (acceso anticipado) — Obsidian.
- Acerca de la categoría de informes de errores — Foro de Obsidian.