Usa subgrafos de diagramas de flujo anidados para los contenedores con título, incluidos los bloques hoja. Si los contenedores vacíos se muestran mal, añade un espaciador invisible dentro de cada hoja. Así se conserva la jerarquía visible; comprueba el resultado en el renderizador de Obsidian que tengas instalado.

Esta guía crea un diagrama neutro: un bloque exterior titulado Collection, que contiene Group A y Group B, con contenedores hoja con título dentro de cada grupo. La tarea consiste en mantener esas hojas con aspecto de contenedores con encabezados, en lugar de sustituirlas por rectángulos con etiquetas comunes.

¿Qué debe representar un bloque hoja con título?

Representa cada contenedor visible con un subgraph, independientemente de si contiene otro bloque significativo. Mermaid documenta los subgrafos, los ID de subgrafo explícitos y el anidamiento en sus ejemplos de diagramas de flujo. Una declaración de nodo común, como leafA["Block A"], crea un nodo con etiqueta; no declara un contenedor con título. Consulta Flowcharts — Basic Syntax, de Mermaid.

En este ejemplo, distingue el modelo visible de los elementos que ayudan a distribuirlo. Collection, los grupos y los bloques hoja son los elementos significativos. Un espaciador es un detalle de implementación que proporciona contenido a un contenedor hoja para la distribución. Añadir este elemento auxiliar no cambia la declaración de la hoja de subgrafo a nodo.

Esta distinción también delimita el alcance de este método: produce un diagrama cuyas hojas visibles siguen siendo contenedores con título, pero su código fuente incluye nodos auxiliares comunes. Si tu requisito prohíbe todas las declaraciones de nodos, incluidos los auxiliares invisibles, esta solución alternativa no cumple ese requisito más estricto.

Comprueba qué renderizador usa tu instalación de Mac

En Obsidian, abre Settings en la barra lateral, selecciona General y anota la versión de la aplicación. La documentación de Settings de Obsidian indica que la información de versión está en General. Usa esa versión para consultar las notas de la versión correspondiente.

Hay una diferencia importante entre los renderizadores. Las notas oficiales de la versión del 22 de octubre de 2026 indican que Desktop 1.15.0 está en acceso anticipado y que renderiza la sintaxis Mermaid mediante la biblioteca Pele de Obsidian, con compatibilidad para la sintaxis de Mermaid 12.1.0. La misma versión cambia las clases generadas para los diagramas por las clases de Pele. No des por hecho que una instalación anterior usa Pele, ni que la compatibilidad implica una salida idéntica a la de Mermaid.js. Consulta Obsidian 1.15.0 Desktop (Early access).

La documentación de Mermaid consultada para esta guía muestra la versión 12.2.0. Es una versión distinta del nivel de compatibilidad indicado en esas notas de la versión de Obsidian. Considera la documentación, un editor en línea y tu aplicación instalada como entornos separados hasta que hayas comprobado el mismo ejemplo en cada uno.

Para el primer intento, evita configuraciones específicas del renderizador y selectores de hojas de estilo externas. El ejemplo de abajo usa subgrafos y estilos locales al diagrama, lo que te da un punto de partida sencillo para comprobar tu instalación.

Crea los contenedores anidados en una nota de Obsidian

Abre una nota en la vista de edición y pega el bloque completo de abajo, incluidos los delimitadores de apertura y cierre. Obsidian documenta los diagramas Mermaid como bloques de código delimitados con el identificador de lenguaje mermaid. Para ese formato documentado en las notas no se necesita ningún complemento adicional para diagramas. Consulta Advanced formatting syntax.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Pulsa Cmd+E para alternar entre la edición y la Reading view. Usa la vista de lectura para inspeccionar el diagrama terminado sin que el cursor de edición muestre el código fuente. Estos controles están documentados en Views and editing mode, de Obsidian.

El resultado previsto tiene seis contenedores visibles con título: una colección, dos grupos y tres bloques hoja. Cada hoja contiene un elemento auxiliar cuya etiqueta es un espacio. La clase spacer solicita un relleno, un borde y un texto transparentes. Esto combina el mecanismo de clases documentado por Mermaid con una solución alternativa de distribución; Mermaid documenta classDef y la asignación de clases en su referencia de estilos para diagramas de flujo.

El ejemplo se ha revisado conforme a la sintaxis documentada; no se ha renderizado en una sesión de Obsidian para Mac para este artículo. Por tanto, la comprobación de aceptación es visual y local: deben aparecer los seis títulos, cada grupo debe contener las hojas que se le han asignado y no debe verse ningún rectángulo espaciador. El espaciado exacto y la posición de los elementos del mismo nivel no son criterios de aceptación.

Cambia las etiquetas sin alterar la jerarquía

Empieza cambiando únicamente los títulos entre comillas. Mantén distintos collection, groupA, blockA y los demás ID. Así será más fácil comparar la versión editada con el ejemplo inicial.

Para añadir otra hoja, copia un subgrafo hoja completo, asigna ID nuevos tanto a su subgrafo como a su espaciador y añade el ID nuevo del espaciador a la asignación de clases final. Colócala antes de end del grupo que la contiene. Por ejemplo, una cuarta hoja dentro de Group B debe ir junto a blockC, dentro de groupB.

Lee las instrucciones de cierre desde el interior hacia afuera: cierra la hoja, luego su grupo y, por último, la colección. La sangría permite ver esa estructura mientras editas, pero la posición de cada end es lo que debe expresar correctamente el código fuente.

¿Por qué usar espaciadores en lugar de subgrafos vacíos?

El comportamiento de los contenedores vacíos ha variado según el renderizador y la versión. El problema de Mermaid 5402 informa que un subgrafo vacío falla con ELK en Mermaid 10.8.0, mientras que el ejemplo proporcionado con Dagre funciona. Es un informe histórico sobre una configuración específica, no una prueba de que todos los renderizadores actuales rechacen los subgrafos vacíos. Consulta Elk renderer not wokring on empty subgraph.

La conclusión práctica es evitar que el comportamiento de los contenedores vacíos sea la única base de un diagrama pensado para una instalación sin especificar. El enfoque con espaciadores proporciona contenido explícito a cada hoja y mantiene el título significativo en el subgrafo.

Usa esta guía de decisión para elegir cuán estricto debe ser tu código fuente:

Requisito Enfoque inicial Qué comprobar
Las hojas visibles deben seguir siendo contenedores con título Subgrafos anidados con espaciadores transparentes Los títulos, la contención y los elementos auxiliares ocultos
El código fuente no debe contener nodos auxiliares Prueba subgrafos hoja vacíos en el renderizador de destino Si todas las hojas vacías se muestran correctamente
Los bloques hoja incluirán elementos reales más adelante Conserva los subgrafos hoja y sustituye sus espaciadores Elimina solo los elementos auxiliares que ya no hagan falta
Los bloques necesitan una colocación deliberada en columnas Evalúa los diagramas de bloques de Mermaid por separado Compatibilidad de sintaxis en la instalación y presentación de títulos

La documentación específica de Mermaid para diagramas de bloques describe bloques compuestos, columnas y espaciado explícito. Conviene evaluar esas funciones cuando la tarea principal sea la colocación. Por sí solas, no demuestran que una conversión vaya a conservar exactamente esta presentación de contenedores con título. Consulta Block Diagrams Documentation.

Diagnostica un resultado que no se ve bien

Cambia una sola cosa cada vez. Guarda una copia del ejemplo inicial completo en una nota aparte para que puedas distinguir una diferencia del renderizador de un error de edición.

  1. La nota muestra código en lugar de un diagrama. Comprueba que el delimitador de apertura use mermaid y luego cambia a Reading view. Compara el delimitador con el formato de diagramas documentado por Obsidian.
  2. Una hoja parece un rectángulo común con etiqueta. Revisa su declaración. Debe comenzar con subgraph, y el espaciador debe estar en una línea aparte dentro de ella.
  3. Sigue viéndose un rectángulo pequeño dentro de una hoja. Comprueba que el ID del espaciador coincida con la instrucción final class. Quita temporalmente los estilos para identificar qué elemento auxiliar ves y luego restáuralos.
  4. Un bloque aparece en el grupo equivocado. Comprueba la secuencia de instrucciones end de cierre antes de ajustar la configuración de distribución.
  5. El diagrama funciona en línea, pero se ve diferente en Obsidian. Compara las notas de la versión de la aplicación instalada con la versión del renderizador en línea. Usa el ejemplo local que funciona como referencia.

Conserva la contención antes de ajustar la colocación

Cuando los títulos y la contención sean correctos, decide si la disposición es lo bastante legible. No sustituyas un subgrafo hoja por un nodo solo para que su rectángulo sea más pequeño: esa modificación cambia la representación que querías conservar.

Del mismo modo, añade conectores solo cuando el diagrama necesite mostrar una relación más allá de la contención. Mermaid documenta una limitación de dirección: al enlazar un nodo dentro de un subgrafo con el exterior, ese subgrafo hereda la dirección de su elemento principal. Vuelve a comprobar la distribución después de añadir esas conexiones. Consulta Direction in subgraphs.

Termina inspeccionando la nota con el ancho al que normalmente la lees. Conserva la versión que muestre con claridad la colección, sus grupos y sus hojas con título. El resultado útil es una jerarquía de contención legible cuyos bloques hoja siguen siendo subgrafos, con los elementos auxiliares invisibles de distribución identificados claramente y fáciles de quitar más adelante.

Fuentes