Text to Mermaid Diagram Converter

A modern web application that converts natural language descriptions into Mermaid diagrams using AI. Built with Next.js 14, TypeScript, Tailwind CSS, and Shadcn UI.

Features

• 🎯 Natural Language to Diagram: Convert text descriptions into professional Mermaid diagrams
• 🎨 Customization Options:
  • Multiple diagram styles (flowchart, sequence, class diagrams)
  • Color themes (black & white, colorful, custom colors)
  • Different orientations (TB, LR, RL, BT)
• 🔄 Real-time Preview: See your diagrams update in real-time as you type
• 💾 Export Options: Download diagrams as PNG, SVG, or copy Mermaid code
• 🎯 AI-Powered: Utilizes Groq API for intelligent diagram generation
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS + Shadcn UI
• AI Integration: Groq API
• Diagram Rendering: Mermaid.js
• UI Components: Radix UI primitives

Getting Started

1. Clone the repository:

git clone https://github.com/anantraj/text2mermaid.git
cd text2mermaid

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env.local file with:

GROQ_API_KEY=your_groq_api_key

4. Run the development server:

npm run dev

Open http://localhost:3000 to start creating diagrams!

Usage

1. Enter your text description in the input area
2. Choose your preferred diagram style and theme
3. The AI will generate a Mermaid diagram based on your description
4. Customize the diagram using the available options
5. Export or copy your diagram

Examples

• Convert text descriptions into:
  • Flowcharts
  • Sequence diagrams
  • Class diagrams
  • Entity Relationship diagrams
  • And more!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.