RSS DEV-Gemeinschaft
Folgen
Von Prompt zu Praktisch: Entwicklung des User Flows von HandyFEM mit Claude.ai + Mermaid.live
Der Autor zielt darauf ab, eine einzige Quelle der Wahrheit für die Navigation und User Journeys von HandyFEM mithilfe von Diagrammen zu erstellen. Erste Versuche mit RapidChart scheiterten, was zu einem Wechsel zu Mermaid für reproduzierbare Diagramme führte. Claude wurde verwendet, um das Mermaid-Diagramm zu generieren und zu verfeinern, wobei ein vollständiger App-Kontext einbezogen wurde. Das endgültige Diagramm ist farbcodiert und stellt verschiedene UI-Elemente wie Bildschirme, Formulare und Entscheidungspunkte dar. Der Autor stellt einen vereinfachten Mermaid-Code-Ausschnitt zur Verfügung, der den Ablauf veranschaulicht, einschließlich rollenbasierter Verzweigungen. Die Versionierung des Diagramms in Git ist ein wesentlicher Vorteil dieses Ansatzes unter Verwendung von textbasiertem Code. Der Autor betont die Bedeutung der Prompt-Gestaltung bei der Arbeit mit Claude und der iterativen Vorgehensweise Rolle für Rolle. Das Diagramm verbessert die Kommunikation zwischen Designern, Entwicklern und Stakeholdern. Zukünftige Schritte umfassen die Aufteilung des Mega-Diagramms in Feature-Dateien und die Verknüpfung von Diagrammknoten mit Implementierungsressourcen. Der Autor kommt zu dem Schluss, dass die Verwendung eines LLM wie Claude mit Mermaid hilfreich für die Abbildung komplexer Anwendungen ist.
