Control total del color en diagramas Mermaid

A veces, los pequeños detalles visuales marcan una gran diferencia en la claridad de la documentación. En el proyecto devlog-ist/landing, cuyo objetivo es crear una landing page atractiva y funcional, nos encontramos con un problema estético al renderizar diagramas Mermaid.

El problema del color rosa/rojizo

Los diagramas Mermaid, por defecto, utilizaban un tema 'dark' que, en ciertas configuraciones y para algunos tipos de diagramas (especialmente subgraphs y clusters), derivaba en la generación automática de fondos de color rosa o rojizo. Este comportamiento no era deseable, ya que comprometía la coherencia visual de la página.

La solución: control total del tema

Para solucionar este problema, se optó por un cambio de estrategia radical: pasar del tema predefinido 'dark' al tema 'base' de Mermaid. El tema 'base' ofrece un control absoluto sobre todos los colores del diagrama, permitiendo definir variables de tema personalizadas para cada tipo de diagrama. Además, se añadieron overrides CSS específicos para subgraphs y clusters, eliminando la generación automática de colores no deseados.

.mermaid .cluster-label {
  fill: #333;
}

.mermaid .node rect {
  fill: #fff;
  stroke: #333;
}

Este fragmento de CSS ejemplifica cómo se personalizan los colores de los nodos y las etiquetas de los clusters para asegurar la consistencia visual.

El resultado

Con esta modificación, se logró un control total sobre la paleta de colores de los diagramas Mermaid, eliminando los fondos rosa/rojizos no deseados y garantizando una apariencia visualmente coherente con el resto de la página. Este cambio, aunque pequeño, contribuye significativamente a la profesionalidad y claridad de la documentación.

Conclusión: No subestimes el poder de los pequeños ajustes en el diseño. Un control preciso sobre los detalles visuales puede marcar la diferencia entre una documentación confusa y una que sea clara, atractiva y fácil de entender.