Welcome to FlowZap dear Business Process Maniacs!

FlowZap dévoile le nouveau .fz : Diagrams as Code pour les Diagrammes de Séquence et les Workflows IA-Native

20/11/2025

Tags: FlowZap Code, .fz, Diagrams as Code, Séquence, IA

Jules Kovac

Jules Kovac

Business Analyst, Founder

FlowZap dévoile le nouveau .fz : Diagrams as Code pour les Diagrammes de Séquence et les Workflows IA-Native

FlowZap introduit trois capacités étroitement liées : un nouveau format de fichier .fz, des actions Sauvegarder en .fz et Charger un fichier .fz dans l'éditeur de diagrammes, et un fichier flowzap-code-guidelines.md prêt pour les LLM à placer dans votre dossier /docs/. Ensemble, ils transforment FlowZap en une véritable plateforme "diagrams as code" pour les diagrammes de séquence—particulièrement pour les développeurs utilisant des outils de codage IA comme Cursor, Windsurf, Warp ou Google AI Studio.

Tout le rendu se fait toujours dans l'application web FlowZap : les fichiers .fz contiennent uniquement du texte FlowZap Code et sont visualisés lorsque vous les chargez sur flowzap.xyz.

Ce que signifie vraiment "Diagrams as Code"

À la base, diagrams as code signifie que vous décrivez un diagramme sous forme de texte, stockez ce texte dans le contrôle de version (généralement Git), et utilisez des outils pour rendre le diagramme visuel à la demande. Au lieu de dessiner manuellement des boîtes et des flèches dans une interface graphique, vous :

  • Écrivez les définitions de diagrammes sous forme de fichiers texte simples dans votre dépôt.
  • Les commitez et les révisez comme n'importe quel autre fichier source.
  • Régénérez le diagramme visuel à tout moment à partir de ce texte.

Cette approche garde les diagrammes synchronisés avec la base de code, rend les modifications révisables via des pull requests, et s'intègre naturellement aux pratiques docs-as-code. Le format .fz de FlowZap et le langage FlowZap Code sont conçus spécifiquement pour apporter ces avantages aux workflows et aux diagrammes de séquence.

Le format de fichier .fz : Diagrammes de Séquence Text-First

Le nouveau format .fz est un fichier texte brut en UTF-8 qui contient uniquement du FlowZap Code—aucune image intégrée ni donnée binaire. Un fichier .fz est la source unique de vérité pour un diagramme ; FlowZap le lit et rend à la fois les vues workflow et séquence à partir du même texte.

Caractéristiques clés :

  • Texte brut : Facile à éditer dans n'importe quel éditeur (VS Code, Cursor, Windsurf, etc.), facile à comparer dans Git.
  • Un diagramme par fichier : Chaque .fz décrit un diagramme, généralement stocké sous /docs/.
  • IDs de nœuds globaux : n1, n2, … sont uniques à travers tous les couloirs pour que le moteur de diagramme puisse mapper les étapes sans ambiguïté.
  • Syntaxe stricte mais simple : Les couloirs, nœuds, arêtes et boucles sont écrits dans un DSL petit et cohérent, facile à suivre pour les LLM.

Un petit exemple :

User { # User
n1: circle label:"Start"
n2: rectangle label:"Submit"
n1.handle(right) -> n2.handle(left)
}
App { # App
n3: rectangle label:"Process"
n4: circle label:"Done"
n2.handle(bottom) -> App.n3.handle(top) [label="Send"]
n3.handle(right) -> n4.handle(left)
}

Pour rendre cela, vous chargez le fichier .fz dans FlowZap ; l'application gère la mise en page et la visualisation.

Sauvegarder en .fz et Charger .fz dans FlowZap

Pour rendre cela pratique, l'interface de diagramme de FlowZap expose désormais deux actions principales :

  • Sauvegarder ce FlowZap Code en fichier .fz Depuis n'importe quel diagramme, vous pouvez exporter le FlowZap Code sous-jacent sous forme de fichier texte .fz. Le modèle typique est de l'enregistrer dans un dossier /docs/ ou /architecture/ de votre projet pour qu'il puisse être versionné.
  • Charger un fichier .fz Dans l'éditeur, vous pouvez charger un fichier .fz depuis votre machine dans FlowZap, et il rendra le diagramme correspondant. La seule exigence est que le fichier contienne du FlowZap Code valide.

Quelques clarifications importantes :

  • FlowZap ne scanne pas directement vos dépôts GitHub ou GitLab.
  • Vous, le développeur, contrôlez les fichiers .fz via votre éditeur et Git ; FlowZap lit le fichier .fz que vous choisissez de charger.
  • Tout fichier .fz que vous générez avec un LLM, commitez, et téléchargez plus tard peut être chargé dans FlowZap pour visualisation et édition ultérieure.

Cela garde l'architecture simple : Git reste votre source de vérité ; FlowZap reste votre moteur visuel.

flowzap-code-guidelines.md : Un Guide de Syntaxe Prêt pour LLM

Pour rendre le .fz pratique dans les environnements de codage orientés IA, FlowZap fournit un guide officiel optimisé pour les LLM à :

https://github.com/flowzap-xyz/code/blob/main/flowzap-code-guidelines.md

L'idée est simple :

  • Vous copiez ce fichier dans le dossier /docs/ de votre projet.
  • Dans des outils comme Cursor, Windsurf, Warp ou Google AI Studio, vous promptez votre LLM avec quelque chose comme : “Référez-vous à docs/flowzap-code-guidelines.md et produisez UNIQUEMENT du FlowZap Code pour le flux d'authentification.”
  • Le LLM utilise le guide comme autorité de style et de syntaxe et génère du FlowZap Code valide, que vous sauvegardez sous auth.fz.

Le fichier de directives inclut :

  • Une description précise de la syntaxe FlowZap Code (couloirs, nœuds, arêtes, boucles).
  • Des exemples clairs À faire / À ne pas faire (par ex., label:"Texte" pour les nœuds vs. [label="Texte"] pour les arêtes).
  • Des modèles minimaux pour les flux à couloir unique, les interactions multi-couloirs, les décisions, les boucles et les boîtes de tâches.
  • Des conseils de prompting pour que les humains puissent guider les LLM vers des résultats corrects.

Parce que la syntaxe est petite et cohérente, les LLM peuvent atteindre une haute précision avec juste ce fichier comme contexte.

Comment le Workflow de FlowZap Correspond aux Meilleures Pratiques "Diagrams as Code"

Le workflow .fz de FlowZap s'aligne avec les modèles généralement acceptés de diagrams-as-code :

  1. Texte dans le dépôt, visuels dans l'outil Les fichiers .fz vivent sous /docs/ ou similaire dans votre dépôt Git ; ce n'est que du texte. Vous les éditez comme partie de votre base de code et utilisez FlowZap comme le moteur de rendu spécialisé.
  2. Diagrammes versionnés Parce que le .fz est du texte brut, chaque modification de vos diagrammes est un changement Git :
    • Vous pouvez réviser les diffs sur les pull requests.
    • Vous pouvez créer des branches, fusionner et annuler les modifications de diagrammes aux côtés du code.
    • Vous pouvez voir exactement comment vos flux d'authentification ou de paiement ont évolué au fil du temps.
  3. Alignement docs-as-code Les équipes utilisant déjà docs-as-code (MkDocs, Docusaurus, Sphinx, etc.) peuvent traiter le .fz comme n'importe quel autre artefact source dans /docs/. Avec le temps, vous pouvez scripter des exports ou des captures d'écran si vous voulez des images statiques dans vos docs HTML.
  4. Création assistée par IA Au lieu d'écrire chaque ligne de FlowZap Code à la main, vous promptez votre LLM, qui lit flowzap-code-guidelines.md et génère les fichiers .fz pour vous. C'est la boucle "vibe coding" :
    • Décrivez le flux en langage naturel.
    • Obtenez du FlowZap Code en retour.
    • Sauvegardez en .fz et chargez dans FlowZap.
  5. Source unique de vérité pour les deux vues Parce que FlowZap peut montrer à la fois une vue workflow et une vue séquence à partir du même FlowZap Code, vous évitez de dupliquer les diagrammes. Un fichier .fz devient à la fois une carte de processus métier et un diagramme d'interaction technique.

Exemple : Du Prompt au Diagramme

Voici à quoi ressemble le workflow pour un développeur typique :

  1. Déposez les directives dans votre dépôt Copiez flowzap-code-guidelines.md dans /docs/.
  2. Utilisez votre assistant de codage IA Dans Cursor ou Windsurf ou autre, exécutez un prompt comme : “Référez-vous à docs/flowzap-code-guidelines.md et produisez UNIQUEMENT du FlowZap Code pour un flux de connexion utilisateur : L'utilisateur entre ses identifiants, l'App valide, le Serveur vérifie la DB, succès ou erreur avec jusqu'à 3 tentatives.”
  3. Créez le fichier .fz Sauvegardez la réponse du LLM sous docs/authentication.fz et commitez-le dans votre dépôt.
  4. Rendez-le dans FlowZap Ouvrez FlowZap dans le navigateur, cliquez sur Charger un fichier .fz, choisissez authentication.fz, et voyez les vues workflow et séquence générées à partir de votre texte.

Un changement de code ultérieur impacte le flux ? Mettez à jour votre .fz via un autre prompt (“Modifiez ce FlowZap Code pour ajouter OAuth”) et rechargez-le dans FlowZap.

Pourquoi Cela Compte pour les Diagrammes de Séquence et les Workflows IA

La plupart des outils diagrams-as-code existants sont soit :

  • À usage général (PlantUML, Mermaid) avec une syntaxe plus lourde et un support double-vue limité, ou
  • Focalisés sur l'infrastructure/architecture plutôt que sur les flux métier de bout en bout.

FlowZap prend une voie différente :

  • Il se spécialise dans les workflows et diagrammes de séquence—les flux qui vous importent pour l'auth, les paiements, les approbations et les interactions d'agents IA.
  • Il fournit un DSL simple que les non-experts en UML peuvent saisir rapidement.
  • Il s'intègre naturellement au développement assisté par IA, où les LLM écrivent ou mettent à jour les fichiers .fz à la demande.

Si votre équipe stocke déjà le code, les docs et les définitions d'infrastructure dans Git, le .fz et FlowZap Code vous permettent d'ajouter les diagrammes de séquence dans ce même workflow répétable—sans renoncer à la clarté visuelle dont les parties prenantes non techniques ont besoin.

Démarrer en Quelques Minutes

Pour essayer cela dans votre propre projet :

  1. Ajoutez flowzap-code-guidelines.md depuis https://github.com/flowzap-xyz/code/blob/main/flowzap-code-guidelines.md à votre dossier /docs/.
  2. Demandez à votre LLM (Cursor, Windsurf, Warp, etc.) de générer du FlowZap Code pour un flux simple, en référençant ce fichier.
  3. Sauvegardez le résultat sous quelquechose.fz dans /docs/.
  4. Allez sur flowzap.xyz, ouvrez l'éditeur de diagrammes, et utilisez Charger un fichier .fz pour le visualiser.

À partir de là, vous pouvez itérer à la fois sur le code et le diagramme à mesure que votre système évolue.

Inspirations:

Retour à tous les articles du blogue