DEV Community
Follow
From Prompt to Practical: Evolving HandyFEM’s User Flow with Claude.ai + Mermaid.live
The author aims to create a single source of truth for HandyFEM's navigation and user journeys using diagrams. Initial attempts with RapidChart failed, prompting a shift to Mermaid for reproducible diagrams. Claude was used to generate and refine the Mermaid diagram, incorporating a full app context. The final diagram is color-coded, representing various UI elements like screens, forms, and decision points. The author provides a simplified Mermaid code snippet demonstrating the flow, including role-based branching. Versioning the diagram in Git is a key benefit of this approach using text-based code. The author emphasizes the importance of prompt shaping when working with Claude, and iterating role by role. The diagram improves communication between designers, developers, and stakeholders. Future steps include splitting the mega-diagram into feature files and linking diagram nodes to implementation resources. The author concludes that using an LLM like Claude with Mermaid is helpful for mapping complex applications.
