🎯 Mermaid

Wykres ćwiartkowy

Priorytetyzuj za pomocą macierzy 2×2

Otwórz ten przykład w edytorze Wygeneruj własny z AI

Czym jest Wykres ćwiartkowy?

Wykres ćwiartkowy umieszcza elementy na dwóch osiach — wysiłek vs wpływ, pilność vs ważność, ryzyko vs zysk. To klasyczne narzędzie priorytetyzacji dla produktu, strategii i retrospektyw.

Wykresy ćwiartkowe to artefakty decyzyjne: ostatni slajd warsztatu priorytetyzacyjnego, obrazek w notatce strategicznej, retrospektywa, na której zespół sortuje, co zostawić. Dobrze wymuszają zajęcie stanowiska — nic nie może leżeć „gdzieś pośrodku” tak, żeby nie było tego widać. Ukrywają natomiast uzasadnienie: dwie osoby umieszczą ten sam element w różnych ćwiartkach, a wykres zapisze wynik, nigdy spór. Osie nie niosą żadnych liczb, tylko dwie etykiety krańcowe.

Żywy przykład

Kod Mermaid

quadrantChart
    title Feature prioritization
    x-axis Low effort --> High effort
    y-axis Low impact --> High impact
    quadrant-1 Plan carefully
    quadrant-2 Do first
    quadrant-3 Skip
    quadrant-4 Quick wins
    Public sharing: [0.3, 0.85]
    Realtime collab: [0.85, 0.75]
    Dark mode: [0.2, 0.4]

Żywy przykład

Kiedy go używać

Priorytetyzacja funkcji według wysiłku i wpływu

Budowanie macierzy Eisenhowera do planowania

Pozycjonowanie konkurentów lub ryzyk na osiach strategicznych

Częste błędy

Współrzędne spoza zakresu 0–1

Zapis A: [3, 8] to błąd leksykalny, a nie przycięty punkt: obie wartości muszą mieścić się między 0 a 1. Oceniasz elementy w skali dziesięciopunktowej? Podziel przez dziesięć, zanim napiszesz wykres.

Numery ćwiartek to nie kolejność czytania

quadrant-1 to prawy górny róg, a dalej przeciwnie do ruchu wskazówek zegara: quadrant-2 lewy górny, quadrant-3 lewy dolny, quadrant-4 prawy dolny. Opisuj je od rogów obrazka, nie w kolejności czytania.

Oś bez strzałki

Zapis x-axis Effort jest poprawny i rysuje jedną etykietę przy lewym końcu — bez błędu, po prostu wykres, którego nikt nie zinterpretuje. Napisz x-axis Low effort --> High effort, żeby oba krańce miały nazwy.

Podstawowa składnia

.mmd

quadrantChart
    x-axis Low --> High
    y-axis Low --> High
    Item A: [0.3, 0.8]

quadrantChart title Feature prioritization
Wykres to zawsze podział 2×2 w punkcie środkowym obu osi. To tytuł mówi czytelnikowi, którą decyzję zapisuje ten konkretny obrazek.
x-axis Low effort --> High effort y-axis Low impact --> High impact
Każda oś przyjmuje etykietę początku i, po strzałce, etykietę końca. Podawaj obie: przy jednej etykiecie czytelnik musi zgadywać, w którą stronę rośnie skala.
Public sharing: [0.3, 0.85] radius: 12, color: #4f46e5
Punkt może nieść po współrzędnych własny promień, wypełnienie i kolor obrysu — tyle wystarczy, by wyróżnić jeden element bez dokładania legendy.
classDef hot color: #ff0000, radius: 10 Realtime collab:::hot: [0.85, 0.75]
classDef nazywa styl punktu raz, a ::: go stosuje, i tak właśnie spójnie oznacza się całą grupę — elementy zatwierdzone, konkurentów albo ryzyka.

Pytania o ten diagram

Jak precyzyjnie rozmieszczać elementy?

Każdy element przyjmuje współrzędne [x, y] z zakresu 0–1, więc „Feature A: [0.2, 0.9]” trafia do ćwiartki niskiego wysiłku i wysokiego wpływu.

Czy mogę zmienić nazwy ćwiartek?

Tak — quadrant-1 do quadrant-4 przyjmują własne etykiety, np. „Zrób najpierw” lub „Szybkie zwycięstwa”, a obie osie mają etykiety początku i końca.

Czy mogę wkleić wykres ćwiartkowy do Google Slides albo PowerPointa?

Wyeksportuj PNG w 2× albo 4× i wklej, albo SVG, jeśli narzędzie przyjmuje wektory — etykiety osi zostaną wtedy ostre przy każdym powiększeniu. Po każdej repriorytetyzacji eksportuj ponownie, zamiast przesuwać punkty ręcznie.

Czy mogę przesunąć punkt przecięcia osi poza środek?

Nie. Podział zawsze wypada w punkcie środkowym obu osi, więc „wysoki wpływ” zaczyna się od 0.5 niezależnie od tego, jak wyglądają Twoje dane. Gdy interesujący próg leży gdzie indziej, przeskaluj własne oceny przed naniesieniem.

Ile elementów zmieści się, zanim etykiety zaczną na siebie nachodzić?

Mermaid nie przesuwa etykiet, żeby uniknąć kolizji, więc praktyczny sufit to około piętnastu punktów, a mniej, gdy kilka dzieli ten sam róg. Lekko rozsuń współrzędne, podziel wykres tematycznie albo zwiększ chartWidth, żeby zyskać miejsce bez przesuwania choćby jednego punktu.

Jak powiększyć wykres?

Wpisz rozmiar w bloku quadrantChart wewnątrz dyrektywy init w pierwszej linii: %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600}}}%%. Domyślnie jest 500 na 500. Poza tym blokiem oba klucze są ignorowane — dlatego długie nazwy elementów nadal wychodzą poza wykres.

Wykres ćwiartkowy czy inny typ diagramu?

Wykres ćwiartkowy czy wykres kołowy?

Wykres ćwiartkowy zapisuje wyłącznie to, gdzie każdy element leży względem dwóch skal: bez ustawionego promienia wszystkie punkty mają tę samą wielkość, więc element wart dziesięć razy więcej wygląda identycznie jak sąsiedni. Gdy komunikatem jest wielkość elementów, narysuj wykres kołowy.

Wykres ćwiartkowy czy podróż użytkownika?

Oba coś oceniają, ale nie to samo. Podróż ocenia kolejne kroki jednej ścieżki, po jednej liczbie na krok; ćwiartki oceniają niezależne elementy na dwóch skalach i nie mają żadnej kolejności. Jeśli przestawienie elementów zmieniłoby ich sens, potrzebujesz podróży.

Poznaj pozostałe typy diagramów

🔀 Schemat blokowy 💬 Diagram sekwencji 🧩 Diagram klas 🗄️ Diagram związków encji 🔄 Diagram stanów 📅 Wykres Gantta 🥧 Wykres kołowy 🧠 Mapa myśli 🌿 Graf Git 🕰️ Oś czasu 🚶 Podróż użytkownika

Stwórz swój Wykres ćwiartkowy już teraz

Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.

Otwórz Mermaid Studio