4 April 2026
From Cursor to FigJam in seconds: AI-powered architecture diagrams
We've been exploring what's possible when you connect your code editor directly to Figma, and one of the most surprising wins has been generating diagrams straight from the codebase. No manual drawing required. Here's how it works and why it matters for design teams.
Main point: We asked Cursor to draw Unplanned Studio's architecture and it put a live, editable FigJam diagram together in about 30 seconds, straight from the code.
The old way
Either a developer walks you through it, or you spend an hour drawing boxes in FigJam. Both are slow, and both go out of date.
What we tried
We asked Cursor, which connects to Figma: "Generate a FigJam diagram showing how Unplanned Studio is architected." It read the codebase, found the main layers, drafted a Mermaid diagram and pushed it into FigJam. The exact steps depend on your Figma setup, but the result is a normal, editable board.
What the diagram shows
- OS shell: window manager, dock, command palette, shared components
- Apps: system apps and designer apps
- Data: where live data comes from, and what happens when it's missing
- Component proposal pipeline: how a designer's component reaches the shared library
Why it matters
- Accurate: it shows what the code does, not what someone remembers
- Fast: reviews and onboarding start from a real diagram
- Editable: annotate and rearrange it like any FigJam file
It doesn't replace design thinking. It skips the 45 minutes of getting boxes in place first.