docs: add Mermaid UX features #25-29 + clean duplicate #14

ROADMAP.md

@@ -105,10 +105,6 @@
 
 ## 📋 Reste à faire (P2/P3)
 
-### 14. Tests E2E Playwright
-- **Effort** : 2-3 jours | **Impact** : 🟢
-- Tests navigateur automatisés (login, navigation, recherche, sauvegarde)
-
 ### ✅ 15. Visualisation backup dans le gestionnaire — FAIT
 - **Effort** : 0.5 jour | **Impact** : 🟡
 - [x] Clic sur un backup → panneau latéral avec aperçu du contenu (limité à 100 Ko)
@@ -176,9 +172,36 @@
 - [ ] Bouton "Télécharger" → export SVG (ou PNG via canvas)
 - [ ] Pré-processeur Obsidian : `[[lien]]` → `<a>`, `![[img.png|100]]` → `<img>`, `==texte==` → `<mark>`
 
+### 25. Mermaid.js — Rendu inline dans le viewer
+- **Effort** : 0.5 jour | **Impact** : 🟡
+- [ ] Les blocs ````mermaid` dans la vue de lecture sont rendus en SVG
+- [ ] Appel a `renderMermaidBlocks()` apres le rendu Markdown -> HTML
+
+### 26. Mermaid.js — Live preview dans l'editeur
+- **Effort** : 0.5 jour | **Impact** : 🟡
+- [ ] Panneau de previsualisation avec debounce 500ms
+- [ ] Indicateur d'erreur en temps reel (rouge si syntaxe invalide)
+
+### 27. Mermaid.js — Zoom et Pan
+- **Effort** : 0.5 jour | **Impact** : 🟢
+- [ ] Zoom molette (Ctrl+molette) sur les diagrammes
+- [ ] Drag pour naviguer dans les grands diagrammes
+- [ ] Bouton "Reset zoom"
+
+### 28. Mermaid.js — Mode plein ecran
+- **Effort** : 0.3 jour | **Impact** : 🟢
+- [ ] Bouton fullscreen (comme la vue graphe existante)
+- [ ] Touche Echap pour quitter, fond sombre
+
+### 29. Mermaid.js — Mode focus (apercu agrandi)
+- **Effort** : 0.3 jour | **Impact** : 🟡
+- [ ] Clic sur un diagramme -> panneau lateral ou modal
+- [ ] Le reste du document reste visible
+- [ ] Bouton pour basculer entre focus et vue inline
+
 ### 14. Tests E2E Playwright
 - **Effort** : 2-3 jours | **Impact** : 🟢
-- Tests navigateur automatisés (login, navigation, recherche, sauvegarde)
+- Tests navigateur automatises (login, navigation, recherche, sauvegarde)
 
 ---