$ show DayuanJiang/next-ai-draw-io
This repository implements an AI-powered diagram generation and editing application that integrates draw.io with large language models. Users describe diagrams in natural language, and the system generates, edits, and validates draw.io XML diagrams through a chat interface. The architecture is a Next.js 16 web application with App Router, supporting multiple AI providers (OpenAI, Anthropic, Google, AWS Bedrock, DeepSeek, Ollama, etc.) via the Vercel AI SDK. It includes a desktop Electron app with offline draw.io support, an MCP server for external AI agent integration (Claude, Cursor, VS Code), and an admin panel for runtime configuration of models, access controls, and observability (Langfuse). The application is self-hostable via Docker and deployable to Vercel or Cloudflare Workers. The core workflow involves a chat interface where users send prompts, optionally upload files (images, PDF, text) or URLs, and the AI responds with tool calls to display, edit, or append diagrams. The system handles streaming XML generation, debounced diagram updates, and automatic XML validation/fixing to correct common LLM output issues. It supports multi-page diagrams, shape libraries (AWS, Azure, GCP, etc.), and experimental VLM-based diagram validation. Session history, templates, and diagram versions are persisted in IndexedDB, with optional server-side quota management via DynamoDB. The codebase demonstrates strong engineering practices with comprehensive unit and E2E tests, CI/CD pipelines, multi-platform builds (web, desktop, MCP server), and i18n support for English, Chinese, and Japanese. It features reusable patterns such as a registry-driven admin settings system, DNS-based SSRF protection, and a standalone XML validation library. While the project is actively maintained and uses modern frameworks, its large dependency surface and complex configuration precedence (env vars, admin panel, file-based) introduce some maintenance overhead.
The LLM identified 4 files worth highlighting for reuse:
Provides a self-contained set of utilities for validating, fixing, and manipulating draw.io XML output from LLMs. Includes `validateAndFixXml` which handles duplicate attributes, unescaped characters, nested mxCells, foreign tags, and trailing wrapper tags. Also includes `applyDiagramOperations` for add/update/delete operations on diagram cells. This module could be extracted into a standalone package for any project needing to clean or programmatically edit draw.io diagrams.
Implements DNS-based SSRF protection for URL fetching. Resolves hostnames to IP addresses and blocks requests to private, loopback, link-local, and multicast IP ranges. Handles IPv4 and IPv6, and includes a whitelist for allowed hosts. This is a reusable security module that can be integrated into any web application that fetches external URLs, demonstrating careful handling of network security edge cases.
A standalone XML validation and auto-fix library used by the MCP server. Uses DOMParser and regex to detect and correct common issues in draw.io XML: duplicate attributes, unescaped characters, tag mismatches, and multi-page support. Includes `validateAndFixXml` and `normalizeToMxfile` functions. This module is decoupled from the MCP server and could be reused in any Node.js project requiring robust XML cleaning for diagram generation.
Implements a registry-driven settings overlay system for the admin panel. Settings are defined in groups with metadata (type, label, description, source), and the system merges values from environment variables and a `data/settings.json` file. Supports secret masking, restart badges, and source indicators. This pattern is reusable for any application needing a flexible, extensible admin configuration UI with multiple value sources.