Une librairie JS pour générer des algorigrammes

Un algorigramme c'est quoi ?

L'algorigramme est une représentation graphique et normalisée de l'enchainement des opérations effectuées par un programme. Cette représentation normalisée est consittuée de plusieurs blocs. 

Les tests ou branchements conditionnels, l'entrée du test est l'angle supérieur, la sortie avec le rond correspond à la sortie si le test est faux et la sortie du bas est celle utilisé en cas de réponse vrai du test.

Ce bloc là sert à mettre à disposition une information à traitée ou à l'enregistrement d'une information traitée.

Et enfin ce dernier bloc sert à faire appel à un sous programme.

JS2FLOWCHART

js2flowchart est une librairie supportant la syntaxe ES6 qui prend notre code javascript et le transforme en un SVG. Vous pouvez essayez cette librairie sur le codepen mis à disposition par le créateur. Sinon il est possible d'installer le paquet via NPM "yarn add js2flowchart".

Dans l'exemple ci dessus, la constante code est une chaîne de caractère dans laquelle on va écrire le code qui doit être transformé en algorigramme.

Il est possible avec js2flowchart de créer des présentations en générant des slides pour chacun des algorigrammes. Un exemple ici

Le rendu visuel des algorigrammes reste personnalisable à votre guise. Il est par exemple possible de changer les couleurs.

Dans l'exemple ci dessus la ligne "svgRender.applyBlackAndWhiteTheme();" permet de passer le rendu en noir et blanc. Le créateur de la librairie a crée plusieurs thème par défaut.

En conclusion

js2flowchart n'est pas une librairie qui vous fera gagner en productivité au quotidien, mais elle peut être très utile dans le cadre de l'education. Elle permet d'avoir un rendu graphique de la logique de notre code assez facilement.