Les diagrammes d’architecture vous aident à comprendre le fonctionnement de votre système. Vous pouvez les utiliser pour explorer la logique, suivre les données et communiquer la structure. Cursor prend en charge la génération de ces diagrammes directement en utilisant des outils comme Mermaid, vous permettant ainsi de passer du code au visuel en quelques invites seulement.
Exemple d'un diagramme d'architecture

​
Pourquoi les diagrammes sont importants

Les diagrammes clarifient la façon dont les données circulent et dont les composants interagissent. Ils sont utiles lorsque vous :
  • Voulez comprendre le contrôle de flux dans votre base de code
  • Devez tracer la lignée des données de l’entrée à la sortie
  • Intégrez d’autres personnes ou documentez votre système
Ils sont également excellents pour le débogage et pour poser des questions plus intelligentes. Les visuels vous aident (ainsi que le modèle) à voir la vue d’ensemble.

​
Deux dimensions à considérer

Il y a quelques angles différents à prendre en compte :
  • Objectif : Cartographiez-vous la logique, le flux de données, l’infrastructure, ou autre chose ?
  • Format : Voulez-vous quelque chose de rapide (comme un diagramme Mermaid) ou de formel (comme UML) ?

​
Comment formuler une demande

Commencez par un objectif clair. Voici quelques façons courantes de demander :
  • Contrôle de flux : “Montrez-moi comment les requêtes passent du contrôleur à la base de données.”
  • Lignage des données : “Tracez cette variable depuis son point d’entrée jusqu’à sa destination finale.”
  • Structure : “Donnez-moi une vue au niveau des composants de ce service.”
Vous pouvez inclure des points de départ et d’arrivée, ou demander à Cursor de trouver le chemin complet.

​
Travailler avec Mermaid

Mermaid est simple à apprendre 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 cartes directionnelles simples
Vous pouvez installer l’extension Mermaid pour prévisualiser les diagrammes.
  1. Allez dans l’onglet Extensions
  2. Recherchez Mermaid
  3. Installez
Installation de l'extension Mermaid

​
Stratégie de diagramme

Commencez petit. Ne visez pas à tout cartographier d’un coup.
  • Choisissez une fonction, une route ou un processus
  • Demandez à Cursor de diagrammer cette partie en utilisant Mermaid
  • Une fois que vous en avez quelques-uns, demandez-lui de les combiner
Cela reflète le modèle C4 – où vous commencez à un niveau bas (code ou composants) et remontez vers des vues d’ensemble de plus haut niveau.

​
Flux recommandé

  1. Commencez par un diagramme détaillé de bas niveau
  2. Résumez-le en une vue de niveau intermédiaire
  3. Répétez jusqu’à atteindre le niveau d’abstraction souhaité
  4. Demandez à Cursor de les fusionner en un seul diagramme ou carte système

​
Points clés

  • Utilisez des diagrammes pour comprendre le flux, la logique et les données
  • Commencez par de petites invites et développez votre diagramme à partir de là
  • Mermaid est le format le plus facile à utiliser dans Cursor
  • Commencez au niveau bas et abstraisez vers le haut, comme dans le modèle C4
  • Cursor peut vous aider à générer, affiner et combiner des diagrammes avec facilité