{"id":2110,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-mind-map-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-mind-map-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-mind-map-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis de Mapa de Mentes de Mermaid.js"},"content":{"rendered":"

\u00bfQu\u00e9 es un Mapa de Mentes?<\/h2>\n

Un Mapa de Mentes<\/strong>es una visualizaci\u00f3n basada en \u00e1rbol jer\u00e1rquico utilizada para capturar, organizar y estructurar flujos de informaci\u00f3n complejos, ideas generadas en lluvia de ideas o taxonom\u00edas de proyectos. A diferencia de los diagramas de flujo que indican pasos procedimentales lineales, los mapas de mentes representan conexiones entre un concepto central y sus diversos subnodos, lo que los hace ideales para la planificaci\u00f3n de rutas de alto nivel, estructuras de descomposici\u00f3n de caracter\u00edsticas o gesti\u00f3n del conocimiento.<\/p>\n

Con Mermaid.js<\/strong>, defines tu estructura jer\u00e1rquica utilizando la sangr\u00eda est\u00e1ndar de listas de Markdown. El motor maneja autom\u00e1ticamente la posici\u00f3n de los nodos, calcula el crecimiento del \u00e1rbol y aplica formas de nodo distintas seg\u00fan el nivel jer\u00e1rquico, permiti\u00e9ndote visualizar cientos de nodos interconectados sin alineaci\u00f3n manual de p\u00edxeles.<\/p>\n

Gu\u00eda de sintaxis principal: Elementos y construcciones<\/h2>\n

Dise\u00f1ar un Mapa de Mentes v\u00e1lido y de calidad de producci\u00f3n en Mermaid requiere dominar la definici\u00f3n del nodo ra\u00edz, el anidamiento por niveles basado en sangr\u00eda y los tokens decorativos visuales.<\/p>\n

1. Inicializaci\u00f3n de la ra\u00edz del Mapa de Mentes<\/h3>\n

Inicializas una superficie de mapa de mentes en la primera l\u00ednea utilizando la palabra clave mindmap<\/code>palabra clave. La estructura se construye definiendo un nodo ra\u00edz (el centro de tu mapa) y luego anidando subnodos debajo de \u00e9l utilizando sangr\u00eda basada en espacios:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
mindmap\r\n  root((Concepto central))\r\n    Nodo de nivel 1\r\n      Subnodo de nivel 2<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Control de la geometr\u00eda del nodo<\/h3>\n
Al igual que en los diagramas de flujo, puedes inyectar contexto visual encerrando tu texto en tokens de corchetes espec\u00edficos. Esto se recomienda altamente para diferenciar entre categor\u00edas principales, tareas secundarias e items accionables:<\/p>\n