{"id":2106,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/mermaid-js-mind-map-syntax-guide\/","title":{"rendered":"Przewodnik po sk\u0142adni mapy my\u015bli Mermaid.js"},"content":{"rendered":"

Co to jest mapa my\u015bli?<\/h2>\n

Mapa my\u015bl<\/strong>to wizualizacja oparta na hierarchicznej strukturze drzewa, u\u017cywana do zapisywania, organizowania i strukturyzowania z\u0142o\u017conych przep\u0142yw\u00f3w informacji, pomys\u0142\u00f3w wy\u0142onionych w sesji m\u00f3zgu, lub hierarchii projekt\u00f3w. W przeciwie\u0144stwie do schemat\u00f3w blokowych, kt\u00f3re wyznaczaj\u0105 liniowe kroki procedury, mapy my\u015bli przedstawiaj\u0105 po\u0142\u0105czenia mi\u0119dzy centralnym poj\u0119ciem a jego r\u00f3\u017cnymi w\u0119z\u0142ami podrz\u0119dnymi, co czyni je idealnym narz\u0119dziem do planowania og\u00f3lnych tras rozwojowych, struktury rozk\u0142adu funkcji lub zarz\u0105dzania wiedz\u0105.<\/p>\n

Za pomoc\u0105 Mermaid.js<\/strong>, definiujesz struktur\u0119 hierarchiczn\u0105 za pomoc\u0105 standardowego wci\u0119cia listy w Markdown. Silnik automatycznie obs\u0142uguje pozycjonowanie w\u0119z\u0142\u00f3w, oblicza wzrost drzewa i stosuje r\u00f3\u017cne kszta\u0142ty w\u0119z\u0142\u00f3w w zale\u017cno\u015bci od poziomu hierarchii, umo\u017cliwiaj\u0105c wizualizacj\u0119 setek po\u0142\u0105czonych ze sob\u0105 w\u0119z\u0142\u00f3w bez r\u0119cznego dopasowania pikseli.<\/p>\n

Podstawowy przewodnik sk\u0142adniowy: elementy i konstrukcje<\/h2>\n

Projektowanie poprawnej, produkcyjnej mapy my\u015bli w Mermaid wymaga opanowania definicji w\u0119z\u0142a g\u0142\u00f3wnego, zagnie\u017cd\u017cania poziom\u00f3w opartego na wci\u0119ciach oraz u\u017cywania wizualnych token\u00f3w dekoracyjnych.<\/p>\n

1. Inicjowanie korzenia mapy my\u015bli<\/h3>\n

Inicjujesz p\u0142\u00f3tno mapy my\u015bli w pierwszym wierszu, u\u017cywaj\u0105c s\u0142owa kluczowego mindmap<\/code>S\u0142owo kluczowe. Struktura tworzona jest poprzez zdefiniowanie w\u0119z\u0142a g\u0142\u00f3wnego (\u015brodka Twojej mapy) i nast\u0119pnie zagnie\u017cd\u017cenie w\u0119z\u0142\u00f3w podrz\u0119dnych poni\u017cej niego za pomoc\u0105 standardowego wci\u0119cia opartego na spacjach:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj Mermaid w 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((Centralny poj\u0119ciowy element))\r\n    W\u0119ze\u0142 poziomu 1\r\n      Podw\u0119ze\u0142 poziomu 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>
\nEdytuj Mermaid w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Kontrolowanie geometrii w\u0119z\u0142a<\/h3>\n
Tak jak w schematach blokowych, mo\u017cesz wprowadzi\u0107 kontekst wizualny, otaczaj\u0105c tekst specjalnymi znakami nawias\u00f3w. Jest to bardzo zalecane do odr\u00f3\u017cniania g\u0142\u00f3wnych kategorii, zada\u0144 pomocniczych i dzia\u0142a\u0144 do wykonania:<\/p>\n