Los diagramas generados con Mermaid son muy útiles. Debería ser ya una herramienta estándar y preconfigurada, pero aún es algo que, pese a contar con soporte para Markdown, debe configurarse y no hay garantía de que funcione.
Hace poco escribía sobre mis devaneos con la organización de mis pendientes y el uso de Reminders. En cierto momento decidí que lo mejor era hacer uso de un diagrama de estados para no perderme en las complicaciones del tema y de las herramientas.
Después de establecer las reglas, decidí ahorrarme algo de trabajo dándoselas a ChatGPT para obtener el código inicial (prototipo) de un diagrama de Mermaid. ChatGPT cumplió con su encomienda, pero el resultado que me mostró no me gustó por la forma de sus arcos autorreferenciales. Pensé que sería alguna limitación de este, y decidí probar en el «live editor» de «Mermaid JS», pero me topé con que está estrenando dominio y algo de planes o suscripciones, así que decidí probar mejor en VS Code.
Ya había pasado algo de tiempo desde la última vez que usé VS Code, Lo había desinstalado y reinstalado, por lo que debí volver a buscar e instalar el plug-in como recordaba. Tenía dos candidatos que ya había probado antes. El primero, el más popular, dio el mismo resultado. Decidí probar con «el oficial» del proyecto Mermaid, y el resultado fue el mismo. Intrigado, decidí sortear todo eso de las suscripciones y los planes y ver si podía usar el editor en línea que recordaba de Mermaid JS. Lo logré, pero obtuve los mismos resultados.
Este es el diagrama que obtuve en todos estos intentos:
Al regresar a VS Code, ocurrió algo raro. El diagrama dejó de mostrarse (aunque había momentos en que alcanzaba a verlo durante una fracción de segundo al buscarlo con el «preview»). Probé deshabilitar, desinstalar y reinstalar los plug-ins, así como reiniciar VS Code. En alguno de estos intentos, con alguno de los plug-ins apareció un mensaje de error. Revisando el problema, descubrí dos cosas: el problema reportado en el mensaje de error ya había sido notado y estaba reportado desde el año pasado; y que el plug-in más popular ya había sido incorporado a VS Code.
Mi conclusión fue que el problema de presentación y el mensaje de error se deben a esa adición en VS Code. Quitar los plug-ins resolvió todo, pero por el momento no es posible usar el «oficial» de Mermaid JS, que ofrece algunas funcionalidades y ventajas muy útiles. En este proceso de troubleshooting también observé quejas sobre la calidad de la generación de los diagramas de estado, y en una de las respuestas o comentarios se comparó con los generados por otra biblioteca o plug-in, que fue la que terminé por usar.
Referencias
- «Visual Studio Code 1.121″, code.visualstudio.com, web. Updated: 2026.05.20; visited: 2026.05.30, URL: https://code.visualstudio.com/updates/v1_121#_mermaid-diagrams-in-markdown-preview-and-notebooks
Siguiente
Dr. Edu 