RSS DEV コミュニティ
フォロー
プロンプトから実践へ：Claude.ai + Mermaid.live を用いた HandyFEM のユーザーフロー進化
著者は、HandyFEMのナビゲーションとユーザーフローを、図を使って単一の真実源として作成することを目指しています。RapidChartでの初期の試みは失敗に終わり、再現可能な図を作成するためにMermaidに移行しました。Claudeを使用してMermaid図を生成および洗練させ、アプリ全体のコンテキストを組み込みました。最終的な図は色分けされており、画面、フォーム、意思決定ポイントなどのさまざまなUI要素を表しています。著者は、ロールベースの分岐を含むフローを示す、簡略化されたMermaidコードスニペットを提供しています。テキストベースのコードを使用することで、Gitで図をバージョン管理できることが、このアプローチの重要な利点です。著者は、Claudeを使用する際のプロンプトの整形と、ロールごとの反復の重要性を強調しています。この図は、デザイナー、開発者、および関係者間のコミュニケーションを改善します。今後のステップには、メガ図を機能ファイルに分割し、図のノードを実装リソースにリンクすることが含まれます。著者は、MermaidとClaudeのようなLLMを使用することが、複雑なアプリケーションのマッピングに役立つと結論付けています。
