{"id":2083,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Sk\u0142adnia i przewodnik po uk\u0142adzie diagramu architektury Mermaid.js"},"content":{"rendered":"

Diagram architektury zapewnia strukturalny szablon u\u017cywany przez architekt\u00f3w system\u00f3w i zespo\u0142y DevOps do wizualizacji konfiguracji infrastruktury, mikroserwis\u00f3w chmury oraz ustawie\u0144 strukturalnych. Zbudowany na silnikuarchitecture-beta<\/code> silniku, ten narz\u0119dzie oparte na tek\u015bcie zast\u0119puje r\u0119czne przeci\u0105ganie narz\u0119dzi poprzez automatyczne uk\u0142adanie grup us\u0142ug strukturalnych, klastr\u00f3w baz danych, bramek i \u015bcie\u017cek kraw\u0119dziowych w czyste, przewidywalne uk\u0142ady systemowe.<\/p>\n

Podstawowa struktura sk\u0142adni<\/h2>\n

Ka\u017cdy diagram zaczyna si\u0119 odarchitecture-beta<\/code> nag\u0142\u00f3wka deklaracji. Wype\u0142niasz p\u0142\u00f3tno, definiuj\u0105c pojedyncze elementy w\u0119z\u0142a za pomoc\u0105 s\u0142owa kluczowegoservice<\/code> s\u0142owo kluczowe, a \u015bcie\u017cki po\u0142\u0105cze\u0144 mapujesz, okre\u015blaj\u0105c dok\u0142adne porty wsp\u00f3\u0142rz\u0119dnych kierunkowych (T<\/strong>op, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) oddzielone dwukropkami i podw\u00f3jnymi my\u015blnikami.<\/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 
architecture-beta\r\n  service gateway(internet)[Etykieta bramy]\r\n  service server(server)[Serwer aplikacji]\r\n  \r\n  gateway:B -- T:server<\/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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdytuj Mermaid w VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Odwo\u0142anie sk\u0142adniowe<\/h2>\n
Poni\u017csza tabela rozk\u0142ada podstawowe sk\u0142adniki danych, s\u0142owa kluczowe formatowania oraz atrybuty po\u0142\u0105cze\u0144 u\u017cywane do tworzenia mapy przestrzeni roboczej architektury w Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Sk\u0142adnik sk\u0142adni<\/th>\nWym\u00f3g typu<\/th>\nOpis i zasady u\u017cytkowania<\/th>\n<\/tr>\n<\/thead>\n
Deklaracja<\/strong><\/td>\nIdentyfikator s\u0142owa kluczowego<\/td>\nInicjuje p\u0142\u00f3tno przestrzeni roboczej mapowania infrastruktury. Nale\u017cy u\u017cy\u0107 dok\u0142adniearchitektura-beta<\/code> blok.<\/td>\n<\/tr>\n
W\u0119ze\u0142 us\u0142ugi<\/strong><\/td>\nS\u0142owo kluczowe + Blok to\u017csamo\u015bci<\/td>\nDeklaruje jednostk\u0119 architektoniczn\u0105. U\u017cywa sk\u0142adni: us\u0142uga id(ikona)[Etykieta wy\u015bwietlana]<\/code>.<\/td>\n<\/tr>\n
Odpowiednik grupy<\/strong><\/td>\nS\u0142owo kluczowe kontenera<\/td>\nGrupuje powi\u0105zane us\u0142ugi wizualnie w kontenerze. U\u017cywa sk\u0142adni: grupa id(ikona)[Etykieta grupy]<\/code>.<\/td>\n<\/tr>\n
S\u0142owo kluczowe ‘w’<\/strong><\/td>\nModyfikator przypisania<\/td>\nJawnie przypisuje w\u0119ze\u0142 us\u0142ugi do przebywania w okre\u015blonym deklarowanym opakowaniu grupy: us\u0142uga id(ikona)[Etykieta] w groupId<\/code>.<\/td>\n<\/tr>\n
W\u0119ze\u0142 po\u0142\u0105czenia<\/strong><\/td>\nIdentyfikator s\u0142owa kluczowego<\/td>\nUstanawia punkt centralny do wyr\u00f3wnania strukturalnego u\u017cywany do czystego routingu skomplikowanych, wielokierunkowych \u015bcie\u017cek po\u0142\u0105cze\u0144: w\u0119ze\u0142 id<\/code>.<\/td>\n<\/tr>\n
Kraw\u0119dzie po\u0142\u0105cze\u0144<\/strong><\/td>\nOperatory kierunku portu<\/td>\nKonfiguruje \u015bcie\u017cki \u015bledzenia kierunkowego przez przypi\u0119cie po\u0142\u0105czenia do okre\u015blonych stron w\u0119z\u0142a (G, D, L, P): \u017ar\u00f3d\u0142o:side -- side:docelowy<\/code>. Obs\u0142uguje strza\u0142ki kierunkowe (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Zaawansowane grupowanie i routowanie kraw\u0119dzi portu<\/h2>\n
Aby dok\u0142adnie kontrolowa\u0107 spos\u00f3b przemieszczania si\u0119 po\u0142\u0105cze\u0144 mi\u0119dzy elementami bez wygl\u0105dania nieporz\u0105dnego, silnik architektury wymaga jawnych powi\u0105za\u0144 port\u00f3w. Powi\u0105zane w\u0119z\u0142y mog\u0105 by\u0107 organizowane wewn\u0105trz grup strukturalnych w celu ujednoznacznia granic systemu.<\/p>\n
1. Zasady dok\u0142adnego przypisywania port\u00f3w<\/h3>\n
Okre\u015blasz, gdzie linia po\u0142\u0105czenia opuszcza i wchodzi do komponentu, dodaj\u0105c dwukropek i flag\u0119 kierunku kraw\u0119dzi (“G<\/code>, D<\/code>, L<\/code>, P<\/code>) do odpowiednich identyfikator\u00f3w w\u0119z\u0142\u00f3w:<\/p>\n