PlanLoom

PlanLoom: A serverless project management platform combining Mermaid diagram editing with Kanban boards and AI-powered user story generation - all running locally in your browser.

Comment 1

Inspiration

Kiro inspired me, but I am a visual thinker and was wondering how I could leverage and improve the spec driven mindset from Kiro. I wanted to create a tool that bridges the gap between visual documentation and agile project management, allowing teams to seamlessly move from technical diagrams to actionable user stories.

What it does

Planloom is a comprehensive (pre) project management (aimed at product managers / product owners) platform that uniquely combines Mermaid diagram editing with Kanban-style project management. It enables teams to create technical documentation through live-preview diagram editing, manage multiple projects with detailed specifications, and track user stories through an intuitive drag-and-drop interface. The platform features AI-powered content generation that can analyze diagrams and automatically create user stories with acceptance criteria, streamlining the transition from design to development.

How we built it

We built Planloom as a React TypeScript application using Vite for fast development. The core architecture leverages IndexedDB for local data persistence, Monaco Editor for syntax-highlighted Mermaid editing, and @dnd-kit for smooth drag-and-drop Kanban functionality. We integrated Mermaid.js for real-time diagram rendering, OpenAI for intelligent content generation, and Radix UI components for a polished, accessible interface. The entire application runs client-side with no server dependencies, ensuring data privacy and offline capability.

Challenges we ran into

The biggest challenge was creating a seamless integration between diagram editing and project management workflows. Synchronizing real-time Mermaid preview with Monaco Editor while maintaining performance required careful state management. Implementing robust local storage with IndexedDB while handling browser limitations and providing data export/import capabilities also presented complexity. Additionally, designing an AI integration that could meaningfully analyze diagram content and generate relevant user stories required extensive prompt engineering and error handling.

Accomplishments that we're proud of

We successfully created a unified platform that bridges visual documentation and agile project management something that doesn't exist in current tools. The real-time Mermaid editing experience with live preview rivals dedicated diagram tools, while the Kanban interface provides enterprise-level project tracking. The AI-powered story generation feature can intelligently parse complex technical diagrams and create comprehensive user stories, dramatically reducing the time from design to backlog creation.

What we learned

We learned that visual thinkers need tools that respect both their creative process and structured project management needs. The importance of local-first architecture became clear users want full control over their data without vendor lock-in. We also discovered that AI can be incredibly powerful for bridging different types of content (diagrams to stories) when properly integrated into existing workflows rather than replacing human decision-making.

What's next for PlanLoom

Next, we plan to add collaborative features through real-time synchronization, expand diagram template libraries, and enhance AI capabilities to suggest project improvements based on diagram analysis. We're also exploring integration with popular development tools like GitHub and Jira, while maintaining our local-first philosophy. Advanced features like automated testing story generation from sequence diagrams and project timeline visualization are also on the roadmap.

Built With

Share this project:

Updates