From 5e5c1fc31c7964245ae56988a3937ee7b19c0d8a Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Sun, 16 Nov 2025 09:04:01 +0900 Subject: [PATCH] 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. --- app/about/page.tsx | 336 ++++++++++++++++++++++++++++++++++++++ app/sitemap.ts | 6 + components/chat-panel.tsx | 8 +- 3 files changed, 349 insertions(+), 1 deletion(-) create mode 100644 app/about/page.tsx diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..b4dd387 --- /dev/null +++ b/app/about/page.tsx @@ -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 ( +
+ {/* Navigation */} +
+
+
+ + Next AI Draw.io + + +
+
+
+ + {/* Main Content */} +
+
+ {/* Hero Section */} +
+

+ AI-Powered Diagram Generator | Create Professional Diagrams Instantly +

+

+ Free, open-source diagram creation tool powered by AI. No login required, no installation needed. +

+
+ + {/* Introduction */} +
+

What is Next AI Draw.io?

+
+

+ Next AI Draw.io 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. +

+

+ Our intelligent diagram generator uses advanced AI models including Claude Sonnet and GPT-4 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. +

+

+ 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. +

+
+
+ + {/* Key Features */} +
+

Key Features

+
+
+

+ ✓ + AI-Powered Diagram Creation +

+

+ 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. +

+
+ +
+

+ ✓ + AWS Architecture Diagrams +

+

+ 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. +

+
+ +
+

+ ✓ + Image-Based Diagram Replication +

+

+ 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. +

+
+ +
+

+ ✓ + Diagram History & Version Control +

+

+ 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. +

+
+ +
+

+ ✓ + Targeted XML Editing +

+

+ 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. +

+
+ +
+

+ ✓ + Multi-Provider AI Support +

+

+ 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. +

+
+
+
+ + {/* Use Cases */} +
+

Popular Use Cases

+
+
+

AWS Cloud Architecture

+

+ 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. +

+

+ 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." +

+
+ +
+

Flowcharts & Process Diagrams

+

+ 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. +

+

+ Example: "Draw a flowchart for user authentication: check if user exists, verify password, + generate JWT token on success, show error message on failure." +

+
+ +
+

System Design & UML Diagrams

+

+ Generate system architecture diagrams, class diagrams, sequence diagrams, and + entity-relationship diagrams for software projects. Essential for software engineers, + system designers, and technical documentation. +

+

+ Example: "Create a class diagram for an e-commerce system with User, Product, Order, + and Payment classes showing their relationships and key methods." +

+
+
+
+ + {/* How It Works */} +
+

How to Use Next AI Draw.io

+
+
+
+ 1 +
+
+

Open the Editor

+

+ 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. +

+
+
+ +
+
+ 2 +
+
+

Describe Your Diagram

+

+ 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. +

+
+
+ +
+
+ 3 +
+
+

AI Generates Your Diagram

+

+ 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. +

+
+
+ +
+
+ 4 +
+
+

Refine and Export

+

+ 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. +

+
+
+
+
+ + {/* Benefits */} +
+

Why Choose Next AI Draw.io?

+
+
+
⚡
+
+

Save Time

+

+ Create complex diagrams in seconds instead of hours. No more dragging, aligning, + or searching for the right symbols—AI handles it all. +

+
+
+ +
+
🎯
+
+

Precision Editing

+

+ Targeted XML editing ensures changes are precise and predictable, unlike tools + that regenerate entire diagrams and lose your layout. +

+
+
+ +
+
🆓
+
+

Completely Free

+

+ No subscriptions, no usage limits, no hidden costs. Open-source and free forever. + Use it for personal projects, work, or education. +

+
+
+ +
+
🔒
+
+

Privacy First

+

+ No account required means your diagrams stay private. Work on sensitive + architecture designs without worrying about data storage or privacy policies. +

+
+
+
+
+ + {/* CTA Section */} +
+

Ready to Create Your First AI Diagram?

+

+ Start generating professional diagrams in seconds. No signup required. +

+ + Open Editor + +
+
+
+ + {/* Footer */} +
+
+
+

+ Next AI Draw.io - Free AI-Powered Diagram Generator +

+

+ Perfect for developers, architects, students, and business analysts. + Open source. No login required. +

+
+
+
+
+ ); +} diff --git a/app/sitemap.ts b/app/sitemap.ts index 5d40b84..1effa2e 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -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, + }, ] } diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx index a8708e5..2eb8f30 100644 --- a/components/chat-panel.tsx +++ b/components/chat-panel.tsx @@ -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 ( - Next-AI-Drawio +
+ Next-AI-Drawio + + About + +