{"id":2115,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Podstawy sk\u0142adni Mermaid.js"},"content":{"rendered":"<p>Zanim przejdziemy do konkretnych uk\u0142ad\u00f3w architektonicznych, takich jak z\u0142o\u017cone schematy przep\u0142ywu lub wykresy sekwencji czasowych, istotne jest zrozumienie podstawowych zasad, kt\u00f3re reguluj\u0105<strong>Podr\u0119cznik Mermaid<\/strong>. Mermaid opiera si\u0119 na czystym, bardzo intuicyjnym systemie notacji tekstowej. Gdy zrozumiesz, jak silnik inicjuje typ p\u0142\u00f3tna, nadaje nazwy elementom strukturalnym i kieruje strza\u0142ki kierunkowe, tworzenie dowolnego z\u0142o\u017conego uk\u0142adu systemu staje si\u0119 zupe\u0142nie naturalne.<\/p>\n<p>Ten szybki przewodnik obejmuje globalne mechanizmy sk\u0142adni strukturalnej, kt\u00f3re stosuje si\u0119 we wszystkich typach wykres\u00f3w Mermaid w \u015brodowisku VPasCode.<\/p>\n<h2>1. Obowi\u0105zkowe otoki typu wykresu<\/h2>\n<p>Ka\u017cdy blok kodu Mermaid musi zaczyna\u0107 si\u0119 od jawnej deklaracji archetypu wykresu w pierwszym wierszu. Informuje to parser VPasCode, kt\u00f3ry silnik strukturalny ma uruchomi\u0107 w oknie podgl\u0105du:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Okre\u015bla uk\u0142ad schematu przep\u0142ywu u\u0142o\u017cony od g\u00f3ry do do\u0142u.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Okre\u015bla wykres czasu dzia\u0142ania chronologicznie.<\/li>\n<li><code>classDiagram<\/code> \u2014 Okre\u015bla strukturalny szkic oprogramowania opartego na obiektach.<\/li>\n<\/ul>\n<p>W przeciwie\u0144stwie do innych silnik\u00f3w konwertuj\u0105cych tekst na wykresy, Mermaid nie wymaga ko\u0144cowych znacznik\u00f3w zamykaj\u0105cych. Parser po prostu odczytuje deklaracj\u0119 strukturaln\u0105 w pierwszym wierszu i kompiluje wszystko zagnie\u017cd\u017cone bezpo\u015brednio poni\u017cej w kontenerze bloku kodu.<\/p>\n<h2>2. Deklarowanie element\u00f3w: ID w por\u00f3wnaniu z etykietami wy\u015bwietlania<\/h2>\n<p>Podczas modelowania systemu oprogramowania tworzysz r\u00f3\u017cne elementy strukturalne, takie jak komponenty, bazy danych lub mikroserwisy. W Mermaid deklarujesz element, definiuj\u0105c kr\u00f3tkie wewn\u0119trzne ID alfanumeryczne, po kt\u00f3rym od razu nast\u0119puje styl nawias\u00f3w kontroluj\u0105cy jego kszta\u0142t wizualny, oraz przyjazn\u0105 dla u\u017cytkownika nazw\u0119 wy\u015bwietlania:<\/p>\n<pre><code>microservice_id[API przetwarzania p\u0142atno\u015bci]\r\ndb_id[(SQL transakcji u\u017cytkownika)]<\/code><\/pre>\n<p><strong>Dlaczego jest to najlepsza praktyka:<\/strong> U\u017cywanie kr\u00f3tkiego, czystego wewn\u0119trznego ID (takiego jak<code>microservice_id<\/code>) znacznie przyspiesza rysowanie linii relacji w przysz\u0142o\u015bci. Je\u015bli kiedykolwiek trzeba zmieni\u0107 etykiet\u0119 widoczn\u0105 dla klienta z \u201eAPI przetwarzania p\u0142atno\u015bci\u201d na \u201eGlobalny serwis zakupowy\u201d, wystarczy j\u0105 edytowa\u0107 tylko w jednym wierszu deklaracji, a nie aktualizowa\u0107 dziesi\u0105tek wierszy w ca\u0142ym skrypcie.<\/p>\n<h2>3. Opanowanie strza\u0142ek relacji i kierunkowego routingu<\/h2>\n<p>Po\u0142\u0105czenia mi\u0119dzy w\u0119z\u0142ami systemu rysuje si\u0119 za pomoc\u0105 kombinacji kresek (<code>-<\/code>), znak\u00f3w r\u00f3wno\u015bci (<code>=<\/code>), oraz nawias\u00f3w strza\u0142ek (<code>&gt;<\/code>). Styl Twoich linii daje Ci po\u015bredni kontrol\u0119 nad tym, jak silnik automatycznego uk\u0142adu skaluje Tw\u00f3j wykres:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> rysuje standardow\u0105 strza\u0142k\u0119 skierowan\u0105 wskazuj\u0105c\u0105 od elementu A prosto do elementu B.<\/li>\n<li><code>A --- B<\/code> rysuje p\u0142ask\u0105, niekierowan\u0105 lini\u0119 po\u0142\u0105czenia bez g\u0142\u00f3wki strza\u0142ki, idealn\u0105 do prostych powi\u0105za\u0144.<\/li>\n<li><code>A -.-&gt; B<\/code> tworzy kreskowan\u0105 lini\u0119 zale\u017cno\u015bci, kt\u00f3ra jest standardem bran\u017cowym do oznaczania asynchronicznych zale\u017cno\u015bci lub webhook\u00f3w sieciowych.<\/li>\n<li><code>A ==&gt; B<\/code> tworzy grub\u0105, pogrubion\u0105 lini\u0119 po\u0142\u0105czenia, idealn\u0105 do wyr\u00f3\u017cniania g\u0142\u00f3wnych \u015bcie\u017cek przetwarzania danych lub kluczowych po\u0142\u0105cze\u0144 infrastruktury.<\/li>\n<\/ul>\n<h2>4. Dodawanie kontekstu w linii: etykiety i komentarze kodu<\/h2>\n<p>Jasna dokumentacja bardzo du\u017co zale\u017cy na umieszczaniu odpowiedniego kontekstu wok\u00f3\u0142 Twoich linii wizualnych i skrypt\u00f3w tekstowych:<\/p>\n<h3>Etykietowanie linii po\u0142\u0105cze\u0144<\/h3>\n<p>Mo\u017cesz doda\u0107 obja\u015bniaj\u0105cy tekst bezpo\u015brednio do dowolnej linii po\u0142\u0105czenia, wstawiaj\u0105c ci\u0105g tekstowy mi\u0119dzy dwie pary my\u015blnik\u00f3w, lub dodaj\u0105c znak pionowej kreski (&#8220;<code>|Tekst|<\/code>) tu\u017c po swoim mapowaniu relacji:<\/p>\n<pre><code>client_id -- \"HTTPS POST \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |HTTPS POST \/v1\/checkout| api_id<\/code><\/pre>\n<h3>Pisanie komentarzy kodu<\/h3>\n<p>Je\u015bli chcesz zostawi\u0107 notatk\u0119 administracyjn\u0105, zas\u0142ug\u0119 projektow\u0105 lub wyja\u015bnienie architektoniczne w pliku skryptu bez rysowania pola wizualnego na p\u0142\u00f3tnie, u\u017cyj podw\u00f3jnych znak\u00f3w procentu (<code>%%<\/code>). Informuje silnik, aby ca\u0142kowicie pomin\u0105\u0142 analiz\u0119 tej linii:<\/p>\n<pre><code>%% TODO: Musimy zaktualizowa\u0107 ten pude\u0142ko graniczne, gdy zako\u0144czy si\u0119 migracja DevOps\r\n[Stary monolit] --&gt; [Nowy mikroserwis]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Zanim przejdziemy do konkretnych uk\u0142ad\u00f3w architektonicznych, takich jak z\u0142o\u017cone schematy przep\u0142ywu lub wykresy sekwencji czasowych, istotne jest zrozumienie podstawowych zasad, kt\u00f3re reguluj\u0105Podr\u0119cznik Mermaid. Mermaid opiera si\u0119 na czystym, bardzo intuicyjnym systemie notacji tekstowej. Gdy zrozumiesz, jak silnik inicjuje typ p\u0142\u00f3tna,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"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-2115","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.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\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-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\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=\"3 minuty\" \/>\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-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pl\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#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\":\"Podstawy sk\u0142adni Mermaid.js\"}]},{\"@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.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","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-syntax-basis\/","og_locale":"pl_PL","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","og_site_name":"VPasCode","twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"3 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","url":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/pl\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#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":"Podstawy sk\u0142adni Mermaid.js"}]},{"@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\/2115","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pl\/wp-json\/wp\/v2\/ld_collection?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}