Grafico a quadranti
Dai le priorità con una matrice 2×2
Che cos’è un Grafico a quadranti?
Un grafico a quadranti posiziona gli elementi su due assi — sforzo vs impatto, urgenza vs importanza, rischio vs beneficio. È il classico strumento di prioritizzazione per prodotto, strategia e retrospettive.
I grafici a quadranti sono artefatti decisionali: l’ultima slide di un workshop di prioritizzazione, l’immagine di un memo di strategia, la retrospettiva in cui un team decide che cosa tenere. Quello che fanno bene è costringere a prendere posizione: nulla può stare «più o meno a metà» senza che si veda. Quello che nascondono è il ragionamento: due persone mettono lo stesso elemento in quadranti diversi, e il grafico registra il risultato, mai la discussione. Gli assi non portano numeri, solo le due etichette agli estremi.
Esempio dal vivo
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]Quando usarlo
Errori frequenti
Coordinate fuori dall’intervallo 0-1
Scrivere A: [3, 8] è un errore lessicale, non un punto tagliato: entrambi i valori devono stare tra 0 e 1. Assegni punteggi in decimi? Dividi per dieci prima di scrivere il grafico.
La numerazione dei quadranti inganna
quadrant-1 è in alto a destra, poi si procede in senso antiorario: quadrant-2 in alto a sinistra, quadrant-3 in basso a sinistra, quadrant-4 in basso a destra. Etichettali guardando gli angoli dell’immagine, non l’ordine in cui li leggeresti.
Un asse senza la sua freccia
x-axis Effort è valido e disegna una sola etichetta all’estremità sinistra: nessun errore, solo un grafico che nessuno sa interpretare. Scrivi x-axis Low effort --> High effort, così entrambi gli estremi hanno un nome.
Sintassi di base
quadrantChart
x-axis Low --> High
y-axis Low --> High
Item A: [0.3, 0.8]quadrantChart title Feature prioritizationIl grafico è sempre una divisione 2×2 al punto medio dei due assi. È il titolo a dire al lettore quale decisione sta registrando questa particolare immagine.
x-axis Low effort --> High effort y-axis Low impact --> High impactOgni asse prende un’etichetta di inizio e, dopo la freccia, un’etichetta di fine. Mettile entrambe: con una sola, il lettore deve indovinare in che verso corre la scala.
Public sharing: [0.3, 0.85] radius: 12, color: #4f46e5Un punto può portare raggio, riempimento e colore del bordo dopo le coordinate: quanto basta per far risaltare un elemento senza aggiungere una legenda.
classDef hot color: #ff0000, radius: 10 Realtime collab:::hot: [0.85, 0.75]classDef definisce una volta lo stile di un punto e ::: lo applica: è così che si marca un intero gruppo — elementi già impegnati, concorrenti, rischi — in modo coerente.
Domande su questo diagramma
Come posiziono gli elementi con precisione?
Ogni elemento prende coordinate [x, y] tra 0 e 1, quindi «Feature A: [0.2, 0.9]» finisce nel quadrante a basso sforzo e alto impatto.
Posso rinominare i quadranti?
Sì — da quadrant-1 a quadrant-4 accettano etichette personalizzate come «Da fare subito» o «Vittorie rapide», ed entrambi gli assi accettano etichette di inizio e fine.
Posso incollare un grafico a quadranti in Google Slides o PowerPoint?
Esporta in PNG a 2× o 4× e incollalo, oppure in SVG se lo strumento accetta i vettori, così le etichette degli assi restano nitide a qualsiasi zoom. Riesporta dopo ogni riprioritizzazione, invece di spostare i punti a mano.
Posso spostare il punto di incrocio degli assi fuori dal centro?
No. La divisione è sempre al punto medio dei due assi, quindi «alto impatto» comincia a 0.5 qualunque sia la forma dei tuoi dati. Riscala tu i punteggi prima di tracciarli, quando la soglia interessante sta altrove.
Quanti elementi ci stanno prima che le etichette si sovrappongano?
Mermaid non sposta le etichette per evitare le collisioni, quindi il tetto pratico è intorno a quindici punti, e meno quando diversi elementi condividono un angolo. Distanzia leggermente le coordinate, dividi il grafico per tema, oppure alza chartWidth per guadagnare spazio senza spostare nessun punto.
Come rendo il grafico più grande?
Metti la dimensione dentro un blocco quadrantChart nella direttiva init sulla prima riga: %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600}}}%%. Il valore predefinito è 500 per 500. Scritte fuori da quel blocco le due chiavi vengono ignorate, ed è per questo che i nomi lunghi continuano a debordare.
Grafico a quadranti o un altro tipo di diagramma?
Grafico a quadranti o grafico a torta?
Il grafico a quadranti registra dove si colloca ogni elemento su due scale, e nient’altro: tutti i punti hanno la stessa dimensione salvo che tu imposti un radius, quindi un elemento che vale dieci volte un altro gli appare identico. Quando il messaggio è la grandezza di ciascun elemento, disegna una torta.
Grafico a quadranti o percorso utente?
Entrambi assegnano punteggi, ma non alle stesse cose. Il percorso utente valuta i passaggi di un unico cammino, in ordine, con un numero ciascuno; il grafico a quadranti valuta elementi indipendenti su due scale e non ha alcun ordine. Se riordinare i tuoi elementi ne cambiasse il significato, ti serve il percorso utente.
Crea ora il tuo Grafico a quadranti
Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.
Apri Mermaid Studio