mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
ac09f9f8f9
- Redesign usage limits card with gradient border and modern styling - Remove emojis and combine title/subtitle on same line - Make all 3 language pages (EN/CN/JP) consistent in design - Update text content with exact localized wording - Add warning triangle icon in chat panel linking to about page - Add 'Learn more' link in quota limit toast - Open about page links in new tab to preserve diagram state
460 lines
23 KiB
TypeScript
460 lines
23 KiB
TypeScript
import type { Metadata } from "next"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { FaGithub } from "react-icons/fa"
|
|
|
|
export const metadata: Metadata = {
|
|
title: "About - Next AI Draw.io",
|
|
description:
|
|
"AI-Powered Diagram Creation Tool - Chat, Draw, Visualize. Create AWS, GCP, and Azure architecture diagrams with natural language.",
|
|
keywords: [
|
|
"AI diagram",
|
|
"draw.io",
|
|
"AWS architecture",
|
|
"GCP diagram",
|
|
"Azure diagram",
|
|
"LLM",
|
|
],
|
|
}
|
|
|
|
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-4xl 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-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<article className="prose prose-lg max-w-none">
|
|
{/* Title */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
|
Next AI Draw.io
|
|
</h1>
|
|
<p className="text-xl text-gray-600 font-medium">
|
|
AI-Powered Diagram Creation Tool - Chat, Draw,
|
|
Visualize
|
|
</p>
|
|
<div className="flex justify-center gap-4 mt-4 text-sm">
|
|
<Link
|
|
href="/about"
|
|
className="text-blue-600 font-semibold"
|
|
>
|
|
English
|
|
</Link>
|
|
<span className="text-gray-400">|</span>
|
|
<Link
|
|
href="/about/cn"
|
|
className="text-gray-600 hover:text-blue-600"
|
|
>
|
|
中文
|
|
</Link>
|
|
<span className="text-gray-400">|</span>
|
|
<Link
|
|
href="/about/ja"
|
|
className="text-gray-600 hover:text-blue-600"
|
|
>
|
|
日本語
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
|
|
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
|
|
{/* Header */}
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-bold text-gray-900 tracking-tight">
|
|
Usage Limits & Scaling{" "}
|
|
<span className="text-sm text-amber-600 font-medium italic font-normal">
|
|
(Or: Why My Wallet is Crying)
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Story */}
|
|
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
|
|
<p>
|
|
The response to this project has been
|
|
incredible—you all love making diagrams!
|
|
However, this enthusiasm means we are
|
|
frequently hitting the AI API rate limits
|
|
(TPS/TPM). When this happens, the system
|
|
pauses, leading to failed requests.
|
|
</p>
|
|
<p>
|
|
As an{" "}
|
|
<span className="font-semibold text-amber-700">
|
|
indie developer
|
|
</span>
|
|
, I am currently footing the entire API
|
|
bill. To keep the lights on and ensure the
|
|
service remains available to everyone
|
|
without sending me into debt, I have
|
|
implemented the following temporary caps:
|
|
</p>
|
|
</div>
|
|
|
|
{/* Limits Cards */}
|
|
<div className="grid grid-cols-2 gap-3 mb-5">
|
|
<div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
|
|
<div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
|
|
Token Usage
|
|
</div>
|
|
<div className="text-lg font-bold text-gray-900">
|
|
50k
|
|
<span className="text-sm font-normal text-gray-600">
|
|
/min
|
|
</span>
|
|
</div>
|
|
<div className="text-lg font-bold text-gray-900">
|
|
500k
|
|
<span className="text-sm font-normal text-gray-600">
|
|
/day
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
|
|
<div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
|
|
Daily Requests
|
|
</div>
|
|
<div className="text-2xl font-bold text-gray-900">
|
|
20
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
requests
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="flex items-center gap-3 my-5">
|
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
|
|
</div>
|
|
|
|
{/* Sponsorship CTA */}
|
|
<div className="text-center">
|
|
<h4 className="text-base font-bold text-gray-900 mb-2">
|
|
Call for Sponsorship
|
|
</h4>
|
|
<p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
|
|
Scaling the backend is the only way to
|
|
remove these limits. I am actively seeking
|
|
sponsorship from AI API providers or Cloud
|
|
Platforms.
|
|
</p>
|
|
<p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
|
|
In return for support (credits or funding),
|
|
I will prominently feature your company as a
|
|
platform sponsor on both the GitHub
|
|
repository and the live demo site.
|
|
</p>
|
|
<a
|
|
href="mailto:me@jiang.jp"
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
|
|
>
|
|
Contact Me
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-700">
|
|
A Next.js web application that integrates AI
|
|
capabilities with draw.io diagrams. Create, modify, and
|
|
enhance diagrams through natural language commands and
|
|
AI-assisted visualization.
|
|
</p>
|
|
|
|
{/* Features */}
|
|
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
|
Features
|
|
</h2>
|
|
<ul className="list-disc pl-6 text-gray-700 space-y-2">
|
|
<li>
|
|
<strong>LLM-Powered Diagram Creation</strong>:
|
|
Leverage Large Language Models to create and
|
|
manipulate draw.io diagrams directly through natural
|
|
language commands
|
|
</li>
|
|
<li>
|
|
<strong>Image-Based Diagram Replication</strong>:
|
|
Upload existing diagrams or images and have the AI
|
|
replicate and enhance them automatically
|
|
</li>
|
|
<li>
|
|
<strong>Diagram History</strong>: Comprehensive
|
|
version control that tracks all changes, allowing
|
|
you to view and restore previous versions of your
|
|
diagrams before the AI editing
|
|
</li>
|
|
<li>
|
|
<strong>Interactive Chat Interface</strong>:
|
|
Communicate with AI to refine your diagrams in
|
|
real-time
|
|
</li>
|
|
<li>
|
|
<strong>AWS Architecture Diagram Support</strong>:
|
|
Specialized support for generating AWS architecture
|
|
diagrams
|
|
</li>
|
|
<li>
|
|
<strong>Animated Connectors</strong>: Create dynamic
|
|
and animated connectors between diagram elements for
|
|
better visualization
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Examples */}
|
|
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
|
Examples
|
|
</h2>
|
|
<p className="text-gray-700 mb-6">
|
|
Here are some example prompts and their generated
|
|
diagrams:
|
|
</p>
|
|
|
|
<div className="space-y-8">
|
|
{/* Animated Transformer */}
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
Animated Transformer Connectors
|
|
</h3>
|
|
<p className="text-gray-600 mb-4">
|
|
<strong>Prompt:</strong> Give me an{" "}
|
|
<strong>animated connector</strong> diagram of
|
|
transformer's architecture.
|
|
</p>
|
|
<Image
|
|
src="/animated_connectors.svg"
|
|
alt="Transformer Architecture with Animated Connectors"
|
|
width={480}
|
|
height={360}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
{/* Cloud Architecture Grid */}
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
GCP Architecture Diagram
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4">
|
|
<strong>Prompt:</strong> Generate a GCP
|
|
architecture diagram with{" "}
|
|
<strong>GCP icons</strong>. Users connect to
|
|
a frontend hosted on an instance.
|
|
</p>
|
|
<Image
|
|
src="/gcp_demo.svg"
|
|
alt="GCP Architecture Diagram"
|
|
width={400}
|
|
height={300}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
AWS Architecture Diagram
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4">
|
|
<strong>Prompt:</strong> Generate an AWS
|
|
architecture diagram with{" "}
|
|
<strong>AWS icons</strong>. Users connect to
|
|
a frontend hosted on an instance.
|
|
</p>
|
|
<Image
|
|
src="/aws_demo.svg"
|
|
alt="AWS Architecture Diagram"
|
|
width={400}
|
|
height={300}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
Azure Architecture Diagram
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4">
|
|
<strong>Prompt:</strong> Generate an Azure
|
|
architecture diagram with{" "}
|
|
<strong>Azure icons</strong>. Users connect
|
|
to a frontend hosted on an instance.
|
|
</p>
|
|
<Image
|
|
src="/azure_demo.svg"
|
|
alt="Azure Architecture Diagram"
|
|
width={400}
|
|
height={300}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<div className="text-center">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
Cat Sketch
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4">
|
|
<strong>Prompt:</strong> Draw a cute cat for
|
|
me.
|
|
</p>
|
|
<Image
|
|
src="/cat_demo.svg"
|
|
alt="Cat Drawing"
|
|
width={240}
|
|
height={240}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* How It Works */}
|
|
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
|
How It Works
|
|
</h2>
|
|
<p className="text-gray-700 mb-4">
|
|
The application uses the following technologies:
|
|
</p>
|
|
<ul className="list-disc pl-6 text-gray-700 space-y-2">
|
|
<li>
|
|
<strong>Next.js</strong>: For the frontend framework
|
|
and routing
|
|
</li>
|
|
<li>
|
|
<strong>Vercel AI SDK</strong> (<code>ai</code> +{" "}
|
|
<code>@ai-sdk/*</code>): For streaming AI responses
|
|
and multi-provider support
|
|
</li>
|
|
<li>
|
|
<strong>react-drawio</strong>: For diagram
|
|
representation and manipulation
|
|
</li>
|
|
</ul>
|
|
<p className="text-gray-700 mt-4">
|
|
Diagrams are represented as XML that can be rendered in
|
|
draw.io. The AI processes your commands and generates or
|
|
modifies this XML accordingly.
|
|
</p>
|
|
|
|
{/* Multi-Provider Support */}
|
|
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
|
Multi-Provider Support
|
|
</h2>
|
|
<ul className="list-disc pl-6 text-gray-700 space-y-1">
|
|
<li>AWS Bedrock (default)</li>
|
|
<li>
|
|
OpenAI / OpenAI-compatible APIs (via{" "}
|
|
<code>OPENAI_BASE_URL</code>)
|
|
</li>
|
|
<li>Anthropic</li>
|
|
<li>Google AI</li>
|
|
<li>Azure OpenAI</li>
|
|
<li>Ollama</li>
|
|
<li>OpenRouter</li>
|
|
<li>DeepSeek</li>
|
|
</ul>
|
|
<p className="text-gray-700 mt-4">
|
|
Note that <code>claude-sonnet-4-5</code> has trained on
|
|
draw.io diagrams with AWS logos, so if you want to
|
|
create AWS architecture diagrams, this is the best
|
|
choice.
|
|
</p>
|
|
|
|
{/* Support */}
|
|
<div className="flex items-center gap-4 mt-10 mb-4">
|
|
<h2 className="text-2xl font-semibold text-gray-900">
|
|
Support & Contact
|
|
</h2>
|
|
<iframe
|
|
src="https://github.com/sponsors/DayuanJiang/button"
|
|
title="Sponsor DayuanJiang"
|
|
height="32"
|
|
width="114"
|
|
style={{ border: 0, borderRadius: 6 }}
|
|
/>
|
|
</div>
|
|
<p className="text-gray-700">
|
|
If you find this project useful, please consider{" "}
|
|
<a
|
|
href="https://github.com/sponsors/DayuanJiang"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
sponsoring
|
|
</a>{" "}
|
|
to help host the live demo site!
|
|
</p>
|
|
<p className="text-gray-700 mt-2">
|
|
For support or inquiries, please open an issue on the{" "}
|
|
<a
|
|
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
GitHub repository
|
|
</a>{" "}
|
|
or contact: me[at]jiang.jp
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<div className="mt-12 text-center">
|
|
<Link
|
|
href="/"
|
|
className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
|
|
>
|
|
Open Editor
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-white border-t border-gray-200 mt-16">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<p className="text-center text-gray-600 text-sm">
|
|
Next AI Draw.io - Open Source AI-Powered Diagram
|
|
Generator
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|