Inspiration Diagram Learn draws from Figma's Diagram plugins that power design teams at Uber and Netflix. Manual diagramming wastes hours in student projects and coursework. The app creates interactive AI lessons teaching text-to-diagram skills for CS students and designers.
What it does Users input natural language prompts to generate flowcharts, sequence diagrams, etc instantly. Editable outputs include step-by-step explanations of the diagram logic. Students practice for assignments without learning complex tools. Making learning more diagram based for student understanding.
How we built it React frontend delivers interactive canvas editing. Emergent Agent preview APIs handle AI generation from text. Mermaid.js renders diagrams client-side. TailwindCSS styles the educational interface. Vite bundles fast, Vercel hosts the preview.
Challenges we ran into Preview environment limited complex diagram depth during development. Natural language parsing struggled with student-specific jargon like algorithm pseudocode. Real-time editing sync caused rendering glitches across browsers.
Accomplishments that we're proud of Sub-3-second generation covers most common student diagram types accurately. Interactive tutorials match production plugin quality. Free preview access enables instant classroom sharing.
What we learned AI diagram tools need strong prompt normalization for educational use. Client-side rendering scales better than server-heavy approaches. User testing with students reveals edge cases faster than specs.
What's next for Diagora Export to Figma/SVG for homework submission. Quiz mode tests diagram understanding. Multi-diagram workspaces for group projects. Full production release beyond preview by spring 2026.
Log in or sign up for Devpost to join the conversation.