Une librairie JS pour générer des algorigrammes
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
Aujourd'hui le blog du Webdesign vous propose de découvrir js2flowchart, une librairie javascript qui vous permet des générer des svg d'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".
See the Pen Default sample by Bohdan Liashenko (@Bogdan-Lyashenko) on CodePen.
Dans l'exmple 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.
See the Pen Black and white flowchart by José (@jsant) on CodePen.
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.
By
