{"id":2105,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/docs\/uncategorized\/mermaid-js-quadrant-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-quadrant-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pl\/docs\/vpascode-docs\/mermaid-js-quadrant-syntax-guide\/","title":{"rendered":"Przewodnik po sk\u0142adni wykresu \u0107wiartkowego Mermaid.js"},"content":{"rendered":"

Co to jest wykres \u0107wiartkowy?<\/h2>\n

Wykres \u0107wiartkowyto narz\u0119dzie strategicznej wizualizacji u\u017cywane do kategoryzowania element\u00f3w w czterech r\u00f3\u017cnych strefach na podstawie dw\u00f3ch ci\u0105g\u0142ych zmiennych (np. Wysi\u0142ek vs. Skuteczno\u015b\u0107, lub Wa\u017cno\u015b\u0107 vs. Pilno\u015b\u0107). Umieszczaj\u0105c punkty danych na p\u0142aszczy\u017anie wsp\u00f3\u0142rz\u0119dnych 2D podzielonej osiami X i Y, mo\u017cesz jasno rozr\u00f3\u017cni\u0107 wysokie priorytety \u201eszybkie zwyci\u0119stwa\u201d od niskich priorytet\u00f3w \u201erozpraszaj\u0105cych\u201d lub d\u0142ugoterminowych \u201estrategicznych zak\u0142ad\u00f3w.\u201d<\/strong>to narz\u0119dzie strategicznej wizualizacji u\u017cywane do kategoryzowania element\u00f3w w czterech r\u00f3\u017cnych strefach na podstawie dw\u00f3ch ci\u0105g\u0142ych zmiennych (np. Wysi\u0142ek vs. Skuteczno\u015b\u0107, lub Wa\u017cno\u015b\u0107 vs. Pilno\u015b\u0107). Umieszczaj\u0105c punkty danych na p\u0142aszczy\u017anie wsp\u00f3\u0142rz\u0119dnych 2D podzielonej osiami X i Y, mo\u017cesz jasno rozr\u00f3\u017cni\u0107 wysokie priorytety \u201eszybkie zwyci\u0119stwa\u201d od niskich priorytet\u00f3w \u201erozpraszaj\u0105cych\u201d lub d\u0142ugoterminowych \u201estrategicznych zak\u0142ad\u00f3w.\u201d<\/p>\n

Za pomoc\u0105 Mermaid.js<\/strong>, mo\u017cesz zdefiniowa\u0107 swoje \u0107wiartki, tytu\u0142y osi i po\u0142o\u017cenie punkt\u00f3w danych za pomoc\u0105 prostego bloku deklaratywnego, umo\u017cliwiaj\u0105c Ci natychmiastowe tworzenie profesjonalnych macierzy decyzyjnych.<\/p>\n

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

Aby stworzy\u0107 poprawny, pe\u0142ni dzia\u0142aj\u0105cy wykres \u0107wiartkowy w Mermaid, musisz opanowa\u0107 uk\u0142ad wsp\u00f3\u0142rz\u0119dnych, etykietowanie osi oraz umieszczanie punkt\u00f3w danych.<\/p>\n

1. Inicjowanie p\u0142\u00f3tna \u0107wiartkowego<\/h3>\n

Inicjujesz p\u0142\u00f3tno wykresu \u0107wiartkowego w pierwszym wierszu za pomoc\u0105 s\u0142owa kluczowego quadrantChart<\/code>S\u0142owo kluczowe. Nast\u0119pnie definiujesz etykiety dla czterech \u0107wiartek oraz tytu\u0142y osi X i Y.<\/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 
quadrantChart\r\n    tytu\u0142 Macierz priorytetyzacji projekt\u00f3w\r\n    o\u015b-x \"Ma\u0142y wysi\u0142ek\" --> \"Du\u017cy wysi\u0142ek\"\r\n    o\u015b-y \"Ma\u0142y wp\u0142yw\" --> \"Du\u017cy wp\u0142yw\"\r\n    \u0107wiartka-1 \"Strategiczne zak\u0142ady\"\r\n    \u0107wiartka-2 \"Szybkie zwyci\u0119stwa\"\r\n    \u0107wiartka-3 \"Rozpraszanie\"\r\n    \u0107wiartka-4 \"Du\u017ce projekty\"<\/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. Umieszczanie punkt\u00f3w danych<\/h3>\n
Dodajesz elementy do wykresu, podaj\u0105c ich nazw\u0119 wy\u015bwietlania, a nast\u0119pnie wsp\u00f3\u0142rz\u0119dne X i Y (normalizowane mi\u0119dzy 0 a 1).<\/p>\n