A modern, AI-powered online tool for creating professional UML diagrams with ease
UML Diagram Studio is a cutting-edge, free online tool designed to help developers, software architects, and technical professionals create professional UML (Unified Modeling Language) diagrams effortlessly. Our platform combines the power of AI-assisted code generation with real-time diagram preview, making it the go-to solution for visualizing software architecture, system designs, and complex workflows.
Whether you're working on class diagrams, sequence diagrams, activity diagrams, or state diagrams, UML Diagram Studio provides an intuitive interface that supports PlantUML syntax. Our AI-powered assistant can help you generate diagram code from natural language descriptions, significantly reducing the time and effort required to create comprehensive UML diagrams.
- 🤖 AI-Powered Code Generation - Generate UML diagram code from natural language using advanced AI models
- ⚡ Real-Time Preview - See your diagrams update instantly as you type with live rendering
- 📝 Syntax Support - Full support for PlantUML syntax with syntax highlighting
- 📚 Template Library - Access a curated collection of pre-built diagram templates
- 💾 Auto-Save - Your work is automatically saved to localStorage
- 📤 Export Options - Download your diagrams as PNG or SVG files
- 🎨 Modern UI - Clean, developer-focused design inspired by VS Code and Linear
- 🌓 Dark Mode - Beautiful dark and light themes with smooth transitions
- 📱 Responsive Design - Works seamlessly on desktop and tablet devices
- Resizable Panels - Customize your workspace with draggable panel dividers
- Monaco Editor - Professional code editor with syntax highlighting and IntelliSense
- Chat Assistant - Interactive AI sidebar for diagram generation and assistance
- Error Detection - Real-time error highlighting and validation
- Zoom Controls - Adjust diagram view with zoom and pan functionality
- Template Categories - Organized templates for Class, Sequence, Activity, State, and Use Case diagrams
- 🔍 SEO Optimized - Fully optimized for search engines with proper metadata, structured data, and sitemap
- 📝 Blog Section - Comprehensive tutorials and guides on UML diagrams
- 🖼️ Gallery - Visual examples and detailed guides for different diagram types
- 📧 Email Subscription - Stay updated with new features and tutorials (Resend integration)
- 🤖 AI Crawler Support - Optimized for AI models (GPTBot, ClaudeBot, Google-Extended, etc.)
- 🗺️ Dynamic Sitemap - Automatically generated sitemap with all pages
- 🔗 Internal Linking - Strategic internal linking for better SEO
- Node.js 18+ and npm/yarn/pnpm
- A Groq API key (for AI features) - Get one here (Free tier available)
-
Clone the repository
git clone https://github.com/mubashir-ullah/UML-Diagram.app.git cd UML-Diagram.app -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.localfile in the root directory:GROQ_API_KEY=your_groq_api_key_here GROQ_MODEL=llama-3.1-70b-versatile # Optional, defaults to llama-3.1-70b-versatile # Optional: Email subscription (Resend) RESEND_API_KEY=your_resend_api_key_here RESEND_AUDIENCE_ID=your_audience_id_here # Optional, will be created automatically if not provided
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000
npm run build
npm start-
Start with a Template
- Click the template selector in the top bar
- Choose from categories like Class Diagrams, Sequence Diagrams, etc.
- The template code will be inserted into the editor
-
Edit the Code
- Use the left panel code editor to modify PlantUML syntax
- See real-time preview in the center panel
- Your changes are auto-saved
-
Use AI Assistant
- Click the chat icon to open the AI sidebar
- Describe the diagram you want in natural language
- The AI will generate PlantUML code for you
- Click "Insert to Editor" to use the generated code
-
Export Your Diagram
- Use the export buttons in the top bar
- Choose PNG for raster images or SVG for vector graphics
- Your diagram will download automatically
@startuml
!theme plain
skinparam backgroundColor transparent
title Simple Class Diagram
class User {
-id: string
-username: string
-email: string
+login()
+logout()
}
class Post {
-id: string
-title: string
-content: string
+publish()
+delete()
}
User "1" -- "*" Post : creates
@endumlUML-Diagram.app/
├── app/ # Next.js app directory
│ ├── about/ # About page with SEO
│ ├── api/ # API routes
│ │ ├── chat/ # AI chat endpoint
│ │ ├── compile/ # Diagram compilation
│ │ ├── export/ # Export functionality
│ │ ├── subscribe/ # Email subscription (Resend)
│ │ └── templates/ # Template API
│ ├── blog/ # Blog section
│ │ ├── [slug]/ # Individual blog posts
│ │ └── page.tsx # Blog listing page
│ ├── gallery/ # Gallery section
│ │ ├── [slug]/ # Individual diagram pages
│ │ └── page.tsx # Gallery listing page
│ ├── layout.tsx # Root layout with SEO metadata
│ ├── page.tsx # Main application page
│ ├── robots.ts # Robots.txt configuration
│ └── sitemap.ts # Dynamic sitemap generation
├── components/ # React components
│ ├── chat-sidebar.tsx # AI chat interface
│ ├── code-editor.tsx # Monaco editor wrapper
│ ├── diagram-preview.tsx # Diagram renderer
│ ├── footer.tsx # Footer with email subscription
│ ├── top-bar.tsx # Navigation bar with help dialog
│ └── ui/ # shadcn/ui components
├── lib/ # Utility libraries
│ ├── ai.ts # AI integration
│ ├── groq.ts # Groq API client
│ ├── seo/ # SEO utilities
│ │ └── structured-data.ts # JSON-LD schema generators
│ ├── templates.ts # Diagram templates
│ └── utils.ts # Helper functions
├── shared/ # Shared types and schemas
│ └── schema.ts # Zod schemas and types
└── public/ # Static assets
- Next.js 14 - React framework with App Router
- React 18 - UI library
- TypeScript - Type safety
- Tailwind CSS - Styling
- shadcn/ui - Component library
- Monaco Editor - Code editor
- Framer Motion - Animations
- Groq API - Fast AI-powered code generation (Free tier available)
- PlantUML - Diagram rendering engine
- Resend - Email subscription service (Free tier: 3,000 emails/month)
- Next.js Metadata API - Built-in SEO optimization
- JSON-LD Structured Data - Rich snippets for search engines
- Dynamic Sitemap - Auto-generated XML sitemap
- AI Crawler Support - Optimized for GPTBot, ClaudeBot, Google-Extended
UML Diagram Studio follows a modern developer productivity tool design, inspired by:
- Linear - Clean, focused interface
- VS Code - Familiar developer experience
- Cursor - AI-first interactions
The design prioritizes:
- ⚡ Efficiency - Fast, responsive interactions
- 🎯 Clarity - Clear visual hierarchy
- 💼 Professionalism - Polished, production-ready aesthetics
Contributions are welcome! Whether it's:
- 🐛 Bug fixes
- ✨ New features
- 📝 Documentation improvements
- 🎨 UI/UX enhancements
- 🔧 Performance optimizations
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Please make sure your code follows the existing style and includes tests if applicable.
This project is licensed under the MIT License - see the LICENSE file for details.
Mubashir
- GitHub: @mubashir-ullah
- LinkedIn: Mubashir Ullah
- PlantUML for the powerful diagram syntax
- shadcn for the beautiful component library
- Groq for fast, free AI-powered features
- The open-source community for inspiration and support
If you have any questions, suggestions, or need help:
- 📧 Email: contact@umldiagramstudio.com
- 🐛 Open an Issue
- 💡 Request a Feature
Made with ❤️ by Mubashir
⭐ Star this repo if you find it helpful!