{"id":2081,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-08T06:20:18","modified_gmt":"2026-07-08T06:20:18","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"Sk\u0142adnia schematu blokowego Mermaid.js i przewodnik po uk\u0142adzie siatki"},"content":{"rendered":"<p>Schemat blokowy to silnie zorganizowany silnik uk\u0142adu s\u0142u\u017c\u0105cy do przedstawiania z\u0142o\u017conych architektur oprogramowania, platform sprz\u0119towych lub modeli organizacyjnych. Wprowadzony zgodnie z zasadami Mermaid.js, silnik <code>block<\/code> traktuje obszar uk\u0142adu jako absolutn\u0105 macierz matematyczn\u0105 siatki. Zapewnia dok\u0142adne zarz\u0105dzanie wyr\u00f3wnaniem kolumn, izolowanymi granicami zagnie\u017cd\u017cania uk\u0142adu, blokami odst\u0119p\u00f3w strukturalnych oraz jawnymi konfiguracjami po\u0142\u0105cze\u0144 port\u00f3w kraw\u0119dzi.<\/p>\n<h2>Zrozumienie strategii macierzy siatki<\/h2>\n<p>W przeciwie\u0144stwie do standardowych schemat\u00f3w przep\u0142ywu o swobodnej formie, kt\u00f3re dynamicznie przewiduj\u0105 \u015bcie\u017cki uk\u0142adu, schemat blokowy opiera si\u0119 na sztywnej liniowej sieci wsp\u00f3\u0142rz\u0119dnych:<\/p>\n<ul>\n<li><strong>Pr\u00f3g kolumn:<\/strong> Ustawiasz surowy poziomy limit, u\u017cywaj\u0105c modyfikatora <code>columns<\/code> modyfikatora. Gdy siatka zostanie wype\u0142niona blokami, dodatkowe elementy automatycznie przechodz\u0105 do nast\u0119pnej linii w spos\u00f3b czysty.<\/li>\n<li><strong>Wymiary wed\u0142ug p\u00f3l siatki:<\/strong> Domy\u015blnie ka\u017cdy blok zajmuje pojedyncze miejsce wsp\u00f3\u0142rz\u0119dnych ($1 times 1$). Mo\u017cesz zmieni\u0107 to zachowanie, przypisuj\u0105c jawne szeroko\u015bci kolumn, aby elementy rozci\u0105ga\u0142y si\u0119 idealnie na kilka \u015bcie\u017cek.<\/li>\n<\/ul>\n<h2>Podstawowa struktura sk\u0142adni<\/h2>\n<p>Ka\u017cdy uk\u0142ad zaczyna si\u0119 od nag\u0142\u00f3wka deklaracji <code>block<\/code> deklaracji. Nast\u0119pnie ustala si\u0119 pojemno\u015b\u0107 szeroko\u015bci wiersza za pomoc\u0105 s\u0142owa kluczowego <code>columns<\/code> i deklarowania blok\u00f3w w kolejnych liniach.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5UCMlOLyourKhWScvKzlWJRpJ2ilY7OKspPyc4vxyrvDNRelAiXAwDPESU1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n  componentA[\"Pierwszy blok\"]\r\n  componentB[\"\u015arodkowy blok\"]\r\n  componentC[\"Prawy blok\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5UCMlOLyourKhWScvKzlWJRpJ2ilY7OKspPyc4vxyrvDNRelAiXAwDPESU1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"MVMmAKu\"><img alt=\"\" class=\"alignnone size-full wp-image-966\" decoding=\"async\" height=\"42\" sizes=\"(max-width: 321px) 100vw, 321px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" width=\"321\"\/><\/p>\n<h2>Odwo\u0142anie sk\u0142adniowe<\/h2>\n<p>Poni\u017csza tabela rozk\u0142ada podstawowe parametry danych, s\u0142owa kluczowe niestandardowego stylu oraz strukturalne kontenery rozpoznawane domy\u015blnie przez interpreter blok\u00f3w.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Sk\u0142adnik sk\u0142adni<\/th>\n<th>Wym\u00f3g typu<\/th>\n<th>Opis i zasady wizualnego uk\u0142adu<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklaracja<\/strong><\/td>\n<td>Identyfikator s\u0142owa kluczowego<\/td>\n<td>Inicjuje obszar siatki blokowej macierzy. Nale\u017cy u\u017cy\u0107 dok\u0142adnie <code>blok<\/code> ci\u0105g nag\u0142\u00f3wka.<\/td>\n<\/tr>\n<tr>\n<td><strong>Zestaw kolumn<\/strong><\/td>\n<td>S\u0142owo kluczowe + Liczba ca\u0142kowita<\/td>\n<td>Okre\u015bla ca\u0142kowit\u0105 liczb\u0119 poziomych miejsc przed przej\u015bciem wierszy (np. <code>kolumny 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Standardowy blok<\/strong><\/td>\n<td>ID + Opcjonalny etykietka<\/td>\n<td>Tworzy standardowy blok danych: <code>id[\"Tekst etykiety\"]<\/code>. Dekoratory kszta\u0142t\u00f3w odpowiadaj\u0105 sk\u0142adni schematu blokowego (np. <code>(())<\/code> dla okr\u0119g\u00f3w, <code>[()]<\/code> dla baz danych).<\/td>\n<\/tr>\n<tr>\n<td><strong>Zast\u0105pienie wymiar\u00f3w bloku<\/strong><\/td>\n<td>Blok parametru dwukropka<\/td>\n<td>Zast\u0119puje domy\u015blny footprint siatki skalowania uk\u0142adu $1 times 1$ przez jawne przypisanie niestandardowych blok\u00f3w szeroko\u015bci kolumn: <code>id:szeroko\u015b\u0107<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Element odst\u0119pu<\/strong><\/td>\n<td>Zarezerwowane s\u0142owo kluczowe<\/td>\n<td>Wstawia niewidoczny, strukturalny pusty element odst\u0119pu $1 times 1$ do aktywnego wiersza przy u\u017cyciu dok\u0142adnego <code>odst\u0119py<\/code> s\u0142owa kluczowego. Mo\u017cesz pomno\u017cy\u0107 rozpi\u0119to\u015b\u0107 szeroko\u015bci w linii, jak <code>odst\u0119py:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Strza\u0142ka bloku<\/strong><\/td>\n<td>Specjalizowane ID jednostki<\/td>\n<td>Renderuje grub\u0105, strukturaln\u0105 strza\u0142k\u0119 przej\u015bciow\u0105 wewn\u0105trz kom\u00f3rki siatki: <code>arrowId&lt;[\"Etykieta\"]&gt;(kierunek)<\/code>. Kierunki obejmuj\u0105 <code>g\u00f3ra<\/code>, <code>d\u00f3\u0142<\/code>, <code>lewo<\/code>, <code>prawo<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Z\u0142o\u017cony otw\u00f3r<\/strong><\/td>\n<td>Blok \/ Zako\u0144czenie kontenera<\/td>\n<td>Zagnie\u017ad\u017ca samodzielny, izolowany podsiatkowy uk\u0142ad bezpo\u015brednio w kom\u00f3rce nadrz\u0119dnego bloku: <code>blok:SubID ... koniec<\/code>. Podbloki mog\u0105 deklarowa\u0107 w\u0142asne niezale\u017cne limity kolumn.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Zaawansowana funkcja: jawne wymiary bloku i modyfikatory przestrzeni<\/h2>\n<p>W przypadku uk\u0142ad\u00f3w asymetrycznych mo\u017cesz przekaza\u0107 jawne metryki poziome bezpo\u015brednio do standardowych blok\u00f3w lub separator\u00f3w przestrzeni, u\u017cywaj\u0105c separatora w notacji dwukropka (<code>:szeroko\u015b\u0107<\/code>). To zmusza elementy do rozci\u0105gania si\u0119 po wielu pozycjach siatki w spos\u00f3b czysty.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOzynNzatUMAFxyjNTUp3zcwvy81LzSqKVgqtSi\/KzMxXyEtOPNh3eXJ6arVBQmlOQWVKqFKtgBdaRk5pW4pRYFK0UkFgMlE7KT67KqwTKFhckJqdaGSkUZaZnQBS4g40A2lSQmJeaoxQLAGdaLkk=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">blok\r\n  kolumny 4\r\n  wideComponent[\"Szeroki nag\u0142\u00f3wek pulpitu\"] :4\r\n  leftBar[\"Pasek boczny\"] space:2 rightBar[\"G\u0142\u00f3wny panel\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOzynNzatUMAFxyjNTUp3zcwvy81LzSqKVgqtSi\/KzMxXyEtOPNh3eXJ6arVBQmlOQWVKqFKtgBdaRk5pW4pRYFK0UkFgMlE7KT67KqwTKFhckJqdaGSkUZaZnQBS4g40A2lSQmJeaoxQLAGdaLkk=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZuoRoRz\"><img alt=\"\" class=\"alignnone size-full wp-image-967\" decoding=\"async\" height=\"82\" sizes=\"(max-width: 372px) 100vw, 372px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" width=\"372\"\/><\/p>\n<hr\/>\n<h2>Zaawansowana funkcja: typy kraw\u0119dzi, kierunki i opcje po\u0142\u0105cze\u0144<\/h2>\n<p>Po\u0142\u0105czenia wewn\u0105trz <code>blok<\/code>silnik s\u0105 dzielone na standardowe linie semantyczne i strukturalne strza\u0142ki blokowe uk\u0142adu. Standardowe linie po\u0142\u0105cze\u0144 wspieraj\u0105 okre\u015blanie jawnych ogranicze\u0144 kierunkowych, aby okre\u015bli\u0107 spos\u00f3b owijania linii wok\u00f3\u0142 element\u00f3w.<\/p>\n<h3>1. Standardowe po\u0142\u0105czenia linii<\/h3>\n<p>Po\u0142\u0105czenia blokowe u\u017cywaj\u0105 standardowych operator\u00f3w po\u0142\u0105cze\u0144 (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). Jednak mo\u017cesz kontrolowa\u0107 tras\u0119, dodaj\u0105c kierunki lub modyfikatory w nawiasach:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : Rysuje standardow\u0105 lini\u0119 kierunkow\u0105 od elementu A do elementu B.<\/li>\n<li><code>A -- x B<\/code> : Rysuje \u015bcie\u017ck\u0119 po\u0142\u0105czenia zako\u0144czon\u0105 znakiem \u201eX\u201d, wskazuj\u0105c\u0105 drog\u0119 zablokowan\u0105.<\/li>\n<li><code>A -- o B<\/code> : Rysuje \u015bcie\u017ck\u0119 po\u0142\u0105czenia zako\u0144czon\u0105 otwartym k\u00f3\u0142kiem po\u0142\u0105czeniowym.<\/li>\n<\/ul>\n<h3>2. Strza\u0142ki blokowe dynamicznego uk\u0142adu<\/h3>\n<p>Strza\u0142ki blokowe traktowane s\u0105 jako rzeczywiste sk\u0142adniki uk\u0142adu zajmuj\u0105ce rzeczywisty blok indeksu wsp\u00f3\u0142rz\u0119dnych w macierzy bud\u017cetu wierszy. U\u017cywaj\u0105 w\u0142a\u015bciwo\u015bci sk\u0142adni wi\u0119kszy ni\u017c i mniejszy ni\u017c do mapowania fizycznych \u015bcie\u017cek przep\u0142ywu:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVc8otLEsuTExVSEvMqkzOUYkHSuZkpjkVF+eU20UoBRVWpJeWJRVWJeZmpCkWlyRmlSrF2GkWZ6RklmhBz84pLc0FGeUNYeSVwswAxbiqT\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n  producer[\"Dostawca danych\"]\r\n  midArrow&lt;[\"Przetwarzanie ruchu\"]&gt;(right)\r\n  consumer[\"Konsument danych\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVc8otLEsuTExVSEvMqkzOUYkHSuZkpjkVF+eU20UoBRVWpJeWJRVWJeZmpCkWlyRmlSrF2GkWZ6RklmhBz84pLc0FGeUNYeSVwswAxbiqT\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"uiUqlGG\"><img alt=\"\" class=\"alignnone size-full wp-image-968\" decoding=\"async\" height=\"50\" sizes=\"(max-width: 477px) 100vw, 477px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" width=\"477\"\/><\/p>\n<hr\/>\n<h2>Zaawansowana funkcja: Zagnie\u017cd\u017canie macierzy podblok\u00f3w (grupowanie z\u0142o\u017cone)<\/h2>\n<p>Pojedynczy <code>block:id<\/code> otaczaj\u0105cy dzia\u0142a jako izolowane \u015brodowisko kontekstowe pude\u0142ka uk\u0142adu. Kontener grupy aplikacji mo\u017ce ustali\u0107 w\u0142asn\u0105 unikaln\u0105 liczb\u0119 kolumn poziomych wewn\u0105trz podbloku, umo\u017cliwiaj\u0105c szczelne grupowanie z\u0142o\u017conych sk\u0142adnik\u00f3w bez wp\u0142ywu na odst\u0119py globalnej siatki szablonu kana\u0142u nadrz\u0119dnego.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjDEOwjAMRXck7hDlCLCxAUPFhsTAEDG4wUBoGldOStSOvQXn4AjQe5EIEJIt+cvvv9KSrqYTITTZtnZezHJgolBAwAidkiuGGsTZUgnWgTxkIG+Zq4vaaCaPfDMa17b1ATk\/\/8L5J0IbLkruX\/cex0G00SD3XUDrDKT5WBPVGCWLcXg+ouuEccl2wqsXy+3mh0TiClnJnUndSjQMmmK6vg50xzfelEZH\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 2\r\n  rootGateway[\"Brama globalna\"]\r\n  \r\n  block:microserviceCluster\r\n    columns 3\r\n    auth[\"W\u0119ze\u0142 uwierzytelniania\"]\r\n    api[\"G\u0142\u00f3wny interfejs API\"]\r\n    worker[\"Silnik pracownika\"]\r\n  end<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjDEOwjAMRXck7hDlCLCxAUPFhsTAEDG4wUBoGldOStSOvQXn4AjQe5EIEJIt+cvvv9KSrqYTITTZtnZezHJgolBAwAidkiuGGsTZUgnWgTxkIG+Zq4vaaCaPfDMa17b1ATk\/\/8L5J0IbLkruX\/cex0G00SD3XUDrDKT5WBPVGCWLcXg+ouuEccl2wqsXy+3mh0TiClnJnUndSjQMmmK6vg50xzfelEZH\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"kcZGAdG\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-969\" decoding=\"async\" height=\"58\" loading=\"lazy\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" width=\"747\"\/><\/p>\n<hr\/>\n<h2>Szablon z rzeczywistego \u015bwiata: Wielowarstwowa infrastruktura z pami\u0119ci\u0105 podr\u0119czn\u0105<\/h2>\n<p>Ten kompleksowy szablon wielowierszowy demonstruje czyst\u0105 konfiguracj\u0119 infrastruktury produkcyjnej. Ustala uk\u0142ad siatki przetwarzania 3-kolumnowej, u\u017cywa element\u00f3w strukturalnych<code>przestrzeni<\/code>do izolacji warstwy bazy danych, mapuje grub\u0105 strza\u0142k\u0119 w d\u00f3\u0142<code>blockArrow<\/code>, i izoluje osobny kontener wewn\u0119trznej podsystemu przy u\u017cyciu zagnie\u017cd\u017conego <code>block:id ... end<\/code> z\u0142o\u017cony otwieracz.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UctqG0EQvBv8D82CQTr4YPsmgiExOZjkoMQIQYQOrdn2qndHM8s8MuweF\/wRwZ\/hq2\/W\/FdmVn7Ehty6prtqqqs3Uovm+AhAaOl3ysLF8VGGJyewZDK2h7MZLGwcfMUQqI73gnWgPFIqeyWZlJtMim9jAcvlsphOc1NqLL+gRCXIrIqxsmRAbwTv7+IjKUZoDIb9n7JPgl2xzizboqCPBs5nMNdx2N+JPtEIWtNTG4cueAhQPj3EAUoNO26M9qPRf5SSSx3UT+0dfVoV88S0XRwwyxgvtr5YX07yxPS\/v1\/M4BdZhwHivdFplm2DgK3kBkXN0MdBx0etqM68TY5zhm17Jb11ZPLbW7bnB4jebW\/I\/GZBq2IR0j9950imSJKvQxBpqOWvqmJF2TaK5JEbqOLw9BAUVRpYJflbqq2Hz\/PrA4tU+X53dLhBS6tJukCPCatObFOa1lWGbn58L6br130XaUmV1KFGqyjl1qLVAfOhrDO+cd6gTA3Jihl2KEbfY\/TP9ce7w+npJbzP4g2NzReDfwHqjd22\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n\r\n  %% Wiersz 1: Us\u0142ugi wej\u015bciowe\r\n  dnsClient((\"Klient WWW\"))\r\n  loadBalancer[\"Balanser obci\u0105\u017cenia kraw\u0119dziowy\"]\r\n  space\r\n\r\n  %% Wiersz 2: Po\u0142\u0105czenie przep\u0142ywu w d\u00f3\u0142 do mikrous\u0142ug\r\n  space\r\n  downRoute&lt;[\"Przesy\u0142anie ruchu\"]&gt;(down)\r\n  space\r\n\r\n  %% Wiersz 3: Zestaw \u015brodowiska aplikacji z\u0142o\u017conej\r\n  block:appCluster\r\n    columns 2\r\n    authService[\"Uwierzytelnianie\"]\r\n    apiEngine[\"Pracownik g\u0142\u00f3wnego interfejsu API\"]\r\n  end\r\n  space\r\n  database[(\"Baza danych PostgreSQL\")]\r\n\r\n  %% Ustan\u00f3w jasne dopasowania strukturalne linii macierzy do macierzy\r\n  loadBalancer --&gt; appCluster\r\n  appCluster --&gt; database<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UctqG0EQvBv8D82CQTr4YPsmgiExOZjkoMQIQYQOrdn2qndHM8s8MuweF\/wRwZ\/hq2\/W\/FdmVn7Ehty6prtqqqs3Uovm+AhAaOl3ysLF8VGGJyewZDK2h7MZLGwcfMUQqI73gnWgPFIqeyWZlJtMim9jAcvlsphOc1NqLL+gRCXIrIqxsmRAbwTv7+IjKUZoDIb9n7JPgl2xzizboqCPBs5nMNdx2N+JPtEIWtNTG4cueAhQPj3EAUoNO26M9qPRf5SSSx3UT+0dfVoV88S0XRwwyxgvtr5YX07yxPS\/v1\/M4BdZhwHivdFplm2DgK3kBkXN0MdBx0etqM68TY5zhm17Jb11ZPLbW7bnB4jebW\/I\/GZBq2IR0j9950imSJKvQxBpqOWvqmJF2TaK5JEbqOLw9BAUVRpYJflbqq2Hz\/PrA4tU+X53dLhBS6tJukCPCatObFOa1lWGbn58L6br130XaUmV1KFGqyjl1qLVAfOhrDO+cd6gTA3Jihl2KEbfY\/TP9ce7w+npJbzP4g2NzReDfwHqjd22\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj Mermaid w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"nAmZcPX\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-970\" decoding=\"async\" height=\"284\" loading=\"lazy\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" width=\"838\"\/><\/p>\n<hr\/>\n<h2>Typowe b\u0142\u0119dy sk\u0142adniowe i ograniczenia systemu<\/h2>\n<p>Podczas kompilowania dok\u0142adnych map macierzy siatki pami\u0119taj o tych sprawdzianach weryfikacji, aby zapobiec b\u0142\u0119dom analizy sk\u0142adni:<\/p>\n<ul>\n<li><strong>Wymuszanie bud\u017cetu kolumn:<\/strong> Dok\u0142adnie \u015bled\u017a liczb\u0119 kolumn. Je\u015bli okre\u015blisz <code>columns 3<\/code> i napiszesz 4 kolejne bloki w wierszu, czwarty blok automatycznie przejdzie do wiersza 2, co mo\u017ce naruszy\u0107 zamierzone \u015bcie\u017cki po\u0142\u0105cze\u0144 od lewej do prawej.<\/li>\n<li><strong>Kolejno\u015b\u0107 zagnie\u017cd\u017cania z\u0142o\u017conego:<\/strong> Podczas budowania wewn\u0119trznych kontener\u00f3w przy u\u017cyciu <code>block:id<\/code>, musisz zawsze zamkn\u0105\u0107 obszar podsiatki przy u\u017cyciu <code>end<\/code> s\u0142owa kluczowego w izolowanym wierszu przed zadeklarowaniem kolejnych element\u00f3w. Niezamkni\u0119cie bloku spowoduje zatrzymanie budowania diagramu.<\/li>\n<li><strong>Ograniczenia docelowego strza\u0142ki blokowej:<\/strong> W\u0142a\u015bciwo\u015b\u0107 kierunku uj\u0119ta w nawiasach po strza\u0142ce blokowej (np. <code>(up)<\/code>, <code>(down)<\/code>) musi by\u0107 ma\u0142\u0105 liter\u0105, doskonale pasuj\u0105c\u0105 do s\u0142\u00f3w kluczowych systemu. Du\u017ce litery w kierunku spowoduj\u0105 b\u0142\u0119dy przetwarzania.<\/li>\n<li><strong>Kolizje granic etykiet:<\/strong> Standardowe dekoracje kszta\u0142t\u00f3w schematu przep\u0142ywu (jak nawiasy <code>()<\/code> dla okr\u0119g\u00f3w lub klamry <code>{}<\/code> dla diament\u00f3w) s\u0105 w pe\u0142ni obs\u0142ugiwane. Upewnij si\u0119, \u017ce wszystkie etykiety tekstowe wy\u015bwietlane wewn\u0105trz kszta\u0142t\u00f3w u\u017cywaj\u0105 czystych podw\u00f3jnych cudzys\u0142ow\u00f3w, aby unikn\u0105\u0107 usuwania znak\u00f3w.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Schemat blokowy to silnie zorganizowany silnik uk\u0142adu s\u0142u\u017c\u0105cy do przedstawiania z\u0142o\u017conych architektur oprogramowania, platform sprz\u0119towych lub modeli organizacyjnych. Wprowadzony zgodnie z zasadami Mermaid.js, silnik block traktuje obszar uk\u0142adu jako absolutn\u0105 macierz matematyczn\u0105 siatki. Zapewnia dok\u0142adne zarz\u0105dzanie wyr\u00f3wnaniem kolumn, izolowanymi granicami&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2081","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sk\u0142adnia schematu blokowego Mermaid.js i przewodnik po uk\u0142adzie siatki\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/wp-content\\\/uploads\\\/sites\\\/9\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_locale":"pl_PL","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"5 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pl\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sk\u0142adnia schematu blokowego Mermaid.js i przewodnik po uk\u0142adzie siatki"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pl\/#website","url":"https:\/\/www.vpascode.com\/pl\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pl\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pl\/wp-content\/uploads\/sites\/9\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs\/2081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2081"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}