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.

Il y a plusieurs objets dans la figure.

Titre de la figure (haut) --Vue (double cercle) --Traitement côté serveur (cercle unique sur fond gris)
Transition d'écran (flèche brisée)
Flux de traitement (flèche droite)

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.

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.

L'extension du fichier d'entrée est désormais arbitraire. C'est OK même sans extension.
&% @ $ # <>? Peut maintenant être inclus dans les caractères.

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.

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