Para mantener los nodos de Mermaid en filas fijas mientras cambian las conexiones, usa un diagrama de bloques con columnas explícitas, si tu renderizador lo admite. En Obsidian para Mac, comprueba primero qué renderizador tienes instalado: los subgrafos de los diagramas de flujo no pueden imponer esta disposición de forma fiable.

Esta guía se centra en una tarea: organizar seis nodos neutros en dos filas horizontales y conservar las conexiones entre nodos individuales. Decide por separado si necesitas cajas alineadas, conectores con giros en ángulo recto o ambas cosas. Un resultado satisfactorio para un requisito puede no cumplir el otro.

¿Por qué las conexiones cruzadas alteran las filas de los diagramas de flujo?

Mermaid documenta una limitación específica de los diagramas de flujo: cuando un nodo dentro de un subgrafo se conecta con otro fuera de ese subgrafo, se ignora la dirección local y se hereda la dirección del grafo principal. Por eso, una fila declarada con direction LR dentro de un flowchart TB puede cambiar de disposición al añadir una conexión externa. Consulta la limitación de dirección de los subgrafos.

Esta nota ilustrativa completa incluye esa condición. Sus dos conexiones internas sugieren filas horizontales, pero A --> D cruza el límite del subgrafo:

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid también admite conexiones a los ID de los subgrafos. En su lugar, conectar RowOne con RowTwo puede evitar apuntar a sus nodos internos, pero cambia el significado de la relación: conecta grupos en vez de Alpha y Delta. Usa esa opción solo si la relación entre los grupos es correcta. Los enlaces invisibles, como A ~~~ B, son ayudas de posicionamiento documentadas, no un mecanismo documentado para fijar las filas. Sintaxis de diagramas de flujo

Para esta tarea, conserva los extremos individuales. Sustituir una conexión requerida entre nodos por una conexión entre grupos haría el dibujo más ordenado, pero restaría información que debe comunicar.

Comprueba qué renderizador usa realmente tu Mac

Abre Settings de Obsidian y luego General, y anota la versión actual de la aplicación. La documentación actual indica que ahí están la información de versión y el control Read the changelog. Consulta las notas de la versión instalada antes de seguir instrucciones escritas para otra compilación. Configuración — Ayuda de Obsidian

Hay un límite de versión importante: la versión de acceso anticipado 1.15.0 de Obsidian para escritorio, publicada el 22 de octubre de 2026, incorpora Pele para renderizar diagramas y describe su compatibilidad con la sintaxis de Mermaid 12.1.0. Ese anuncio no establece qué renderizador usa una versión anterior instalada. Notas de la versión 1.15.0 de Obsidian para escritorio

Pele documenta su propio motor de diseño, con posiciones de nodos, espaciado y trazados de aristas distintos de los de Mermaid. Su lista de compatibilidad incluye tanto block como block-beta. Por lo tanto, la compatibilidad sintáctica por sí sola no basta para demostrar que un diagrama de Obsidian coincidirá con el renderizado de Mermaid original. Compatibilidad de Pele

Mermaid también ha cambiado en su versión original: su documentación sobre diseños indica que ELK pasó a incluirse y a ser la opción predeterminada para los diagramas de flujo en la versión 12.0.0; antes, el entorno anfitrión tenía que instalar y registrar el paquete ELK por separado. Por tanto, las recomendaciones para seleccionar layout: elk deben condicionarse al renderizador y a la versión. Diseños de Mermaid

Para hacer una comparación útil, conserva juntas tres cosas: el código fuente exacto del diagrama, la versión de la aplicación Obsidian y el entorno de renderizado. Cambia una cosa por vez. Comparar textos de origen distintos en renderizadores diferentes no permite aislar por qué se movieron las filas.

Usa un diagrama de bloques para definir la posición de las filas

Los diagramas de bloques de Mermaid permiten controlar la posición mediante columnas. Los bloques ocupan las columnas declaradas y pasan a las filas siguientes; space reserva celdas vacías. Esta es la vía compatible de Mermaid para organizar cajas independientemente de la jerarquía de los diagramas de flujo. Sintaxis de diagramas de bloques

Crea una nota temporal en Obsidian y pega el bloque completo que aparece abajo, incluidos los tres acentos graves iniciales y finales. Obsidian documenta los diagramas como bloques de código cercados con el identificador de lenguaje mermaid. Sintaxis de formato avanzado — Ayuda de Obsidian

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

La disposición prevista muestra Alpha, Beta y Gamma en la fila superior ocupada, con Delta, Epsilon y Zeta debajo. Cinco columnas incluyen dos espacios horizontales; space:5 reserva una fila completa vacía entre las filas ocupadas. Las conexiones hacen referencia a los ID de bloque declarados. Estos elementos siguen la sintaxis documentada por Mermaid para columnas, espaciado y aristas. Sintaxis de diagramas de bloques

Si el renderizador instalado rechaza block, detente y comprueba la compatibilidad. Consulta la sintaxis documentada antes de probar la forma anterior block-beta; Pele incluye ambas de forma explícita, pero eso no demuestra que todas las versiones anteriores de Obsidian las admitan. Los ejemplos de aquí se contrastaron con la documentación; no se ejecutaron en un renderizador de Obsidian instalado. Compatibilidad de Pele

Evalúa el resultado en dos etapas. Primero, comprueba las seis etiquetas y que estén en las filas previstas. Después, inspecciona las ocho relaciones, especialmente la conexión diagonal entre Alpha y Zeta. Que la disposición de las cajas sea aceptable no debe ocultar un conector ambiguo o superpuesto.

¿También necesitas filas fijas y conectores en ángulo recto?

Evalúa el aspecto de los conectores como un criterio de aceptación independiente. La configuración de los diagramas de flujo de Mermaid define curve como un ajuste de renderizado de aristas e incluye step, stepBefore y stepAfter entre sus valores. También define por separado nodeSpacing para nodos del mismo nivel y rankSpacing para nodos de distintos niveles. Esos ajustes afectan al aspecto y al espaciado; sus propósitos documentados no garantizan que los nodos permanezcan en filas fijas. Esquema de configuración de diagramas de flujo

El ejemplo de bloques define la posición de las cajas. No garantiza que todas las conexiones cruzadas usen solo segmentos horizontales y verticales. No des por hecho que un ajuste de curvas de los diagramas de flujo controle los conectores de los diagramas de bloques ni que un ajuste admitido por Mermaid original se comporte igual en Pele.

Usa esta guía para decidir antes de dedicar tiempo a ajustar el dibujo:

Resultado necesario Opción práctica Criterio de aceptación
Dos filas fijas con conexiones cruzadas entre nodos individuales Diagrama de bloques, si se admite Cada nodo permanece en la fila prevista
Un diagrama de flujo legible con posicionamiento flexible Ajustes de diseño y espaciado del diagrama de flujo Las relaciones siguen siendo claras después de cada edición
Conexiones entre grupos completos Extremos en subgrafos, si el significado es correcto Los extremos representan la relación prevista
Cajas dispuestas manualmente en Obsidian Canvas La posición de las tarjetas y las conexiones coinciden con el diagrama previsto
Filas fijas y giros prescritos en los conectores Evalúa ambos requisitos por separado Inspecciona cada giro y cruce en el renderizador real

¿Qué puedes hacer si tu versión instalada de Obsidian no renderiza el diagrama de bloques?

Para una tarea normal en Mac donde se acepten tarjetas colocadas manualmente, Obsidian Canvas ofrece una alternativa documentada. Abre la paleta de comandos y selecciona Canvas: Create new canvas. Haz doble clic en el lienzo para crear tarjetas de texto y luego introduce las seis etiquetas de ejemplo. Canvas — Ayuda de Obsidian

Selecciona las tres tarjetas superiores y usa Align y luego Arrange in a row. Repite el proceso para las tres inferiores. Ajusta el espaciado según sea necesario. Para conectar tarjetas, pasa el cursor sobre el borde de una tarjeta hasta que aparezca un círculo relleno y arrástralo hasta el borde de otra tarjeta. Estas funciones de organización y conexión están documentadas para Canvas. Canvas — Ayuda de Obsidian

Canvas crea un documento .canvas independiente en lugar de un bloque de código Mermaid integrado. Elígelo cuando sea aceptable entregar tarjetas dispuestas directamente. Sus controles de posición permiten organizar las filas, pero la documentación citada no confirma que se puedan editar puntos de paso arbitrarios de los conectores. Canvas — Ayuda de Obsidian

Verifica el resultado antes de añadir más conexiones

Sigue una pequeña secuencia comparativa para distinguir la sintaxis no admitida del comportamiento del diseño. Es un procedimiento de diagnóstico derivado de los límites documentados, no una afirmación sobre una instalación de Obsidian probada:

  1. Renderiza los seis bloques declarados sin sus ocho líneas de conexión. Comprueba que estén en las filas previstas.
  2. Vuelve a añadir las cuatro conexiones dentro de cada fila. Comprueba las etiquetas y la dirección de las flechas.
  3. Vuelve a añadir las tres conexiones entre las columnas correspondientes. Inspecciona el espacio entre las filas.
  4. Añade A --> F al final. Comprueba si su trazado sigue siendo legible.
  5. Abre el código fuente final en el entorno donde quieres leerlo. Evalúa ese renderizado.

Si el primer paso produce un error de análisis, comprueba si se admite el diagrama antes de cambiar el espaciado. Si la posición es satisfactoria pero un conector no queda claro, ajusta ese trazado específico o reconsidera la presentación. Mantén visibles todas las relaciones requeridas al comparar alternativas; eliminar la conexión problemática eliminaría precisamente la condición que el diagrama debe resolver.

Para fijar las filas, empieza por una disposición explícita de bloques y valídala en el renderizador instalado. Conserva las relaciones entre nodos, inspecciona por separado la geometría de los conectores y usa Canvas cuando organizar tarjetas directamente sea la forma más práctica de completar la tarea.

Fuentes