Mind Map Tree

About this plugin

Directory Tree to Mind Map: Visualize Your Codebase in FigJam

Transform your project's folder structure into interactive, hierarchical mind maps directly in FigJam—perfect for developers, designers, and teams mapping complex codebases, app architectures, or file organizations.

What you'll get:

Instant Tree-to-Map Conversion: Paste or import a directory tree (e.g., from tree command or JSON), and watch it unfold into a beautiful radial layout with automatic connectors.

Dramatic Visual Hierarchy: Root nodes dominate with massive 450px fonts and expansive boxes, tapering steeply to 60px at deeper levels (up to 8+ depth)—no more squinting at leaves!

Smart Canvas Wrapping: When branches hit Figma's ±65k pixel limits, subtrees auto-wrap into visually distinct rows below siblings, with 1.5x extra vertical spacing for clarity. Everything stays connected and explorable—no clipping or manual nudges.

Precise & Polished: Text fits perfectly (measured via temp nodes), thick 4px connectors for easy tracing, color-coded levels, and centered positioning for pro-level aesthetics.

Learn & Discover:

Project Insights: Spot overgrown folders, orphaned files, or tangled dependencies at a glance—ideal for code reviews, onboarding, or refactoring brainstorms.

Team Collaboration: Share as live FigJam boards for real-time discussions; zoom/pan effortlessly to drill into API routes, components, or nested configs.

Scalability for Real Projects: Handles 100+ nodes (like your Next.js example with src/app/admin/api) without breaking—expect a sprawling, navigable map that reveals patterns you miss in terminals.

Run it on your repo's tree output for instant clarity. Free, open-source vibes—fork and enhance on GitHub! 🚀

Figma plugin mind map