mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
feat: Separate SEO content to /about page (best practice)
- Remove header from main page for clean editor-only interface - Create /app/about/page.tsx with comprehensive SEO content (1000+ words) - Add About link next to 'Next-AI-Drawio' title in chat panel - Add GitHub icon link to /about page navigation - Update sitemap.ts to include /about page (priority: 0.8) SEO improvements following industry best practices: - Separate marketing content from app interface (Figma/Canva/Miro approach) - Server-rendered /about page for optimal crawlability - Clean URL structure for better internal linking - Multiple indexable pages for broader keyword coverage - Proper semantic HTML: H1, H2, H3, article, section tags - 1000+ words of keyword-rich content /about page includes: - AI diagram generator overview with value proposition - 6 detailed feature sections (AI creation, AWS diagrams, image replication, etc.) - 3 popular use cases (AWS architecture, flowcharts, system design) - Step-by-step usage guide (4 steps) - Benefits section (save time, precision, free, privacy) - Clear call-to-action with link back to editor - GitHub link in navigation for social proof This follows Google-approved architecture and avoids hidden content penalties.
This commit is contained in:
dayuan.jiang
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>
|
||||
);
|
||||
}
|
||||
@@ -8,5 +8,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
|
||||
changeFrequency: 'weekly',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: 'https://next-ai-drawio.jiang.jp/about',
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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)"
|
||||
|
||||
Reference in New Issue
Block a user