[PYTHON] Ich habe ein Tool erstellt, um automatisch ein Zustandsübergangsdiagramm zu generieren, das sowohl für die Webentwicklung als auch für die Anwendungsentwicklung verwendet werden kann

Überblick

Neulich dieser Artikel stellte vor, wie ein Zustandsübergangsdiagramm mit graphviz erstellt wird, aber es ist immer noch kompliziert und enthält viele Beschreibungen. Daher dachte ich, es sei schwierig, damit klarzukommen, und erstellte eine Befehlszeilenanwendung, die automatisch den Quellcode dieses Graphviz generiert und das Bild ausgibt.

Diese Anwendung heißt Pyagram und wurde, wie der Name vermuten lässt, mit Python entwickelt. Die Entwicklungszeit betrug einen Tag.

Durch die Verwendung dieses Pyagramms wird es relativ einfach, ein kompliziertes Zustandsübergangsdiagramm zu erstellen. Daher möchte ich es im Folgenden vorstellen.

Informationen zum Zeichnen des Zustandsübergangsdiagramms finden Sie in diesem Artikel.

Die fertige Figur sieht wie unten aus.

Die Abbildung enthält mehrere Objekte.

--Abbildungstitel (oben)

• Ansicht (Doppelkreis)
• Serverseitige Verarbeitung (einzelner Kreis auf grauem Hintergrund)
• Bildschirmübergang (gebrochener Pfeil)
• Verarbeitungsfluss (gerader Pfeil)

Die obige Abbildung ist ein Diagramm einer Webanwendung, aber ich denke, dass Sie einen sehr komplizierten Ablauf zeichnen können, sodass die Smartphone-Anwendung und die Serverseite je nach Einfallsreichtum zusammenarbeiten.

Wie schreibe ich Quellcode

Verwenden Sie zunächst "@", um den Titel der Figur festzulegen.

@[title]
Beispiel für ein Bildschirmübergangsdiagramm

Verwenden Sie dann "#" und "->", um den Bildschirm und seine Übergänge zu definieren.

In diesem Beispiel gibt es drei Bildschirme: Liste, neue Erstellung und Fehler. Die Liste und der neue Erstellungsbildschirm sind miteinander verbunden.

Darüber hinaus können mehrere Bildschirmübergänge auf einem Bildschirm definiert werden, und der Bildschirmpfad kann auch unter dem Bildschirmnamen definiert werden.

Dies ist eine Richtlinie, wenn Sie später die serverseitige Verarbeitung hinzufügen. Es wird daher empfohlen, zuerst den Nur-Bildschirm-Übergang auf diese Weise zu definieren.

#[Listenbildschirm]
/index

-->Neuer Erstellungsbildschirm

#[Neuer Erstellungsbildschirm]
/add

-->Listenbildschirm

-->Neuer Erstellungsbildschirm

#[Serverfehlerbildschirm]

Verwenden Sie als Nächstes "==>", um die bildschirm- und serverseitige Verarbeitung zu verbinden.

Sie können mehrere Zweige in einem Prozess schreiben, wie im folgenden Beispiel.

Sie können auch eine Zeichenfolge für die Beschriftung definieren, die neben dem Pfeil angezeigt wird. Ich schreibe hier hauptsächlich das Ergebnis der Verarbeitung.

$[GET /index]
==>Listenbildschirm

$[GET /add]
==>Neuer Erstellungsbildschirm

$[POST /add]
==>Validierung

$[Validierung]
Wenn der Eingabewert gültig ist
==>sparen

Wenn der Eingabewert ungültig ist
==>Neuer Erstellungsbildschirm

$[sparen]
Erfolg
==>Listenbildschirm

Datenbankfehler
==>Serverfehlerbildschirm

Zum Schluss verbinden Sie die Aktionen vom Bildschirm aus mit "==>".

#[Listenbildschirm]
/index

-->Neuer Erstellungsbildschirm

Klicken Sie auf die neue Schaltfläche
==> GET /add


#[Neuer Erstellungsbildschirm]
/add

-->Listenbildschirm

-->Neuer Erstellungsbildschirm

Klicken Sie auf die Schaltfläche Zurück
==> GET /index

Klicken Sie auf die Schaltfläche Registrieren
==> POST /add

Es gibt andere Beispiele auf Github. Bitte beziehen Sie sich auf diese.

Wie installiert man

Wenn Sie es mit dem Befehl pip3 installieren, werden gleichzeitig abhängige Bibliotheken wie Pyparsing installiert.

Nach der Installation wird der Befehl pyagram im entsprechenden bin-Verzeichnis wie / usr / local / bin / pyagram gespeichert.

Es scheint, dass graphviz selbst für verschiedene Betriebssysteme gedacht ist, aber da ich nur einen Mac zur Hand habe, unterstütze ich vorerst nur MacOS. Berichte, dass es auf anderen Betriebssystemen funktioniert hat, sind willkommen.

pip3 install pyagram

Ausführungsmethode

Der Befehl pyagram akzeptiert zwei Argumente.

Die erste ist die Option t, mit der das Bildformat festgelegt wird. Es können drei Arten von Bildformaten verwendet werden: gif, png und svg.

Die zweite ist die Option i, mit der die Eingabedatei festgelegt wird. Die Erweiterung ist optional und muss nicht sein.

Die dritte Option ist die Option o, die den Ausgabepfad angibt. Wenn nicht angegeben, wird es am selben Speicherort wie die Eingabedatei ausgegeben.

Der vierte ist der Schriftname. Wenn nicht angegeben, wird die Standardschriftart verwendet. Wenn der Schriftname Leerzeichen enthält, schließen Sie ihn in "" (doppeltes Anführungszeichen) ein.

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

Über die Implementierung

Es ist in vier Prozesse unterteilt: Phrasenanalyse, Syntaxanalyse, Generierung von Zwischendateien und Generierung von Bilddateien.

Durch die Verwendung eines Parser-Kombinators namens Pyparsing für die Phrasenanalyse haben wir die Verarbeitung ohne Verwendung komplizierter regulärer Ausdrücke ermöglicht.

Bei der Syntaxanalyse wird ein abstrakter Syntaxbaum unter Verwendung der durch die Phrasenanalyse generierten Daten generiert. Ich denke, dass die syntaktische Analyse vereinfacht werden kann, indem ein geeigneteres BNF erstellt wird, aber ich möchte dies später zu einem Problem machen.

Nach der Ausgabe des Quellcodes von graphviz in der Zwischendateierzeugung. Geben Sie die Bilddatei mit dem Befehl graphviz aus. Zwischendateien werden nach Gebrauch gelöscht.

Über die Zukunft

Die Anzahl der Diagramme, die ich in meiner Arbeit zeichne, hat sich allmählich erhöht, aber die Werkzeuge, die ich verwende, unterscheiden sich je nach Diagramm, was es störend macht. Daher möchte ich in der Lage sein, alle Diagramme zu erstellen, die ich persönlich mit Pyagram verwende. Ich werde.

Wenn Sie eine Anfrage haben, werde ich diese auch dann hinzufügen, wenn ich Zeit habe.

Ergänzung

Ich bin überrascht, unerwartet eine große Antwort zu hören.

Um eine kleine Ergänzung hinzuzufügen, war die Motivation dafür, dass ich die Spezifikationen auf eine Weise vermitteln wollte, die leichter zu verstehen war, aber ich wollte nicht zu viel Zeit damit verbringen (nicht), das Diagramm zu erstellen. Insbesondere wenn ein Tester einen Integrationstest durchführen ließ, war es schwierig, den Test ohne mindestens ein Bildschirmübergangsdiagramm durchzuführen. Unter Managementgesichtspunkten besteht der größte Teil meiner Arbeit in der Kommunikation mit Kunden und Entwicklern, dem Projektfortschritt, dem Design usw., aber ich möchte auch in gewissem Umfang in die Implementierung einsteigen (andernfalls werde ich sie gelegentlich beibehalten). Aufgrund der Umstände (manchmal können schwierige Dinge erledigt werden) versuchen wir, den Inhalt mit einem gewissen Grad an Feinheit zu beschreiben.

Der Schwerpunkt liegt darauf, nicht zu viel Zeit zu verbringen, daher ist das Erscheinungsbild zweitrangig. Das Layout ändert sich jedes Mal, wenn ich mit Graphviz ein Diagramm erstelle. Wenn Sie jedoch neugierig sind, führen Sie den Befehl einige Male aus. Wenn Sie es mehrmals tun, erhalten Sie ein Layout, das etwas überzeugend ist. Übrigens hat sich in einigen meiner Quellcodes das Layout überhaupt nicht geändert, egal wie oft ich den Befehl ausgeführt habe. Die Algorithmen hier sind Graphviz-abhängig, daher kann ich nicht sicher sagen, aber ich hatte das Gefühl, dass das Layout mit zunehmender Anzahl von Objekten tendenziell festgelegt wurde.

Wir haben auch eine neue Syntax zum Zeichnen von Diagrammen von Smartphone-Apps und zur Integration von Web-APIs eingeführt.

%[Client-seitiger Verarbeitungsname]

Wenn Sie so schreiben, wird ein einzelner Kreis ohne Hintergrundfarbe angezeigt. Es soll zum Schreiben von clientseitiger Verarbeitung wie Smartphone-Apps und SPA-Frameworks wie AngularJS verwendet werden.

Da es bereits auf PyPI hochgeladen wurde, wird die neueste Version mit dem oben beschriebenen Befehl pip3 installiert.

Wenn Sie es bereits installiert haben, können Sie es mit dem folgenden Befehl aktualisieren.

pip3 install pyagram --upgrade

Als Referenz werde ich ein Diagramm anhängen, in dem ein System angenommen wird, in dem eine Hybridanwendung mit AngularJS und Cordova sowie eine Web-API zusammenarbeiten.

Informationen zum Schreiben des Quellcodes finden Sie unter dem folgenden Link.

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

Nachtrag 28.07.2016

KAMEDA Akihiro ist jetzt mit Windows kompatibel. Darüber hinaus haben wir eine Befehlszeilenoption hinzugefügt, mit der Sie den Schrifttyp angeben können. Vielen Dank.

Die Verwendung ist wie folgt.

pyagram -t {Bildtyp} -o {Ausgabepfad} -i {Eingabedatei} -f {Schriftartenname}

Wenn der Schriftname Leerzeichen enthält, funktioniert dies, wenn Sie ihn wie unten gezeigt in doppelte Anführungszeichen setzen.

pyagram -t {Bildtyp} -o {Ausgabepfad} -i {Eingabedatei} -f "Hiragino Kakugo Pro"

Sie können die neueste Version mit dem Befehl pip3 erhalten. Versuchen Sie es also bitte.

Nachtrag 30.07.2016

YOSHIDA Katsuhiko hat einige Verbesserungen vorgenommen. Vielen Dank.

• Die Erweiterung der Eingabedatei ist jetzt beliebig. Es ist auch ohne Erweiterung in Ordnung.
• &% @ $ # <>? Kann jetzt in Zeichen aufgenommen werden.

Nachtrag 31.07.2016

Neue Funktion zum Generieren eines ER-Diagramms wurde hinzugefügt.

Nachtrag 14.08.2016

Aufgrund einer Anfrage haben wir [Webdienst, der mithilfe von Pyagram Zustandsübergangsdiagramme erstellen kann] veröffentlicht (http://www.diagram.gq/). Sie können das Bild des Zustandsübergangsdiagramms erhalten, indem Sie einfach den Quellcode eingeben und die Schaltfläche zur Bilderzeugung drücken. Aufgrund der Eigenschaften des Systems wird das generierte Image jedoch vorübergehend auf dem Server gespeichert. Da wir SSL bisher noch nicht eingeführt haben, wird der von Ihnen gesendete Quellcode im Klartext gesendet. Verwenden Sie es daher nur, wenn es in Ordnung ist, es zu senden, und verwenden Sie Pyagram in anderen Fällen. Darüber hinaus werden Partner angezeigt, damit wir weiterhin Dienstleistungen erbringen können. Danke für Ihr Verständnis.