J'ai créé un outil pour générer automatiquement un diagramme de transition d'état pouvant être utilisé à la fois pour le développement Web et le développement d'applications

Aperçu

L'autre jour cet article a présenté comment créer un diagramme de transition d'état à l'aide de graphviz, mais c'est toujours compliqué et a beaucoup de description. J'ai donc pensé qu'il était difficile de s'entendre, j'ai donc créé une application de ligne de commande qui génère automatiquement le code source de ce graphviz et génère l'image.

Cette application s'appelle Pyagram, et comme vous pouvez le deviner d'après son nom, elle a été développée en Python. La période de développement était d'un jour.

En utilisant ce Pyagramme, il devient possible de créer un diagramme de transition d'état compliqué relativement facilement, je voudrais donc l'introduire ci-dessous.

Pour savoir comment dessiner le diagramme de transition d'état, reportez-vous à cet article.

La figure finie ressemble à celle ci-dessous.

crud_ja.png

Il y a plusieurs objets dans la figure.

La figure ci-dessus est un schéma d'une application Web, mais je pense que vous pouvez également dessiner un flux très compliqué de sorte que l'application smartphone et le côté serveur coopèrent.

Comment écrire du code source

Tout d'abord, utilisez "@" pour définir le titre de la figure.

@[title]
Exemple de diagramme de transition d'écran

Utilisez ensuite "#" et "->" pour définir l'écran et ses transitions.

Dans cet exemple, il y a trois écrans, liste, nouvelle création et erreur, et la liste et le nouvel écran de création sont connectés les uns aux autres.

De plus, plusieurs transitions d'écran peuvent être définies sur un écran et le chemin de l'écran peut également être défini sous le nom d'écran.

Ce sera une ligne directrice lors de l'ajout du traitement côté serveur ultérieurement, il est donc recommandé de définir d'abord la transition d'écran uniquement de cette manière.

#[Écran de liste]
/index

-->Nouvel écran de création

#[Nouvel écran de création]
/add

-->Écran de liste

-->Nouvel écran de création

#[Écran d'erreur du serveur]

Ensuite, utilisez "==>" pour connecter le traitement côté écran et côté serveur.

Vous pouvez écrire plusieurs branches en un seul processus, comme dans l'exemple ci-dessous.

Vous pouvez également définir une chaîne pour l'étiquette qui apparaît à côté de la flèche. J'écris principalement le résultat du traitement ici.

$[GET /index]
==>Écran de liste

$[GET /add]
==>Nouvel écran de création

$[POST /add]
==>Validation

$[Validation]
Si la valeur d'entrée est valide
==>sauvegarder

Si la valeur d'entrée n'est pas valide
==>Nouvel écran de création

$[sauvegarder]
Succès
==>Écran de liste

erreur de la base de données
==>Écran d'erreur du serveur

Enfin, connectez les actions depuis l'écran avec "==>".

#[Écran de liste]
/index

-->Nouvel écran de création

Cliquez sur le nouveau bouton
==> GET /add


#[Nouvel écran de création]
/add

-->Écran de liste

-->Nouvel écran de création

Cliquez sur le bouton retour
==> GET /index

Cliquez sur le bouton d'enregistrement
==> POST /add

Il existe d'autres exemples sur Github, veuillez donc les consulter.

Comment installer

Si vous l'installez avec la commande pip3, les bibliothèques dépendantes telles que pyparsing seront installées en même temps.

Après l'installation, la commande pyagram sera enregistrée dans le répertoire bin approprié, comme / usr / local / bin / pyagram.

Il semble que graphviz lui-même soit destiné à différents systèmes d'exploitation, mais comme je n'ai qu'un Mac sous la main, je ne supporte que MacOS pour le moment. Les rapports indiquant qu'il a fonctionné sur d'autres systèmes d'exploitation sont les bienvenus.

pip3 install pyagram

Méthode d'exécution

La commande pyagram prend deux arguments.

La première est l'option t, qui définit le format de l'image. Trois types de formats d'image peuvent être utilisés: gif, png et svg.

La seconde est l'option i, qui définit le fichier d'entrée. L'extension est facultative et n'a pas besoin de l'être.

La troisième est l'option o, qui spécifie le chemin de sortie. S'il n'est pas spécifié, il sera sorti au même emplacement que le fichier d'entrée.

Le quatrième est le nom de la police. S'il n'est pas spécifié, la police par défaut sera utilisée. Si le nom de la police contient des espaces, placez-le entre "" (guillemets doubles).

pyagram -t {image type} -i {source file} -o {output path} -f {font name} -d std

À propos de la mise en œuvre

Il est divisé en quatre processus: analyse de phrase, analyse de syntaxe, génération de fichier intermédiaire et génération de fichier image.

En utilisant un combinateur d'analyseur appelé pyparsing pour l'analyse des phrases, nous avons rendu possible le traitement sans utiliser d'expressions régulières compliquées.

Dans l'analyse syntaxique, un arbre syntaxique abstrait est généré à l'aide des données générées par l'analyse des phrases. Je pense que l'analyse syntaxique pourrait être simplifiée en créant un BNF plus approprié, mais j'aimerais en faire un problème plus tard.

Après avoir sorti le code source de graphviz dans la génération de fichier intermédiaire. Sortez le fichier image à l'aide de la commande graphviz. Les fichiers intermédiaires sont supprimés après utilisation.

À propos du futur

Le nombre de dessins que je dessine dans mon travail a progressivement augmenté, mais les outils que j'utilise diffèrent selon le diagramme, ce qui le rend gênant, alors j'aimerais pouvoir créer tous les diagrammes que j'utilise personnellement avec Pyagram. Je vais.

Aussi, si vous avez une demande, je l'ajouterai même si j'en ai le temps.

Supplément

Je suis surpris d'entendre une réponse inattendue.

Pour ajouter un petit supplément, la motivation pour ce faire était que je voulais transmettre les spécifications d'une manière plus facile à comprendre, mais je ne voulais pas passer trop de temps (ne pas pouvoir) créer le diagramme. En particulier, lorsqu'un testeur effectue un test d'intégration, il était difficile de faire le test sans au moins un diagramme de transition d'écran. Aussi, du point de vue de la gestion, l'essentiel de mon travail est la communication avec les clients et les développeurs, l'avancement du projet, la conception, etc., mais je veux aussi entrer dans l'implémentation dans une certaine mesure (sinon je la maintiendrai occasionnellement). En raison des circonstances (parfois des choses difficiles peuvent être accomplies), nous essayons de décrire le contenu avec un certain degré de finesse.

L'accent est mis sur ne pas passer trop de temps, donc l'apparence est secondaire. La mise en page change chaque fois que je génère un diagramme avec Graphviz, mais si vous êtes curieux à ce sujet, essayez d'exécuter la commande plusieurs fois. Si vous le faites plusieurs fois, vous obtiendrez une mise en page quelque peu convaincante. À propos, une partie du code source que j'avais avait la mise en page inchangée, peu importe le nombre de fois où j'ai exécuté la commande. Les algorithmes ici dépendent de Graphviz, donc je ne peux pas le dire avec certitude, mais j'ai senti que la mise en page avait tendance à être fixe à mesure que le nombre d'objets augmentait.

Nous avons également introduit une nouvelle syntaxe pour dessiner des diagrammes d'applications pour smartphone et l'intégration d'API Web.

%[Nom du traitement côté client]

Si vous écrivez ainsi, un seul cercle sans couleur d'arrière-plan sera affiché. Il est censé être utilisé pour écrire des traitements côté client tels que des applications pour smartphone et des frameworks SPA tels que AngularJS.

Puisqu'elle a déjà été téléchargée sur PyPI, la dernière version sera installée avec la commande pip3 décrite ci-dessus.

Si vous l'avez déjà installé, vous pouvez le mettre à niveau avec la commande suivante.

pip3 install pyagram --upgrade

Pour votre référence, je vais joindre un diagramme supposant un système dans lequel une application hybride utilisant AngularJS et Cordova et une API Web fonctionnent ensemble.

mobile_app.png

Veuillez vous référer au lien ci-dessous pour savoir comment écrire le code source.

https://github.com/hideshi/pyagram/blob/master/example/mobile_app.txt

Supplément 2016/07/28

KAMEDA Akihiro est désormais compatible avec Windows. De plus, nous avons ajouté une option de ligne de commande qui vous permet de spécifier le type de police. Merci beaucoup.

L'utilisation est la suivante.

pyagram -t {Type d'image} -o {Chemin de sortie} -i {Fichier d'entrée} -f {Nom de la police}

Si le nom de la police contient des espaces, cela fonctionnera si vous le mettez entre guillemets, comme indiqué ci-dessous.

pyagram -t {Type d'image} -o {Chemin de sortie} -i {Fichier d'entrée} -f "Hiragino Kakugo Pro"

Vous pouvez obtenir la dernière version avec la commande pip3, veuillez donc l'essayer.

Supplément 2016/07/30

YOSHIDA Katsuhiko a apporté quelques améliorations. Merci beaucoup.

Supplément 2016/07/31

Nouvelle fonction pour générer un diagramme ER a été ajoutée.

Supplément 2016/08/14

Suite à une demande, nous avons publié un service Web qui peut créer des diagrammes de transition d'état à l'aide de Pyagram. Vous pouvez obtenir l'image du diagramme de transition d'état en entrant simplement le code source et en appuyant sur le bouton de génération d'image. Cependant, en raison des caractéristiques du système, l'image générée est temporairement enregistrée sur le serveur. De plus, comme nous n'avons pas encore introduit SSL, le code source que vous avez envoyé sera envoyé en texte brut. Par conséquent, veuillez l'utiliser uniquement lorsque vous pouvez l'envoyer et utilisez Pyagram dans d'autres cas. De plus, les affiliés sont affichés afin que nous puissions continuer à fournir des services. Merci de votre compréhension.

Recommended Posts

J'ai créé un outil pour générer automatiquement un diagramme de transition d'état pouvant être utilisé à la fois pour le développement Web et le développement d'applications
[Atcoder] [C ++] J'ai fait un outil d'automatisation de test qui peut être utilisé pendant le concours
J'ai créé un outil pour générer automatiquement un simple diagramme ER à partir de l'instruction CREATE TABLE
J'ai créé un modèle de projet Python générique
J'ai créé une application Web en Python qui convertit Markdown en HTML
J'ai écrit un tri-arbre qui peut être utilisé pour l'implémentation de dictionnaire à grande vitesse en langage D et Python
Création d'une application Web qui mappe les informations sur les événements informatiques avec Vue et Flask
Création d'un toolver qui crache le système d'exploitation, Python, les modules et les versions d'outils à Markdown
J'ai créé un outil qui facilite un peu la création et l'installation d'une clé publique.
Étant donné que ImageDataGenerator ne peut plus être utilisé, une histoire sur la création d'une classe d'extension de données pour tensorflow> = 2.0
Création d'un outil qui facilite la définition des paramètres des modèles d'apprentissage automatique
Création d'une méthode pour sélectionner et visualiser automatiquement un graphique approprié pour les pandas DataFrame
[Flask] J'ai essayé de résumer la "configuration docker-compose" qui peut être créée rapidement pour les applications Web
Je l'ai fait parce que je veux des données JSON qui peuvent être utilisées librement dans les démos et les prototypes
J'ai fait un shuffle qui peut être réinitialisé (inversé) avec Python
J'ai essayé de créer un outil d'échafaudage pour le framework Web Python Bottle
J'ai créé un outil pour parcourir automatiquement plusieurs sites avec Selenium (Python)
J'ai fait une simple minuterie qui peut être démarrée depuis le terminal
Je souhaite créer une application Web en utilisant React et Python flask
J'ai fait une application WEB avec Django
Je voulais créer rapidement un serveur de messagerie utilisable librement avec postfix + dovecot sur EC2
[Python] J'ai créé un code de scraping web qui acquiert automatiquement le titre de l'actualité et l'URL de Nihon Keizai Shimbun.
Si vous souhaitez créer une application Windows (exe) qui peut être utilisée maintenant en utilisant uniquement Python
J'ai créé un système qui décide automatiquement de s'exécuter demain avec Python et l'ajoute à Google Agenda.
[Python] J'ai créé un script qui coupe et colle automatiquement les fichiers du PC local sur un SSD externe.
Notes pour créer des figures pouvant être publiées dans des revues avec matplotlib
Je souhaite créer une file d'attente prioritaire pouvant être mise à jour avec Python (2.7)
J'ai créé un outil pour informer Slack des événements Connpass et en ai fait Terraform
Comment installer la bibliothèque Python qui peut être utilisée par les sociétés pharmaceutiques
Je souhaite créer une application WEB en utilisant les données de League of Legends ①
J'ai créé un outil pour générer du Markdown à partir du fichier JSON Scrapbox exporté
J'ai créé un outil pour sauvegarder automatiquement les métadonnées de l'organisation Salesforce
J'ai créé un outil en Python qui clique avec le bouton droit sur un fichier Excel et le divise en fichiers pour chaque feuille.
Cela fait un an que j'ai rejoint le département de développement d'applications Web, alors je regarde en arrière
J'ai créé un outil utile pour Digital Ocean
Fonctions pouvant être utilisées dans l'instruction for
J'ai créé un outil pour compiler nativement Hy
J'ai créé un outil pour obtenir de nouveaux articles
Présentation et fonctionnalités utiles de scikit-learn qui peuvent également être utilisées pour l'apprentissage en profondeur
Convertir des images du SDK FlyCapture en un formulaire pouvant être utilisé avec openCV
J'ai créé et publié une image Docker qui lit RSS et tweete automatiquement régulièrement.
J'ai essayé de générer automatiquement la chaîne de caractères à entrer dans M. Adjustment avec Python
[Python] Introduction au scraping WEB | Résumé des méthodes pouvant être utilisées avec webdriver
J'ai essayé de faire une application mémo qui peut être pomodoro, mais un enregistrement de réflexion
Serveur de partage de fichiers réalisé avec Raspberry Pi pouvant être utilisé pour le travail à distance
Générer automatiquement un dictionnaire polaire utilisé pour l'analyse des émotions
Création de l'outil de gestion des utilisateurs Let's Chat
J'ai créé un outil de nettoyage pour Google Container Registry
Comment démarrer un serveur WEB simple qui peut exécuter des cgi de php et python
J'ai essayé de développer une application Web et j'ai réfléchi à la manière d'éviter que les débutants ne tombent malades.
J'ai fait un module qui peut être glitch facilement, mais je ne peux pas passer l'argument de entry_points
J'ai écrit un module Ansible brut qui vous permet d'utiliser Virtualenv en installant Pythonz.
[Python] Un programme pour trouver le nombre de pommes et d'oranges qui peuvent être récoltées
Comment définir des variables pouvant être utilisées dans toute l'application Django ~ Utile pour les modèles, etc. ~
Lorsque j'ai fait une recherche de jeu recommandée avec YoutubeDataAPIv3 et fastText, j'ai trouvé un jeu qui semble intéressant que je ne connaissais pas auparavant