Flowora
Bêta · API susceptible d’évoluer · 0.1.0-beta.1
Vos graphes. Votre logique. Un éditeur TypeScript indépendant.
Un éditeur de graphes TypeScript indépendant, avec un canvas Angular natif et un placement ELK optionnels. Première bêta publique sous licence MIT.
Voir sur npm · Documentation officielle
Installation
npm install @newvexa/flowora@0.1.0-beta.1Un éditeur, pas un moteur d’exécution
Flowora permet de construire et modifier des graphes de nœuds et de connexions. Votre application conserve sa logique métier et décide comment interpréter ou exécuter le document produit. Le cœur ne dépend ni d’Angular, ni de Workify, ni de Rete.
Le package est distribué publiquement sous licence MIT. Cette documentation et l’installation portent sur la version 0.1.0-beta.1 : l’API peut évoluer avant la version 1.0. Le tag npm latest pointe actuellement lui aussi vers cette bêta, pas vers une release stable.
Le modèle de graphe et ses commandes
EditorDocument contient les nœuds, les connexions et le viewport. Editor fournit des snapshots immuables, des abonnements et des commandes pour ajouter, déplacer, modifier, sélectionner, dupliquer et regrouper les nœuds.
L’historique prend en charge les transactions, undo et redo. toJSON exporte le document ; parseDocument le valide et loadJSON le recharge. La persistance sur disque ou en base de données appartient à votre application.
Premier graphe en TypeScript
L’exemple ci-dessous crée le graphe de démonstration, ajoute un nœud response, modifie son nom puis valide et recharge son export JSON. Il utilise uniquement les exports publics du cœur ; aucun canvas Angular ou service externe n’est nécessaire.
Dans un projet Node ESM, installez TypeScript et définissez type: module dans package.json. Enregistrez le code dans demo.ts, compilez avec npx tsc demo.ts --strict --target ES2022 --lib ES2022 --module NodeNext --moduleResolution NodeNext --outDir build, puis exécutez node build/demo.js. Cet exemple a été compilé avec TypeScript 6.0.3 et exécuté sous Node.js 26.13.0.
import {
Editor, createDemoDocument, parseDocument,
type EditorDocument, type EditorSnapshot, type NodePatch,
} from '@newvexa/flowora';
const editor = new Editor(createDemoDocument(), { historyLimit: 64 });
const unsubscribe = editor.subscribe(() => {
const snapshot: EditorSnapshot = editor.getSnapshot();
void snapshot.revision;
});
const id: string = editor.addFromCatalog('response', { x: 1200, y: 280 });
const patch: NodePatch = { name: 'Réponse de mon application' };
editor.updateNode(id, patch);
const savedJson: string = editor.toJSON();
const document: EditorDocument = parseDocument(savedJson);
editor.loadJSON(savedJson);
unsubscribe();
editor.dispose();
export { document };Un canvas Angular optionnel
L’entrée @newvexa/flowora/angular expose FloworaEditorComponent, un composant standalone de sélecteur flowora-editor. Importez-le dans un hôte Angular 22 compatible et fournissez-lui une instance Editor via l’entrée editor. Donnez une hauteur explicite au conteneur.
Les templates de nœuds et d’inspecteur sont personnalisables. documentChange, saveRequested et exportRequested permettent de brancher les événements de l’éditeur à votre application. Le bundle Angular est ESM/partial-Ivy et nécessite le linker Angular ; les peers déclarés sont @angular/core et @angular/common ^22.2.4. Le cœur headless n’impose pas leur installation.
Placement automatique avec ELK
L’adaptateur @newvexa/flowora/layout expose ElkLayoutAdapter. Installez elkjs 0.12.1 si vous utilisez cette entrée ; ce peer est optionnel pour le reste du package.
L’adaptateur calcule des positions sans modifier l’éditeur. Sur une instance Editor active, appelez adapter.layout(editor.getSnapshot().document), puis editor.applyLayout(positions). Les directions proposées sont RIGHT et DOWN. Le calcul n’utilise pas de Web Worker par défaut.
Les limites de cette bêta
Flowora ne fournit ni backend, ni cloud, ni authentification, ni moteur d’exécution. Les presets email, RAG et script représentent des données et des présentations : ils n’envoient pas de mail, ne déclenchent pas de recherche et n’évaluent pas de code. Un groupe visuel n’est pas automatiquement un sous-workflow.
La validation du modèle limite un document à 5 000 nœuds, 20 000 connexions et 32 Mio de JSON compact UTF-8. Ces plafonds ne garantissent pas la fluidité du canvas. L’historique est borné et non durable ; les cycles sont rejetés par défaut. Validez les performances et les besoins d’accessibilité de votre propre application.
Documentation et retours de la communauté
Le package npm, son README, son guide d’intégration et sa licence sont publics. Les sources publiées ne fournissent pas de lien vers un dépôt de développement ou un site dédié ; cette page centralise donc la documentation sans inventer d’accès GitHub.
Pour signaler un problème ou proposer une amélioration, contactez Newvexa avec la version utilisée, un cas minimal reproductible et le résultat attendu. Le bouton de documentation ouvre le guide d’intégration publié avec cette version.