[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3604":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},3604,"next-ai-draw-io","DayuanJiang\u002Fnext-ai-draw-io","DayuanJiang","A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.","https:\u002F\u002Fnext-ai-drawio.jiang.jp\u002F",null,"TypeScript",31815,3320,105,127,0,55,582,2943,301,45,"Apache License 2.0",false,"main",true,[27,28,29],"ai","diagrams","productivity","2026-06-12 02:00:51","# Next AI Draw.io\n\n\u003Cdiv align=\"center\">\n\n**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**\n\nEnglish | [中文](.\u002Fdocs\u002Fcn\u002FREADME_CN.md) | [日本語](.\u002Fdocs\u002Fja\u002FREADME_JA.md)\n\n[![TrendShift](https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F15449)](https:\u002F\u002Fnext-ai-drawio.jiang.jp\u002F)\n\n[![License: Apache 2.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache%202.0-blue.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FApache-2.0)\n[![Next.js](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNext.js-16.x-black)](https:\u002F\u002Fnextjs.org\u002F)\n[![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-19.x-61dafb)](https:\u002F\u002Freact.dev\u002F)\n[![Sponsor](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSponsor-❤-ea4aaa)](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FDayuanJiang)\n\n[![Live Demo](.\u002Fpublic\u002Flive-demo-button.svg)](https:\u002F\u002Fnext-ai-drawio.jiang.jp\u002F)\n\n\u003C\u002Fdiv>\n\nA 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.\n\n> Note: Thanks to \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FDayuanJiang\u002Fnext-ai-draw-io\u002Fmain\u002Fpublic\u002Fdoubao-color.png\" alt=\"\" height=\"20\" \u002F> [ByteDance Doubao](https:\u002F\u002Fwww.volcengine.com\u002Factivity\u002Fcodingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) sponsorship, the demo site now uses the powerful glm-4.7 model!\n\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1\n\n\n\n## Table of Contents\n- [Next AI Draw.io](#next-ai-drawio)\n  - [Table of Contents](#table-of-contents)\n  - [Examples](#examples)\n  - [Features](#features)\n  - [MCP Server](#mcp-server)\n    - [Claude Code CLI](#claude-code-cli)\n  - [Getting Started](#getting-started)\n    - [Try it Online](#try-it-online)\n    - [Desktop Application](#desktop-application)\n    - [Run with Docker](#run-with-docker)\n    - [Installation](#installation)\n  - [Deployment](#deployment)\n    - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)\n    - [Deploy on Vercel](#deploy-on-vercel)\n    - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)\n  - [Multi-Provider Support](#multi-provider-support)\n  - [How It Works](#how-it-works)\n  - [Support \\& Contact](#support--contact)\n  - [FAQ](#faq)\n  - [Star History](#star-history)\n\n## Examples\n\nHere are some example prompts and their generated diagrams:\n\n\u003Cdiv align=\"center\">\n\u003Ctable width=\"100%\">\n  \u003Ctr>\n    \u003Ctd colspan=\"2\" valign=\"top\" align=\"center\">\n      \u003Cstrong>Animated transformer connectors\u003C\u002Fstrong>\u003Cbr \u002F>\n      \u003Cp>\u003Cstrong>Prompt:\u003C\u002Fstrong> Give me a **animated connector** diagram of transformer's architecture.\u003C\u002Fp>\n      \u003Cimg src=\".\u002Fpublic\u002Fanimated_connectors.svg\" alt=\"Transformer Architecture with Animated Connectors\" width=\"480\" \u002F>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd width=\"50%\" valign=\"top\">\n      \u003Cstrong>RAG Technique Diagram\u003C\u002Fstrong>\u003Cbr \u002F>\n      \u003Cp>\u003Cstrong>Prompt:\u003C\u002Fstrong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion\u003C\u002Fp>\n      \u003Cimg src=\".\u002Fpublic\u002Frag_prod.svg\" alt=\"RAG Architecture Diagram\" width=\"480\" \u002F>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\" valign=\"top\">\n      \u003Cstrong>Authentication using React and AWS\u003C\u002Fstrong>\u003Cbr \u002F>\n      \u003Cp>\u003Cstrong>Prompt:\u003C\u002Fstrong> Generate authentication process using React with **AWS**. Use Serverless architecture.\u003C\u002Fp>\n      \u003Cimg src=\".\u002Fpublic\u002Fauth.svg\" alt=\"Authentication Architecture Diagram\" width=\"480\" \u002F>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd width=\"50%\" valign=\"top\">\n      \u003Cstrong>Open Innovation\u003C\u002Fstrong>\u003Cbr \u002F>\n      \u003Cp>\u003Cstrong>Prompt:\u003C\u002Fstrong> Create visualization of Henry Chesbrough's Open Innovation model.\u003C\u002Fp>\n      \u003Cimg src=\".\u002Fpublic\u002Finno.svg\" alt=\"Open Innovation Diagram\" width=\"480\" \u002F>\n    \u003C\u002Ftd>\n    \u003Ctd width=\"50%\" valign=\"top\">\n      \u003Cstrong>Cat sketch\u003C\u002Fstrong>\u003Cbr \u002F>\n      \u003Cp>\u003Cstrong>Prompt:\u003C\u002Fstrong> Draw a cute cat for me.\u003C\u002Fp>\n      \u003Cimg src=\".\u002Fpublic\u002Fcat_demo.svg\" alt=\"Cat Drawing\" width=\"240\" \u002F>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n## Features\n\n-   **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands\n-   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically\n-   **PDF & Text File Upload**: Upload PDF documents and text files to extract content and generate diagrams from existing documents\n-   **AI Reasoning Display**: View the AI's thinking process for supported models (OpenAI o1\u002Fo3, Gemini, Claude, etc.)\n-   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.\n-   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time\n-   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)\n-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization\n\n## MCP Server\n\nUse Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio\u002Fmcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Claude Code CLI\n\n```bash\nclaude mcp add drawio -- npx @next-ai-drawio\u002Fmcp-server@latest\n```\n\nThen ask Claude to create diagrams:\n> \"Create a flowchart showing user authentication with login, MFA, and session management\"\n\nThe diagram appears in your browser in real-time!\n\nSee the [MCP Server README](.\u002Fpackages\u002Fmcp-server\u002FREADME.md) for VS Code, Cursor, and other client configurations.\n\n## Getting Started\n\n### Try it Online\n\nNo installation needed! Try the app directly on our demo site:\n\n[![Live Demo](.\u002Fpublic\u002Flive-demo-button.svg)](https:\u002F\u002Fnext-ai-drawio.jiang.jp\u002F)\n\n\n\n> **Bring Your Own API Key**: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.\n\n### Desktop Application\n\nDownload the native desktop app for your platform from the [Releases page](https:\u002F\u002Fgithub.com\u002FDayuanJiang\u002Fnext-ai-draw-io\u002Freleases):\n\nSupported platforms: Windows, macOS, Linux.\n\n### Run with Docker\n\n[Go to Docker Guide](.\u002Fdocs\u002Fen\u002Fdocker.md)\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FDayuanJiang\u002Fnext-ai-draw-io\ncd next-ai-draw-io\nnpm install\ncp env.example .env.local\n```\n\nSee the [Provider Configuration Guide](.\u002Fdocs\u002Fen\u002Fai-providers.md) for detailed setup instructions for each provider.\n\n2. Run the development server:\n\n```bash\nnpm run dev\n```\n\n3. Open [http:\u002F\u002Flocalhost:6002](http:\u002F\u002Flocalhost:6002) in your browser to see the application.\n\n## Deployment\n\n### Deploy to EdgeOne Pages\n\nYou can deploy with one click using [Tencent EdgeOne Pages](https:\u002F\u002Fpages.edgeone.ai\u002F).\n\nDeploy by this button: \n\n[![Deploy to EdgeOne Pages](https:\u002F\u002Fcdnstatic.tencentcs.com\u002Fedgeone\u002Fpages\u002Fdeploy.svg)](https:\u002F\u002Fedgeone.ai\u002Fpages\u002Fnew?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)\n\nCheck out the [Tencent EdgeOne Pages documentation](https:\u002F\u002Fpages.edgeone.ai\u002Fdocument\u002Fdeployment-overview) for more details.\n\nAdditionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https:\u002F\u002Fpages.edgeone.ai\u002Fdocument\u002Fedge-ai).\n\n### Deploy on Vercel \n\n[![Deploy with Vercel](https:\u002F\u002Fvercel.com\u002Fbutton)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)\n\nThe easiest way to deploy is using [Vercel](https:\u002F\u002Fvercel.com\u002Fnew), the creators of Next.js. Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.\n\nSee the [Next.js deployment documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fdeploying) for more details.\n\n### Deploy on Cloudflare Workers\n\n[Go to Cloudflare Deploy Guide](.\u002Fdocs\u002Fen\u002Fcloudflare-deploy.md)\n\n\n\n## Multi-Provider Support\n\n-   [ByteDance Doubao](https:\u002F\u002Fwww.volcengine.com\u002Factivity\u002Fcodingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)\n-   AWS Bedrock (default)\n-   OpenAI\n-   Anthropic\n-   Google AI\n-   Google Vertex AI\n-   Azure OpenAI\n-   Ollama\n-   OpenRouter\n-   DeepSeek\n-   SiliconFlow\n-   ModelScope\n-   SGLang\n-   Vercel AI Gateway\n\n\nAll providers except AWS Bedrock and OpenRouter support custom endpoints.\n\n📖 **[Detailed Provider Configuration Guide](.\u002Fdocs\u002Fen\u002Fai-providers.md)** - See setup instructions for each provider.\n\n### Server-Side Multi-Model Configuration\n\nAdministrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via `AI_MODELS_CONFIG` environment variable (JSON string) or `ai-models.json` file.\n\n**Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2\u002FR1.\n\nNote that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.\n\n\n## How It Works\n\nThe application uses the following technologies:\n\n-   **Next.js**: For the frontend framework and routing\n-   **Vercel AI SDK** (`ai` + `@ai-sdk\u002F*`): For streaming AI responses and multi-provider support\n-   **react-drawio**: For diagram representation and manipulation\n\nDiagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.\n\n\n## Support & Contact\n\n**Special thanks to [ByteDance Doubao](https:\u002F\u002Fwww.volcengine.com\u002Factivity\u002Fcodingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) for sponsoring the API token usage of the demo site!** Register on the ARK platform to get 500K free tokens for all models!\n\nIf you find this project useful, please consider [sponsoring](https:\u002F\u002Fgithub.com\u002Fsponsors\u002FDayuanJiang) to help me host the live demo site!\n\nFor support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:\n\n-   Email: me[at]jiang.jp\n\n## FAQ\n\nSee [FAQ](.\u002Fdocs\u002Fen\u002FFAQ.md) for common issues and solutions.\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=DayuanJiang\u002Fnext-ai-draw-io&type=date&legend=top-left)](https:\u002F\u002Fwww.star-history.com\u002F#DayuanJiang\u002Fnext-ai-draw-io&type=date&legend=top-left)\n\n---\n","Next AI Draw.io 是一个基于 Next.js 的 Web 应用程序，它将 AI 能力与 draw.io 图表相结合。用户可以通过自然语言命令创建、修改和增强图表，并利用 AI 辅助可视化功能提高工作效率。该应用使用 TypeScript 编写，支持多种部署方式，包括 Vercel 和 Cloudflare Workers 等。核心功能包括通过简单的文本指令生成复杂的图表结构，适用于需要快速制作技术架构图、流程图等场景的专业人士或团队。此外，得益于 ByteDance Doubao 的赞助，当前演示站点采用了强大的 glm-4.7 模型以提供更优质的用户体验。",2,"2026-06-11 02:54:57","top_language"]