mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-05 15:52:33 +08:00
Compare commits
11 Commits
chore/modi
...
docs/updat
| Author | SHA1 | Date | |
|---|---|---|---|
|
663e1c8c77 | ||
|
|
455115935c | ||
|
|
7a6a7eaf7c | ||
|
|
7518285e98 | ||
|
|
5c5da397df | ||
|
|
0385818b98 | ||
|
|
5e5c1fc31c | ||
|
|
50b860bdea | ||
|
|
533b3ccace | ||
|
|
8084905711 | ||
|
|
0dffe8cc20 |
65
README.md
65
README.md
@@ -4,7 +4,7 @@ A next.js web application that integrates AI capabilities with draw.io diagrams.
|
||||
|
||||
https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.app/)
|
||||
Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.app)
|
||||
|
||||
## Features
|
||||
|
||||
@@ -12,8 +12,48 @@ Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.
|
||||
- **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
|
||||
- **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
|
||||
- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
|
||||
- **Smart Editing**: Modify existing diagrams using simple text prompts
|
||||
- **Targeted XML Editing**: AI can now make precise edits to specific parts of diagrams without regenerating the entire XML, making updates faster and more efficient
|
||||
- **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
|
||||
- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
|
||||
|
||||
## **Examples**
|
||||
|
||||
Here are some example prompts and their generated diagrams:
|
||||
|
||||
<div align="center">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>GCP architecture diagram</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
||||
<img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>AWS architecture diagram</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
||||
<img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Azure architecture diagram</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
|
||||
<img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Animated transformer connectors</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
||||
<img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" valign="top" align="center">
|
||||
<strong>Cat sketch prompt</strong><br />
|
||||
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
||||
<img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## How It Works
|
||||
|
||||
@@ -27,18 +67,12 @@ Diagrams are represented as XML that can be rendered in draw.io. The AI processe
|
||||
|
||||
## Multi-Provider Support
|
||||
|
||||
This application supports multiple AI providers, making it easy to deploy with your preferred service. Choose from:
|
||||
|
||||
### Supported Providers
|
||||
|
||||
| Provider | Status | Best For |
|
||||
| ---------------- | ------------ | ------------------------------------------- |
|
||||
| **AWS Bedrock** | ✅ Default | Claude models via AWS infrastructure |
|
||||
| **OpenAI** | ✅ Supported | GPT-4, GPT-5, and reasoning models |
|
||||
| **Anthropic** | ✅ Supported | Direct access to Claude models |
|
||||
| **Google AI** | ✅ Supported | Gemini models with multi-modal capabilities |
|
||||
| **Azure OpenAI** | ✅ Supported | Enterprise OpenAI deployments |
|
||||
| **Ollama** | ✅ Supported | Local/self-hosted open source models |
|
||||
- AWS Bedrock (default)
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
|
||||
Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.
|
||||
|
||||
@@ -115,6 +149,7 @@ public/ # Static assets including example images
|
||||
- [x] Allow the LLM to modify the XML instead of generating it from scratch everytime.
|
||||
- [x] Improve the smoothness of shape streaming updates.
|
||||
- [x] Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama)
|
||||
- [ ] Solve the bug that generation will fail for session that longer than 60s.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
336
app/about/page.tsx
Normal file
336
app/about/page.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "About - AI-Powered Diagram Generator | Next AI Draw.io",
|
||||
description: "Learn about Next AI Draw.io, a free AI-powered diagram creation tool. Create AWS architecture diagrams, flowcharts, and UML diagrams using Claude Sonnet and GPT-4. No login required.",
|
||||
keywords: ["about AI diagram generator", "diagram tool features", "how to create diagrams", "AI drawing tool capabilities", "draw.io integration"],
|
||||
};
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Navigation */}
|
||||
<header className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
|
||||
Next AI Draw.io
|
||||
</Link>
|
||||
<nav className="flex items-center gap-6 text-sm">
|
||||
<Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Editor
|
||||
</Link>
|
||||
<Link href="/about" className="text-blue-600 font-semibold">
|
||||
About
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<FaGithub className="w-5 h-5" />
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<article>
|
||||
{/* Hero Section */}
|
||||
<header className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
AI-Powered Diagram Generator | Create Professional Diagrams Instantly
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Free, open-source diagram creation tool powered by AI. No login required, no installation needed.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Introduction */}
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-4">What is Next AI Draw.io?</h2>
|
||||
<div className="prose prose-lg max-w-none text-gray-700">
|
||||
<p className="mb-4">
|
||||
<strong>Next AI Draw.io</strong> is a free, AI-powered diagram creation tool that integrates seamlessly with draw.io.
|
||||
Generate AWS architecture diagrams, flowcharts, UML diagrams, and technical documentation diagrams using natural language
|
||||
prompts. No login required, no installation needed—start creating professional diagrams instantly in your browser.
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Our intelligent diagram generator uses advanced AI models including <strong>Claude Sonnet</strong> and <strong>GPT-4</strong> to
|
||||
understand your requirements and automatically create properly structured diagrams with appropriate symbols, layouts, and connections.
|
||||
Simply describe what you need, upload reference images, or ask the AI to modify existing diagrams with our targeted XML editing feature.
|
||||
</p>
|
||||
<p>
|
||||
Whether you're a software architect designing system infrastructure, a developer documenting APIs, a business analyst creating
|
||||
process flows, or a student working on technical assignments, Next AI Draw.io makes diagram creation fast, accurate, and effortless.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Features */}
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Key Features</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
AI-Powered Diagram Creation
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Generate diagrams from natural language descriptions using Claude Sonnet or GPT-4.
|
||||
Describe your diagram in plain English, and watch the AI create it with proper symbols,
|
||||
layouts, and connections automatically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
AWS Architecture Diagrams
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Create professional cloud infrastructure diagrams with AWS-style icons and layouts.
|
||||
Perfect for designing EC2 instances, Lambda functions, S3 buckets, RDS databases, VPCs,
|
||||
and complete AWS solution architectures.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
Image-Based Diagram Replication
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Upload existing diagrams or sketches, and the AI will automatically recreate them in draw.io format.
|
||||
Modify uploaded images by describing the changes you want—the AI handles the rest.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
Diagram History & Version Control
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Access previous versions of your diagrams and restore any version from your session history.
|
||||
Never lose work—every AI modification is saved and can be undone with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
Targeted XML Editing
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Precise diagram modifications using intelligent XML manipulation. Unlike full diagram regeneration,
|
||||
targeted edits preserve your existing layout while making specific changes, ensuring consistent
|
||||
and predictable results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
|
||||
<span className="text-blue-600 mr-2">✓</span>
|
||||
Multi-Provider AI Support
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Choose between Claude Sonnet, GPT-4, and other leading AI models for optimal results.
|
||||
Each model has unique strengths—select the one that best fits your diagram complexity and style.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Popular Use Cases</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3">AWS Cloud Architecture</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Design scalable cloud infrastructure with EC2 instances, Lambda functions, S3 storage,
|
||||
RDS databases, and VPC networking. Perfect for solution architects, cloud engineers,
|
||||
and DevOps teams planning AWS deployments.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 italic">
|
||||
Example: "Create an AWS diagram with an Application Load Balancer, two EC2 instances
|
||||
in different availability zones, an RDS database, and an S3 bucket for static assets."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 p-6 rounded-lg border border-green-200">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3">Flowcharts & Process Diagrams</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Create business process flows, decision trees, workflow diagrams, and algorithm flowcharts
|
||||
for documentation, presentations, and process optimization. Ideal for business analysts,
|
||||
project managers, and operations teams.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 italic">
|
||||
Example: "Draw a flowchart for user authentication: check if user exists, verify password,
|
||||
generate JWT token on success, show error message on failure."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 p-6 rounded-lg border border-purple-200">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3">System Design & UML Diagrams</h3>
|
||||
<p className="text-gray-700 mb-4">
|
||||
Generate system architecture diagrams, class diagrams, sequence diagrams, and
|
||||
entity-relationship diagrams for software projects. Essential for software engineers,
|
||||
system designers, and technical documentation.
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 italic">
|
||||
Example: "Create a class diagram for an e-commerce system with User, Product, Order,
|
||||
and Payment classes showing their relationships and key methods."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="mb-12 bg-white p-8 rounded-lg border border-gray-200">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-6">How to Use Next AI Draw.io</h2>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Open the Editor</h3>
|
||||
<p className="text-gray-700">
|
||||
Navigate to the main page and you'll see the draw.io editor with an AI chat panel on the right.
|
||||
No account creation or login required—start immediately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Describe Your Diagram</h3>
|
||||
<p className="text-gray-700">
|
||||
Type your diagram request in natural language. Be as detailed or as general as you like.
|
||||
You can also upload reference images for the AI to analyze and replicate.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">AI Generates Your Diagram</h3>
|
||||
<p className="text-gray-700">
|
||||
The AI processes your request and automatically creates your diagram in seconds.
|
||||
Watch as it appears in the editor with proper symbols, layouts, and connections.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Refine and Export</h3>
|
||||
<p className="text-gray-700">
|
||||
Request modifications using the chat, manually edit in draw.io, or export to PNG, SVG,
|
||||
or XML format. Access diagram history to restore previous versions anytime.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-6">Why Choose Next AI Draw.io?</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">⚡</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Save Time</h3>
|
||||
<p className="text-gray-700">
|
||||
Create complex diagrams in seconds instead of hours. No more dragging, aligning,
|
||||
or searching for the right symbols—AI handles it all.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🎯</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Precision Editing</h3>
|
||||
<p className="text-gray-700">
|
||||
Targeted XML editing ensures changes are precise and predictable, unlike tools
|
||||
that regenerate entire diagrams and lose your layout.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🆓</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Completely Free</h3>
|
||||
<p className="text-gray-700">
|
||||
No subscriptions, no usage limits, no hidden costs. Open-source and free forever.
|
||||
Use it for personal projects, work, or education.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🔒</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
|
||||
<p className="text-gray-700">
|
||||
No account required means your diagrams stay private. Work on sensitive
|
||||
architecture designs without worrying about data storage or privacy policies.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-blue-600 text-white p-8 rounded-lg text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Create Your First AI Diagram?</h2>
|
||||
<p className="text-xl mb-6">
|
||||
Start generating professional diagrams in seconds. No signup required.
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Open Editor
|
||||
</Link>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white border-t border-gray-200 mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="text-center text-gray-600 text-sm">
|
||||
<p className="mb-2">
|
||||
Next AI Draw.io - Free AI-Powered Diagram Generator
|
||||
</p>
|
||||
<p>
|
||||
Perfect for developers, architects, students, and business analysts.
|
||||
Open source. No login required.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -141,6 +141,7 @@ ${lastMessageText}
|
||||
</mxCell>
|
||||
</root>
|
||||
- Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
|
||||
- If you are asked to generate animated connectors, make sure to include "flowAnimation=1" in the style of the connector elements.
|
||||
`,
|
||||
inputSchema: z.object({
|
||||
xml: z.string().describe("XML string to be displayed on draw.io")
|
||||
|
||||
@@ -16,8 +16,49 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Next-AI-Drawio",
|
||||
description: "An AI-powered drawing tool that integrates with draw.io",
|
||||
title: "Next AI Draw.io - AI-Powered Diagram Generator",
|
||||
description: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
|
||||
keywords: ["AI diagram generator", "AWS architecture", "flowchart creator", "draw.io", "AI drawing tool", "technical diagrams", "diagram automation", "free diagram generator", "online diagram maker"],
|
||||
authors: [{ name: "Next AI Draw.io" }],
|
||||
creator: "Next AI Draw.io",
|
||||
publisher: "Next AI Draw.io",
|
||||
metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
|
||||
openGraph: {
|
||||
title: "Next AI Draw.io - AI Diagram Generator",
|
||||
description: "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
|
||||
type: "website",
|
||||
url: "https://next-ai-drawio.jiang.jp",
|
||||
siteName: "Next AI Draw.io",
|
||||
locale: "en_US",
|
||||
images: [
|
||||
{
|
||||
url: "/architecture.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Next AI Draw.io - AI-powered diagram creation tool",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Next AI Draw.io - AI Diagram Generator",
|
||||
description: "Create professional diagrams with AI assistance. Free, no login required.",
|
||||
images: ["/architecture.png"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-video-preview": -1,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
},
|
||||
},
|
||||
icons: {
|
||||
icon: "/favicon.ico",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -25,8 +66,29 @@ export default function RootLayout({
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'SoftwareApplication',
|
||||
name: 'Next AI Draw.io',
|
||||
applicationCategory: 'DesignApplication',
|
||||
operatingSystem: 'Web Browser',
|
||||
description: 'AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.',
|
||||
url: 'https://next-ai-drawio.jiang.jp',
|
||||
offers: {
|
||||
'@type': 'Offer',
|
||||
price: '0',
|
||||
priceCurrency: 'USD',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
|
||||
12
app/robots.ts
Normal file
12
app/robots.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { MetadataRoute } from 'next'
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: '*',
|
||||
allow: '/',
|
||||
disallow: '/api/',
|
||||
},
|
||||
sitemap: 'https://next-ai-drawio.jiang.jp/sitemap.xml',
|
||||
}
|
||||
}
|
||||
18
app/sitemap.ts
Normal file
18
app/sitemap.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { MetadataRoute } from 'next'
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
return [
|
||||
{
|
||||
url: 'https://next-ai-drawio.jiang.jp',
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'weekly',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: 'https://next-ai-drawio.jiang.jp/about',
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -52,23 +52,29 @@ export default function ExamplePanel({
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-2">Try these examples:</p>
|
||||
<div className="flex flex-wrap gap-5">
|
||||
<button
|
||||
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
|
||||
onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
|
||||
>
|
||||
Draw diagram with Animated Connectors
|
||||
</button>
|
||||
<button
|
||||
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
|
||||
onClick={handleReplicateArchitecture}
|
||||
>
|
||||
Create this diagram in aws style
|
||||
Create AWS architecture
|
||||
</button>
|
||||
<button
|
||||
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
|
||||
onClick={handleReplicateFlowchart}
|
||||
>
|
||||
Replicate this flowchart
|
||||
Replicate flowchart
|
||||
</button>
|
||||
<button
|
||||
className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
|
||||
onClick={() => setInput("Draw a cat for me")}
|
||||
>
|
||||
Draw a cat for me
|
||||
Draw a cat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -187,7 +187,7 @@ export function ChatMessageDisplay({
|
||||
src={part.url}
|
||||
width={200}
|
||||
height={200}
|
||||
alt={`file-${index}`}
|
||||
alt={`Uploaded diagram or image for AI analysis`}
|
||||
className="rounded-md border"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
|
||||
@@ -4,6 +4,7 @@ import type React from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
import { PanelRightClose, PanelRightOpen } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import {
|
||||
Card,
|
||||
@@ -226,7 +227,12 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
|
||||
return (
|
||||
<Card className="h-full flex flex-col rounded-none py-0 gap-0">
|
||||
<CardHeader className="p-4 flex flex-row justify-between items-center">
|
||||
<CardTitle>Next-AI-Drawio</CardTitle>
|
||||
<div className="flex items-center gap-3">
|
||||
<CardTitle>Next-AI-Drawio</CardTitle>
|
||||
<Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
About
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ButtonWithTooltip
|
||||
tooltipContent="Hide chat panel (Ctrl+B)"
|
||||
|
||||
@@ -79,7 +79,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
|
||||
<div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
|
||||
<Image
|
||||
src={selectedImage}
|
||||
alt="Preview"
|
||||
alt="Full size preview of uploaded diagram or image"
|
||||
width={1200}
|
||||
height={900}
|
||||
className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
|
||||
|
||||
4
public/animated_connectors.svg
Normal file
4
public/animated_connectors.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 261 KiB |
4
public/aws_demo.svg
Normal file
4
public/aws_demo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 95 KiB |
4
public/azure_demo.svg
Normal file
4
public/azure_demo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 88 KiB |
4
public/cat_demo.svg
Normal file
4
public/cat_demo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
4
public/gcp_demo.svg
Normal file
4
public/gcp_demo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 100 KiB |
Reference in New Issue
Block a user