I'm curious about the types of architecture diagrams people create for their frontend applications. I'm imagining a diagram that outlines the overall structure—like repositories, state stores, their possible states, and how everything connects. I think it's beneficial to create this before coding so we can iterate on details early, clarify our objectives, and potentially share it with an AI tool for additional context. Do you have any examples or repositories that illustrate how you approach this? Thanks!
5 Answers
Have you tried Freeform on Apple devices? It's underrated—definitely not developer-focused but it gets the job done nicely.
I don’t have examples to share since my work is all private, but I definitely recommend trying out Mermaid for this. It's got great free plugins for IDEs, and AI does a decent job at generating and understanding them—just remember to review the outputs! If you're on GitHub, it will render the markdown as a diagram.
I sketch out component-state-flow diagrams that show the UI, stores, and data sources. Tools like Mermaid or Excalidraw make it easy and shareable, which is great for early alignment and can boost AI-assisted development.
I usually start with a block diagram for high-level architecture and then dive into specifics with whatever else is needed, like entity flow or state diagrams. I like using Mermaid because it's super quick to create diagrams, and you can actually write a simple compiler that keeps everything up to date with your actual architecture. Sometimes though, I skip diagrams entirely and just get into coding the API first to feel out the usability, then I create diagrams later as a reference for others.
+1 for Mermaid! I don’t typically build really complex frontends, so those diagrams are only a part of what I make, but visualizing what you're about to create is incredibly helpful, in my opinion.
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads