Les diagrammes d’architecture t’aident à comprendre comment ton système fonctionne. Tu peux t’en servir pour explorer la logique, suivre les données et communiquer la structure. Cursor prend en charge la génération de ces diagrammes directement avec des outils comme Mermaid, pour passer du code au visuel en quelques prompts.
Exemple de diagramme d’architecture

​
Pourquoi les diagrammes comptent

Les diagrammes clarifient comment les données circulent et comment les composants interagissent. Ils sont utiles quand tu :
  • Veux comprendre le contrôle du flux dans ton codebase
  • As besoin de retracer la traçabilité des données, de l’entrée à la sortie
  • Fais l’onboarding d’autres personnes ou documentes ton système
Ils sont aussi très utiles pour déboguer et poser de meilleures questions. Les visuels t’aident (toi et le modèle) à voir l’ensemble.

​
Deux dimensions à prendre en compte

Il y a plusieurs angles à considérer :
  • Objectif : Tu cartographies la logique, le flux de données, l’infrastructure, ou autre chose ?
  • Format : Tu veux quelque chose de rapide (comme un diagramme Mermaid) ou de plus formel (comme l’UML) ?

​
Comment formuler une requête

Commence avec un objectif clair. Voici quelques façons courantes de demander :
  • Contrôle du flux : “Montre-moi comment les requêtes vont du contrôleur à la base de données.”
  • Lignage des données : “Retrace cette variable depuis son point d’entrée jusqu’à sa destination.”
  • Structure : “Donne-moi une vue au niveau des composants de ce service.”
Tu peux préciser des points de départ et d’arrivée, ou demander à Cursor de trouver le chemin complet.

​
Travailler avec Mermaid

Mermaid est facile à prendre en main et s’affiche directement dans Markdown (avec la bonne extension). Cursor peut générer des diagrammes comme :
  • flowchart pour la logique et les séquences
  • sequenceDiagram pour les interactions
  • classDiagram pour la structure des objets
  • graph TD pour des graphes directionnels simples
Tu peux installer l’extension Mermaid pour prévisualiser les diagrammes.
  1. Va dans l’onglet Extensions
  2. Cherche Mermaid
  3. Installe
Installation de l’extension Mermaid

​
Stratégie pour les diagrammes

Commence petit. N’essaie pas de tout modéliser d’un coup.
  • Choisis une fonction, une route ou un processus
  • Demande à Cursor de diagrammer cette partie avec Mermaid
  • Une fois que tu en as quelques-uns, demande-lui de les combiner
Ça reflète le modèle C4 — tu pars d’un niveau bas (code ou composants) et tu montes vers des vues de plus haut niveau.
  1. Commence par un diagramme détaillé, de bas niveau
  2. Résume-le en une vue de niveau intermédiaire
  3. Répète jusqu’à atteindre le niveau d’abstraction que tu veux
  4. Demande à Cursor de les fusionner en un seul diagramme ou une carte du système

​
Points clés

  • Utilise des diagrammes pour comprendre les flux, la logique et les données
  • Commence avec de petits prompts et fais évoluer ton diagramme à partir de là
  • Mermaid est le format le plus simple à utiliser dans Cursor
  • Pars du bas niveau et monte en abstraction, comme dans le modèle C4
  • Cursor peut t’aider à générer, affiner et combiner des diagrammes facilement