Coflow

Comment ça marche

Trois vues du même projet : partir de ce qui s’exécute, prendre du recul sur le système, puis descendre dans le code.

1. 1

   Depuis main

   Partez de là où le programme démarre : le fichier qui lance tout. Chaque route, tâche et handler indique ce qui le déclenche, et en sélectionner un éclaire tout le chemin main → route → handler → base de données.

   

2. 2

   Le système

   Prenez du recul sur l’architecture : applications, passerelle, services, workers, bases de données, files et services externes, lus depuis docker-compose, nginx, les frontends et les routes, avec chaque connexion étiquetée.

   

3. 3

   Le code

   Double-cliquez pour entrer : un bloc, un package, un module, une classe, puis une fonction dessinée ligne par ligne comme un organigramme.

   

Captures d’écran

Chaque capture suit le thème clair ou sombre de cette page, comme Coflow suit celui de VS Code.

Fonctionnalités

• Vue SystèmeNouveau en 0.7

  Un schéma d’architecture du projet : applications, passerelle, services et workers, bases de données, caches, files et services tiers, en niveaux, avec technologies, ports et connexions étiquetées (REST · 58 endpoints, SQL · 37 tables).

• Partir de mainNouveau en 0.7

  Le programme depuis son point d’entrée : démarrage, middlewares, routeurs, routes, handlers et les stockages qu’ils atteignent, chacun avec son déclencheur (verbe et chemin HTTP, cron, file, CLI).

• Mode focusNouveau en 0.7

  Survolez ou cliquez une boîte pour voir comment elle est reliée. Le panneau de détails liste ses connexions entrantes et sortantes, chacune ouvrant les routes, tables ou lignes exactes.

• Une carte du code zoomable

  Double-cliquez sur une boîte pour entrer, et continuez : bloc, package, module, classe, fonction. Chaque niveau ne montre que ce qu’il contient.

• Chaque fonction en organigramme

  Le corps entier d’une fonction, ligne par ligne, dans un langage visuel fixe où chaque instruction a un symbole.

• Rejouer une vraie exécution

  Enregistrez un script ou un test, puis rejouez-le sur la carte avec la pile d’appels, les vraies valeurs des arguments et la sortie du programme.

• Trouver ce qui ne s’exécute jamais

  Code mort, requêtes vers des routes absentes et clés de configuration jamais lues, dans l’Explorateur et en avertissements dans l’éditeur.

• Options d’affichage et disposition à la main

  Choisissez ce que la carte montre, puis placez les boîtes à la main. La disposition est enregistrée dans un fichier que vous pouvez committer avec le code.

Démarrer en une minute

1. Installer

   Cherchez Coflow dans la vue Extensions, ou installez-le depuis le VS Code Marketplace ou Open VSX.

2. Ouvrir un projet

   Ouvrez un dossier contenant du code Python et faites-lui confiance quand VS Code le demande.

3. Ouvrir la carte

   Appuyez sur Ctrl+Alt+M (Cmd+Alt+M sur macOS), ou cliquez sur l’icône de carte dans la barre de titre de l’éditeur.

4. Entrer

   Double-cliquez sur une boîte pour y entrer, et appuyez sur Esc pour remonter d’un niveau.

Questions

Nouveautés

1. 0.7.0Prochaine version

   • Vue Système : l’architecture du projet à partir de docker-compose, nginx, des frontends et des routes
   • Vue Depuis main : l’exploration part du fichier qui lance tout, avec les déclencheurs et les chemins complets
   • Mode focus : les connexions entrantes et sortantes de n’importe quelle boîte

2. 0.6.021 oct. 2026

   • Menu Options d’affichage : choisir ce que montre la carte
   • Disposer la carte à la main : glisser, aimanter, annuler, et un fichier de disposition à committer
   • Un nouveau look plus calme et des cartes mieux organisées

3. 0.5.021 oct. 2026

   • Renommé de Code Flow Map en Coflow (identifiant benisalla.coflow)

Journal des modifications complet sur le VS Code Marketplace →