ai-agent

Next AI Draw Io

Name: Next AI Draw Io
Author: 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 visual…

34,999 stars3,765 forksTypeScriptUpdated 8/18/2026100% free · open source

What it does

A Next.js app that lets you build and edit draw.io diagrams by typing natural‑language commands powered by AI.

When to use it

•You need quick visual prototypes of workflows, org charts, or system diagrams without manual drag‑and‑drop.
•Your team wants to iterate on diagrams by simply describing changes in plain English.
•You want to embed AI‑generated diagram suggestions directly into a web‑based product or internal tool.

Ready-to-paste prompt

Create a flowchart for a user onboarding process with these steps: Sign Up → Email Verification → Profile Completion → Dashboard, and connect them with arrows.

Heads up: The app will fail to generate diagrams until a valid `OPENAI_API_KEY` is set in `.env`; also ensure you run Node 18 or newer, otherwise the OpenAI client crashes.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🔑 Needs an API key

Works after you add credentials — the setup agent will ask you for them.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/next-ai-draw-io && curl -fsSL https://workflowstacks.com/api/skills/next-ai-draw-io/claude-skill -o ~/.claude/skills/next-ai-draw-io/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Next AI Draw Io works

Codeflow

Free to inspect

Next AI Draw Io is a large TypeScript project (~37k lines across 143 code files, plus 35 test files). Setup is light: runs with Docker — add your API keys to .env. Last commit this month, Apache-2.0 license, has a test suite.

Size

Large codebase

~37k lines · 143 code files · ~5 h to skim

Setup

Light setup

Runs with Docker — add your API keys to .env.

Runs on

Node.js · Docker

Needs API keys (.env)

TypeScript 92%JavaScript 6%CSS 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
env.example
The API keys and settings you must provide
4
lib/ai-providers.ts
Inside lib/ — the main logic begins here

What's in each folder

lib/Core code — the actual logic36 files

app/Core code — the actual logic28 files

components/Frontend / UI44 files

packages/Sub-packages / plugins20 files

docs/Documentation51 files

electron/Folder19 files

hooks/Hooks — scripts that auto-run on events5 files

scripts/Helper scripts4 files

READMEHas testsDocumentedCI checksDocker readyApache-2.0 licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🔑 Needs an API key

Works after you add credentials — the setup agent will ask you for them.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/next-ai-draw-io && curl -fsSL https://workflowstacks.com/api/skills/next-ai-draw-io/claude-skill -o ~/.claude/skills/next-ai-draw-io/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

DayuanJiang

Language

TypeScript