# Comment utiliser Mermaid.js pour les diagrammes de flux dans NoteRich – Tutorial complet La visualisation de processus complexes, d’architectures de systèmes ou de arbres de décisions peut être difficile avec uniquement du texte. **Mermaid.js** est un outil puissant basé sur JavaScript, permettant de créer des diagrammes à l’aide de définition de texte simples. Dans **NoteRich**, nous avons intégré Mermaid.js directement dans l’éditeur, vous permettant de générer des diagrammes de flux professionnels, des diagrammes de séquence et bien d’autres, sans avoir à quitter vos notes. Cet guide vous montrera tout ce que vous devez savoir pour maîtriser les diagrammes Mermaid dans NoteRich, y compris comment utiliser l’IA et l’OCR pour les générer instantanément. --- ## 🚀 Pourquoi utiliser Mermaid dans NoteRich ? * **Basé sur du texte** : Définissez vos diagrammes en utilisant du code, ce qui les rend faciles à contrôler et à modifier. * **Prévisualisation en temps réel** : Vérifiez vos modifications instantanément en tapant. * **Polyvalent** : Souscrive des diagrammes de flux, de séquence, de classe, de statut, des diagrammes de Gantt, etc. * **Assuré par l’IA et l’OCR** : Générez des diagrammes à partir de descriptions en langage naturel ou en scannant des images existantes. * **Priorité locale** : Vos définition de diagrammes sont stockées localement dans vos notes, assurant la confidentialité et l’accès hors ligne. --- ## 📝 Comment commencer : Insérer un diagramme Mermaid Il existe trois méthodes principales pour insérer un diagramme Mermaid dans NoteRich : ### Méthode 1 : La commande slash (`/`) 1. Placez votre curseur à l’endroit où vous souhaitez insérer le diagramme. 2. Tapez `/` pour ouvrir le sélecteur de composants. 3. Recherchez **"Mermaid"** ou **"Diagram"**. 4. Sélectionnez **Mermaid Diagram** dans la liste. ### Méthode 2 : La barre d’outils 1. Cliquez sur le bouton **Insert** dans la barre d’outils. 2. Naviguez vers la section **Visualisation** ou **Diagrammes**. 3. Cliquez sur **Mermaid**. ### Méthode 3 : L’assistant d’IA 1. Ouvrez l’**Assistant d’IA** (via `/ai` ou la barre d’outils). 2. Décrivez le diagramme que vous souhaitez (par exemple, “Créez un diagramme de flux pour un processus de connexion au utilisateur”). 3. L’IA générera le code Mermaid pour vous, que vous pourrez ensuite insérer directement dans votre note. Une fenêtre de configuration apparaîtra après l’insertion, avec un éditeur de code et une fenêtre de prévisualisation en temps réel. --- ## 🛠️ L’interface de l’éditeur Mermaid L’éditeur Mermaid dans NoteRich est conçu pour être efficace : * **Zone de code** : Une zone de texte monospaced où vous écrivez votre syntaxe Mermaid. * **Prévisualisation en temps réel** : Un rendu en temps réel de votre diagramme. Si il y a une erreur de syntaxe, une fenêtre d’erreur apparaîtra pour vous aider à débuguer. * **Icone d’aide** : Cliquez sur l’icône `?` à côté de “Code de diagramme” pour ouvrir la documentation officielle [Mermaid.js](https://mermaid.js.org/intro/) pour des références de syntaxe détaillées. * **Bouton de confirmation** : Sauvegardez votre diagramme et insérez-le dans votre note. > **Conseil** : Vous pouvez double-cliquer sur n’importe quel diagramme Mermaid existant dans votre note pour réouvrir l’éditeur et effectuer des modifications. --- ## 📊 Syntaxe de base de diagrammes de flux Les diagrammes de flux sont le cas d’utilisation le plus courant pour Mermaid. Voici comment les construire. ### 1. Définir la direction Commencez par définir la direction du flux : * `graph TD` : De haut en bas * `graph LR` : De gauche à droite * `graph BT` : De bas en haut * `graph RL` : De droite à gauche ### 2. Ajouter des nœuds Les nœuds sont définis par un ID et une étiquette. ```mermaid graph TD A[Start] --> B[Process] B --> C{Decision} C -->|Yes| D[End] C -->|No| B ``` * `[Text]` : Nœud en rectangle. * `(Text)` : Nœud en rectangle arrondi. * `((Text))` : Nœud en cercle. * `{Text}` : Nœud en rondin (Décision). * `[[Text]]` : Sub-routine. ### 3. Connecter les nœuds * `-->` : Flèche solide. * `-.->` : Flèche pointillée. * `==>` : Flèche épaisse. * `-- Text -->` : Flèche avec une étiquette. --- ## 🤖 Génération de diagrammes alimentée par l’IA Vous ne voulez pas écrire du code ? Laissez l’IA de NoteRich le faire pour vous. 1. Ouvrez l’**Assistant d’IA**. 2. Tapez une demande comme : *“Générez un diagramme de séquence Mermaid pour un client qui passe une commande en ligne.”* 3. L’IA vous retournera un bloc de code comme celui-ci : ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Place Order Website->>Database: Check Inventory Database-->>Website: Inventory Available Website-->>Customer: Order Confirmed ``` 4. Copiez le code ou utilisez le bouton **Insert** si disponible dans votre interface d’IA pour l’ajouter à votre note. --- ## 📸 OCR : Scanner de diagrammes manuscrits ou imprimés Avez-vous une photo de tableau noir ou un diagramme de flux imprimé ? Le **Scanner de notes de NoteRich (OCR)** peut le convertir en code Mermaid éditable. 1. Ouvrez l’**Assistant d’IA** et sélectionnez **Scanner de notes (OCR)**. 2. Téléchargez une image de votre diagramme manuscrit ou imprimé. 3. Dans la demande, spécifiez : *“Convertissez cette image en code de diagramme Mermaid.js.”* 4. L’IA analysera la structure de l’image et générera la syntaxe Mermaid correspondante. 5. Recherchez le code généré dans l’éditeur et ajustez tout éventuellement de mauvaise reconnaissance. > **Remarque** : Pour des résultats optimaux, assurez-vous que l’image est claire et que le texte est lisible. Les dessins manuscrits complexes pourraient nécessiter quelques ajustements manuels après la conversion. --- ## 🎨 Fonctionnalités avancées ### Stylisation des nœuds Vous pouvez personnaliser l’apparence de certains nœuds en utilisant des classes CSS ou des styles en ligne. ```mermaid graph LR A[Start] --> B[Process] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgraph Groupez des nœuds liés pour une meilleure organisation. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### Diagrammes de séquence Mermaid n’est pas seulement pour les diagrammes de flux. Vous pouvez également créer des diagrammes de séquence pour visualiser les interactions entre systèmes. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: Editer la note NoteRich->>Server: Enregistrer les données Server-->>NoteRich: Confirmer l’enregistrement NoteRich-->>User: Mettre à jour l’interface ``` --- ## 💡 Conseils pour les utilisateurs de NoteRich 1. **Échapper aux caractères spéciaux** : Si votre texte de nœud contient des caractères spéciaux comme `[]` ou `()`, enveloppez le texte dans des guillemets. ```mermaid graph TD A["Node avec [brackets]"] --> B["Node avec (parentheses)] ``` 2. **Copier en image** : Une fois que votre diagramme est rendu, cliquez dessus pour afficher la barre d’outils flottante. Utilisez le bouton **Copier en image** pour coller le diagramme dans d’autres applications comme Slack, Notion ou par e-mail. 3. **Télécharger en SVG** : Les utilisateurs avancés peuvent télécharger le diagramme en fichier SVG de haute qualité pour utilisation dans des présentations ou publications. --- ## ❓ Réparation des problèmes * **Le diagramme ne s’affiche pas ?** Vérifiez la fenêtre d’erreur dans la fenêtre de prévisualisation. Les problèmes courants incluent l’absence de crochets de fin `]` ou une syntaxe de flèche incorrecte. * **Erreurs de syntaxe ?** Assurez-vous d’utiliser la syntaxe correcte de Mermaid.js. NoteRich utilise la version stable la plus récente de Mermaid.js. Consultez les [documents officiels](https://mermaid.js.org/intro/) si vous n’êtes pas sûr. * **Précision de l’OCR ?** Si le résultat de l’OCR n’est pas parfait, utilisez l’assistant d’IA pour affiner le code. Vous pouvez coller le résultat approximatif de l’OCR et demander à l’IA de “Corriger la syntaxe Mermaid”. --- ## 🏁 Conclusion Mermaid.js dans NoteRich transforme la manière dont vous documentez les processus et les systèmes. En conservant vos diagrammes en code, vous assurez qu’ils restent toujours à jour, faciles à modifier et intégrés parfaitement à votre base de connaissances. Avec la génération par l’IA et l’OCR, créer des visualisations complexes est désormais beaucoup plus simple. Commencez à visualiser vos idées dès aujourd’hui ! ---