From 6e8a51b21a38154b2cee4f6f598350448c5184e5 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Thu, 4 Jun 2026 23:11:31 -0400 Subject: [PATCH] docs: add Mermaid.js integration roadmap #20-24 + bump to v2.0.0-dev --- ROADMAP.md | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 6d7ad0a..bfb354a 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -1,6 +1,6 @@ # ObsiGate — Roadmap -> **Version :** 1.9.0 | **Dernière mise à jour :** 2026-06-04 +> **Version :** 2.0.0-dev | **Dernière mise à jour :** 2026-06-04 > Voir aussi [CHANGELOG.md](./CHANGELOG.md), [docs/ROADMAP.md](./docs/ROADMAP.md), [AUDIT_TECHNIQUE.md](./docs/AUDIT_TECHNIQUE_2026-05-27.md) --- @@ -140,6 +140,48 @@ --- +## 📋 Reste à faire (P1/P2) + +### 20. Mermaid.js — Initialisation et Sécurité +- **Effort** : 0.5 jour | **Impact** : 🟡 +- [ ] Installer `mermaid` via npm/yarn +- [ ] Module `mermaidConfig.js` avec `securityLevel: 'strict'` (anti-XSS) +- [ ] `startOnLoad: false` pour gestion manuelle du cycle de vie +- [ ] `fontFamily: 'inherit'` pour cohérence typographique + +### 21. Mermaid.js — Moteur de Rendu Dynamique +- **Effort** : 1 jour | **Impact** : 🟡 +- [ ] Fonction `renderMermaidBlocks(container)` — cible `` +- [ ] Validation syntaxe via `await mermaid.parse(code)` en try/catch +- [ ] Succès → `mermaid.render(uniqueId, code)` → injection SVG dans le DOM +- [ ] Échec → bloc d'erreur UI stylisé (fond rouge, message explicite) + +### 22. Mermaid.js — Templates pour tous les types +- **Effort** : 0.5 jour | **Impact** : 🟡 +- [ ] Dictionnaire `MERMAID_TEMPLATES` avec squelette valide par type +- [ ] Core : `flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram-v2`, `erDiagram`, `journey`, `gantt`, `pie`, `gitGraph`, `requirementDiagram` +- [ ] Avancés : `mindmap`, `timeline`, `quadrantChart`, `C4Context`, `C4Container`, `C4Component`, `C4Dynamic`, `C4Deployment` +- [ ] Beta : `xychart-beta`, `block-beta`, `sankey-beta` (avec commentaire) + +### 23. Mermaid.js — UX dans l'éditeur +- **Effort** : 1 jour | **Impact** : 🟡 +- [ ] Coloration syntaxique Mermaid dans l'éditeur (CodeMirror) +- [ ] Snippets : taper ````mermaid` → dropdown des types de diagrammes +- [ ] Sélection d'un type → insertion auto du template correspondant + +### 24. Mermaid.js — Thème, Export, Compatibilité Obsidian +- **Effort** : 1 jour | **Impact** : 🟡 +- [ ] `updateMermaidTheme(isDark)` → `mermaid.initialize({ theme: 'dark'|'default' })` +- [ ] Re-render automatique des blocs au changement de thème +- [ ] Bouton "Télécharger" → export SVG (ou PNG via canvas) +- [ ] Pré-processeur Obsidian : `[[lien]]` → ``, `![[img.png|100]]` → ``, `==texte==` → `` + +### 14. Tests E2E Playwright +- **Effort** : 2-3 jours | **Impact** : 🟢 +- Tests navigateur automatisés (login, navigation, recherche, sauvegarde) + +--- + ## 📋 Backlog (P3/P4 — Long terme) - **Mode hors-ligne PWA complet** : IndexedDB pour recherche offline + synchro