mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-08 12:20:20 +08:00
Khanh Thanhanddayuan.jiang
49bfb51b10
* feat: update about page examples with new diagrams Replace old cloud architecture and cat examples with ResNet50, RAG, Authentication, Agile Scrum, and Open Innovation diagrams. Update all three language versions (EN, CN, JA) for consistency. * fix: correct ResNet50 prompt text and keep prompts in English Update the ResNet50 example prompt to match the actual diagram. Keep all prompt texts in English across CN and JA about pages since prompts are what users type into the AI. * docs: update README examples to match about page Replace GCP, AWS, Azure examples with ResNet50, RAG, Auth, Agile Scrum, and Open Innovation. Keep Animated Transformer and Cat Sketch. Keep prompts in English across all versions. * docs: remove ResNet50 and Agile Scrum examples from READMEs --------- Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>
401 lines
22 KiB
TypeScript
401 lines
22 KiB
TypeScript
import type { Metadata } from "next"
|
||
import Link from "next/link"
|
||
import { FaGithub } from "react-icons/fa"
|
||
import Image from "@/components/image-with-basepath"
|
||
|
||
export const metadata: Metadata = {
|
||
title: "概要 - Next AI Draw.io",
|
||
description:
|
||
"AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。",
|
||
keywords: [
|
||
"AIダイアグラム",
|
||
"draw.io",
|
||
"AWSアーキテクチャ",
|
||
"GCPダイアグラム",
|
||
"Azureダイアグラム",
|
||
"LLM",
|
||
],
|
||
}
|
||
|
||
export default function AboutJA() {
|
||
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"
|
||
>
|
||
エディタ
|
||
</Link>
|
||
<Link
|
||
href="/about/ja"
|
||
className="text-blue-600 font-semibold"
|
||
>
|
||
概要
|
||
</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="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搭載のダイアグラム作成ツール -
|
||
チャット、描画、可視化
|
||
</p>
|
||
</div>
|
||
|
||
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
|
||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-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">
|
||
ByteDance Doubao提供
|
||
</h3>
|
||
</div>
|
||
|
||
{/* Story */}
|
||
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
|
||
<p>
|
||
朗報です！
|
||
<a
|
||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="font-semibold text-blue-600 hover:underline"
|
||
>
|
||
ByteDance Doubao
|
||
</a>
|
||
様のご支援により、デモサイトでは強力な{" "}
|
||
<span className="font-semibold text-amber-700">
|
||
glm-4.7
|
||
</span>{" "}
|
||
モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える{" "}
|
||
<span className="font-semibold text-amber-700">
|
||
50万トークン
|
||
</span>
|
||
が無料でもらえます！
|
||
</p>
|
||
</div>
|
||
|
||
{/* Bring Your Own Key */}
|
||
<div className="text-center">
|
||
<h4 className="text-base font-bold text-gray-900 mb-2">
|
||
自分のAPIキーを使用
|
||
</h4>
|
||
<p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
|
||
お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。
|
||
</p>
|
||
<p className="text-xs text-gray-500 max-w-md mx-auto">
|
||
キーはブラウザのローカルに保存され、サーバーには保存されません。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-gray-700">
|
||
AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
|
||
</p>
|
||
|
||
{/* Features */}
|
||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||
機能
|
||
</h2>
|
||
<ul className="list-disc pl-6 text-gray-700 space-y-2">
|
||
<li>
|
||
<strong>LLM搭載のダイアグラム作成</strong>
|
||
：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
|
||
</li>
|
||
<li>
|
||
<strong>画像ベースのダイアグラム複製</strong>
|
||
：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
|
||
</li>
|
||
<li>
|
||
<strong>ダイアグラム履歴</strong>
|
||
：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
|
||
</li>
|
||
<li>
|
||
<strong>
|
||
インタラクティブなチャットインターフェース
|
||
</strong>
|
||
：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
|
||
</li>
|
||
<li>
|
||
<strong>
|
||
AWSアーキテクチャダイアグラムサポート
|
||
</strong>
|
||
：AWSアーキテクチャダイアグラムの生成を専門的にサポート
|
||
</li>
|
||
<li>
|
||
<strong>アニメーションコネクタ</strong>
|
||
：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
|
||
</li>
|
||
</ul>
|
||
|
||
{/* Examples */}
|
||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||
例
|
||
</h2>
|
||
<p className="text-gray-700 mb-6">
|
||
以下はいくつかのプロンプト例と生成されたダイアグラムです：
|
||
</p>
|
||
|
||
<div className="space-y-8">
|
||
{/* ResNet50 Architecture */}
|
||
<div className="text-center">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||
ResNet50モデルアーキテクチャアニメーション
|
||
</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
<strong>Prompt:</strong> Give me an{" "}
|
||
<strong>animated</strong> architecture diagram
|
||
of the ResNet50 model.
|
||
</p>
|
||
<div className="bg-neutral-950 rounded-lg p-4 inline-block">
|
||
<Image
|
||
src="/resnet50.svg"
|
||
alt="ResNet50モデルアーキテクチャ図"
|
||
width={480}
|
||
height={360}
|
||
className="mx-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Diagram 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">
|
||
RAG技術ダイアグラム
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-4">
|
||
<strong>Prompt:</strong> Generate a RAG
|
||
architecture diagram for{" "}
|
||
<strong>chat application</strong>. Use
|
||
connected diagram for data ingestion
|
||
</p>
|
||
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
|
||
<Image
|
||
src="/rag_prod.svg"
|
||
alt="RAGアーキテクチャ図"
|
||
width={480}
|
||
height={360}
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||
ReactとAWSによる認証
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-4">
|
||
<strong>Prompt:</strong> Generate
|
||
authentication process using React with{" "}
|
||
<strong>AWS</strong>. Use Serverless
|
||
architecture.
|
||
</p>
|
||
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
|
||
<Image
|
||
src="/auth.svg"
|
||
alt="認証アーキテクチャ図"
|
||
width={480}
|
||
height={360}
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||
アジャイルスクラムプロセス
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-4">
|
||
<strong>Prompt:</strong> Generate agile
|
||
scrum workflow diagram for software
|
||
development team.
|
||
</p>
|
||
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
|
||
<Image
|
||
src="/agile_scrum.svg"
|
||
alt="アジャイルスクラム図"
|
||
width={480}
|
||
height={360}
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||
オープンイノベーション
|
||
</h3>
|
||
<p className="text-gray-600 text-sm mb-4">
|
||
<strong>Prompt:</strong> Create
|
||
visualization of Henry Chesbrough's
|
||
Open Innovation model.
|
||
</p>
|
||
<div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
|
||
<Image
|
||
src="/inno.svg"
|
||
alt="オープンイノベーション図"
|
||
width={480}
|
||
height={360}
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* How It Works */}
|
||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||
仕組み
|
||
</h2>
|
||
<p className="text-gray-700 mb-4">
|
||
本アプリケーションは以下の技術を使用しています：
|
||
</p>
|
||
<ul className="list-disc pl-6 text-gray-700 space-y-2">
|
||
<li>
|
||
<strong>Next.js</strong>
|
||
：フロントエンドフレームワークとルーティング
|
||
</li>
|
||
<li>
|
||
<strong>Vercel AI SDK</strong>（<code>ai</code> +{" "}
|
||
<code>@ai-sdk/*</code>
|
||
）：ストリーミングAIレスポンスとマルチプロバイダーサポート
|
||
</li>
|
||
<li>
|
||
<strong>react-drawio</strong>
|
||
：ダイアグラムの表現と操作
|
||
</li>
|
||
</ul>
|
||
<p className="text-gray-700 mt-4">
|
||
ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
|
||
</p>
|
||
|
||
{/* Multi-Provider Support */}
|
||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||
マルチプロバイダーサポート
|
||
</h2>
|
||
<ul className="list-disc pl-6 text-gray-700 space-y-1">
|
||
<li>
|
||
<a
|
||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:underline"
|
||
>
|
||
ByteDance Doubao
|
||
</a>
|
||
</li>
|
||
<li>AWS Bedrock（デフォルト）</li>
|
||
<li>
|
||
OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>
|
||
経由）
|
||
</li>
|
||
<li>Anthropic</li>
|
||
<li>Google AI</li>
|
||
<li>Google Vertex AI</li>
|
||
<li>Azure OpenAI</li>
|
||
<li>Ollama</li>
|
||
<li>OpenRouter</li>
|
||
<li>DeepSeek</li>
|
||
<li>SiliconFlow</li>
|
||
<li>ModelScope</li>
|
||
</ul>
|
||
<p className="text-gray-700 mt-4">
|
||
注：<code>claude-sonnet-4-5</code>
|
||
はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
|
||
</p>
|
||
|
||
{/* Support */}
|
||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||
サポート＆お問い合わせ
|
||
</h2>
|
||
<p className="text-gray-700 mb-4 font-semibold">
|
||
デモサイトのAPIトークン使用を支援してくださった{" "}
|
||
<a
|
||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:underline"
|
||
>
|
||
ByteDance Doubao
|
||
</a>{" "}
|
||
様に、心より感謝申し上げます。
|
||
</p>
|
||
<p className="text-gray-700">
|
||
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
|
||
<a
|
||
href="https://github.com/sponsors/DayuanJiang"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:underline"
|
||
>
|
||
スポンサー
|
||
</a>{" "}
|
||
をご検討ください！
|
||
</p>
|
||
<p className="text-gray-700 mt-2">
|
||
サポートやお問い合わせについては、{" "}
|
||
<a
|
||
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-blue-600 hover:underline"
|
||
>
|
||
GitHubリポジトリ
|
||
</a>{" "}
|
||
でissueを開くか、ご連絡ください：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"
|
||
>
|
||
エディタを開く
|
||
</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 -
|
||
オープンソースAI搭載ダイアグラムジェネレーター
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|