diff --git a/02-panoramica-del-processo.md b/02-panoramica-del-processo.md
index a79d927..cfa2532 100644
--- a/02-panoramica-del-processo.md
+++ b/02-panoramica-del-processo.md
@@ -7,19 +7,39 @@ approfondiscono.
 
 ## La sequenza completa
 
-```
-   PREPARA I DATI            RACCOGLI              GENERA E SCEGLI           RIFINISCI
-   (Configurazione)          PREFERENZE
- ┌───────────────────┐   ┌───────────────┐   ┌────────────────────┐   ┌───────────────────┐
- │ Anno scolastico   │   │ Crea campagna │   │ Configura e avvia  │   │ Personalizza a    │
- │ Scuole            │──▶│ Invita docenti│──▶│ l'ottimizzatore    │──▶│ mano (se serve)   │
- │ Aule/laboratori   │   │ Invia email   │   │                    │   │                   │
- │ Orari/campanella  │   │ Monitora le   │   │ Confronta le       │   │ Finalizza la      │
- │ Materie           │   │ risposte      │   │ versioni e i       │   │ versione scelta   │
- │ Classi + monte ore│   │               │   │ punteggi           │   │                   │
- │ Docenti           │   │               │   │                    │   │ Esporta in foglio │
- │ Distanze/viaggi   │   │               │   │ Scegli la migliore │   │ di calcolo        │
- └───────────────────┘   └───────────────┘   └────────────────────┘   └───────────────────┘
+```mermaid
+flowchart LR
+    subgraph F1["<b>Fase 1: PREPARA I DATI</b><br/>(Configurazione)"]
+        direction TB
+        A1[Anno scolastico]
+        A2[Scuole]
+        A3[Aule / laboratori]
+        A4[Orari / campanella]
+        A5[Materie]
+        A6[Classi + monte ore]
+        A7[Docenti]
+        A8[Distanze / viaggi]
+    end
+    subgraph F2["<b>Fase 2: RACCOGLI<br/>PREFERENZE</b>"]
+        direction TB
+        B1[Crea campagna]
+        B2[Invita docenti]
+        B3[Invia email]
+        B4[Monitora risposte]
+    end
+    subgraph F3["<b>Fase 3: GENERA<br/>E SCEGLI</b>"]
+        direction TB
+        C1[Configura e avvia<br/>l'ottimizzatore]
+        C2[Confronta versioni<br/>e punteggi]
+        C3[Scegli la migliore]
+    end
+    subgraph F4["<b>Fase 4: RIFINISCI</b>"]
+        direction TB
+        D1[Personalizza a mano<br/>(se serve)]
+        D2[Finalizza la<br/>versione scelta]
+        D3[Esporta in foglio<br/>di calcolo]
+    end
+    F1 --> F2 --> F3 --> F4
 ```
 
 Le quattro fasi corrispondono alle quattro parti operative di questo manuale.
diff --git a/03-primi-passi.md b/03-primi-passi.md
index 60f7599..b3e766d 100644
--- a/03-primi-passi.md
+++ b/03-primi-passi.md
@@ -30,18 +30,17 @@ Alcune indicazioni utili:
 
 Dopo l'accesso vedrai tre aree principali:
 
-```
-┌──────────────────────────────────────────────────────────────┐
-│  INTESTAZIONE:  [titolo]        [Lingua: EN/IT]   [Logout]     │
-├───────────────┬──────────────────────────────────────────────┤
-│  BARRA        │                                                │
-│  LATERALE     │            AREA CONTENUTO                      │
-│               │                                                │
-│  Configuration│   (qui compare la pagina selezionata)          │
-│   • ...       │                                                │
-│  Timetable    │                                                │
-│   • ...       │                                                │
-└───────────────┴──────────────────────────────────────────────┘
+```mermaid
+flowchart TB
+    subgraph Interface["Struttura dell'interfaccia"]
+        direction TB
+        H["<b>INTESTAZIONE</b><br/>[titolo] &nbsp; — &nbsp; [Lingua: EN/IT] &nbsp; — &nbsp; [Logout]"]
+        subgraph Body[" "]
+            direction LR
+            S["<b>BARRA LATERALE</b><br/><br/><i>Configuration</i><br/> • Academic Years<br/> • Schools<br/> • Facilities<br/> • ...<br/><br/><i>Timetable</i><br/> • Generate<br/> • Review"]
+            C["<b>AREA CONTENUTO</b><br/><br/>(qui compare la pagina selezionata)"]
+        end
+    end
 ```
 
 - **Intestazione (in alto):** contiene il selettore della **lingua** e il pulsante