Mermaid Mind

About Mermaid Mind

Mermaid Mind is a powerful, web-based MermaidJS editor enhanced with AI capabilities powered by Google Gemini and Monaco Editor. Whether you’re sketching flowcharts, sequence diagrams, Gantt charts, ER diagrams, class diagrams, pie charts or more, Mermaid Mind makes diagram creation fast, intuitive, and shareable.

• AI-Assisted Generation
  Use natural language prompts to auto-generate Mermaid code for complex diagrams in seconds.
• Live Preview & Theme Customization
  Instantly see your diagram rendered in the browser and switch between light/dark modes or custom themes.
• Pan, Zoom & Export
  Navigate large diagrams with pan & zoom controls, then save a high-resolution PNG to your device.
• Cloud-backed Persistence
  Sign in with your account to save diagrams to MongoDB Atlas via NextAuth, and access them anywhere.
• One-click Sharing
  Publish your diagram to a unique URL—simply copy and share to collaborate with teammates or embed in documentation.

Tech Stack

• Framework & Rendering: Next.js 14, React, TypeScript
• Authentication & State: NextAuth.js, Zustand, Next.js server actions
• UI & Editor: Tailwind CSS, shadcn/ui components, Monaco Editor
• API & Data: tRPC, MongoDB Atlas, Vercel serverless deployment
• AI & Cloud: Google Gemini (Vertex AI), Google Cloud Platform
• Visualization Helpers: MermaidJS, svg-pan-zoom

Credits

• shadcn/ui: Reusable component library for a polished UI
• Monaco Editor: The VS Code–powered editor for code editing
• MongoDB Atlas: Fully managed cloud database for storing diagrams

Author

Built and maintained by Aditya Godse, Data Engineer and open-source enthusiast.
Find more of my projects on GitHub.