# Best open-source AI repos for drawing diagrams with AI (2026) Source: https://dedupedai.com/best-ai-repos-for/ai-diagrams/ (Deduped, updated 2026-10-29). Markdown twin of the page; JSON: https://dedupedai.com/best-ai-repos-for/ai-diagrams/index.json ## What is the best open-source AI tool for drawing diagrams? The best open-source AI repos for drawing diagrams with AI right now are Next AI Draw.io, Diagram Design and vibeX. Next AI Draw.io is the easiest start: describe the diagram in chat and get an editable draw.io file. Diagram Design makes polished HTML and SVG diagrams in your brand style from a coding agent, and vibeX and QGraphFlow draw diagrams straight from your schema or source code. ## Comparison | Repo | What it does | Best for | Stars | Language | |---|---|---|---|---| | [Next AI Draw.io](https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/) (DayuanJiang/next-ai-draw-io) | Next AI Draw.io lets you create and edit draw.io diagrams by chatting with an AI, as a web app, desktop app and MCP server for Claude Code, Cursor, Codex and VS Code. | Developers, architects and PMs who draw system or process diagrams and want an AI to do the layout. | n/a | TypeScript | | [Diagram Design](https://dedupedai.com/use-cases/cathrynlavery-diagram-design/) (cathrynlavery/diagram-design) | Diagram Design is an agent skill that makes one self-contained HTML and SVG diagram file in a consistent editorial style, matched to your brand. | Developers, writers and teams who need publishable diagrams and already work with an AI coding agent that supports Agent Skills. | 58,715 | HTML | | [vibeX](https://dedupedai.com/use-cases/raja0sama-vibex/) (Raja0sama/vibex) | vibeX is a tool that generates architecture diagrams and checkable docs from your Prisma schema, OpenAPI document, GraphQL SDL, or source code, delivered as one standalone HTML file. | Developers, tech leads, and AI coding agents who need an accurate picture of a codebase's data model, APIs, and service calls, and want docs that fail CI when they drift. | 388 | JavaScript | | [SeeCode](https://dedupedai.com/use-cases/aryanutkarsh-seecode/) (Aryanutkarsh/SeeCode) | SeeCode is a JavaScript tool that turns a short JSON spec into an animated, explorable diagram that an AI coding agent can create and export. | Engineers and team leads who use Claude Code, Cursor, Codex or another Agent Skills host and need architecture or flow diagrams. | 709 | JavaScript | | [QGraphFlow](https://dedupedai.com/use-cases/supermax92-qgraphflow/) (supermax92/qgraphflow) | QGraphFlow is a JavaScript skill that turns source code, schemas, configuration and requirements into interactive software diagrams with source evidence, offline HTML, and SVG or PNG export. | Developers and engineering leads who need to understand, document, or keep an existing codebase's structure and call flows current. | 109 | JavaScript | | [SVG Diagram](https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/) (bybit-exchange/svg-diagram) | A house style and zero-dependency linter that lets a coding agent hand-place SVG diagrams and check them against fixed layout, font, colour and arrow rules. | Developers and technical writers who need SVG diagrams drawn by an agent in one consistent, lint-checked style. | 631 | JavaScript | ## When to pick which ### Next AI Draw.io (DayuanJiang/next-ai-draw-io) Next AI Draw.io lets you create and edit draw.io diagrams by chatting with an AI, as a web app, desktop app and MCP server for Claude Code, Cursor, Codex and VS Code. Best for: Developers, architects and PMs who draw system or process diagrams and want an AI to do the layout. Needs: Node.js; An LLM provider key for the web app. Start here: [Draw a cloud architecture diagram from one sentence](https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/draw-architecture-diagram-from-chat/) (Beginner, 10 minutes) 1. Open the online demo at next-ai-drawio.jiang.jp; nothing to install 2. To lift the demo limit, open settings in the chat panel and enter your own provider and API key 3. Describe the system in one sentence, like the README's example of a highly available web app on AWS across two Availability Zones 4. Select shapes and tell the AI what to change, or edit them by hand like any draw.io file All 3 use cases: https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/ | GitHub: https://github.com/DayuanJiang/next-ai-draw-io ### Diagram Design (cathrynlavery/diagram-design) Diagram Design is an agent skill that makes one self-contained HTML and SVG diagram file in a consistent editorial style, matched to your brand. Best for: Developers, writers and teams who need publishable diagrams and already work with an AI coding agent that supports Agent Skills. Needs: An agent host that reads Agent Skills, such as Claude Code, Codex, Cursor or GitHub Copilot; A terminal that can run npx skills add or the host's plugin commands; A web browser to open the generated .html file. Start here: [Draw an architecture diagram for a doc or post](https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/) (Intermediate, 15 minutes) 1. Install the skill with npx skills add cathrynlavery/diagram-design. 2. Ask your agent in plain words, for example: "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." 3. Check the agent's stated plan for the diagram type it chose. 4. Open the generated .html file by double-clicking it. All 4 use cases: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/ | GitHub: https://github.com/cathrynlavery/diagram-design ### vibeX (Raja0sama/vibex) vibeX is a tool that generates architecture diagrams and checkable docs from your Prisma schema, OpenAPI document, GraphQL SDL, or source code, delivered as one standalone HTML file. Best for: Developers, tech leads, and AI coding agents who need an accurate picture of a codebase's data model, APIs, and service calls, and want docs that fail CI when they drift. Needs: Node.js and npx, for the npx commands in the README; A Prisma schema, OpenAPI document, or GraphQL SDL file in the project, or source code the tool can read; Claude Code or Codex if you want to use vibeX as an agent skill. Start here: [Draw the real data model from a Prisma schema](https://dedupedai.com/use-cases/raja0sama-vibex/draw-data-model-from-prisma-schema/) (Intermediate, 15 minutes) 1. vibex import prisma prisma/schema.prisma docs/db.erd.json 2. vibex validate docs/db.erd.json 3. vibex render docs/db.erd.json --open All 5 use cases: https://dedupedai.com/use-cases/raja0sama-vibex/ | GitHub: https://github.com/Raja0sama/vibex ### SeeCode (Aryanutkarsh/SeeCode) SeeCode is a JavaScript tool that turns a short JSON spec into an animated, explorable diagram that an AI coding agent can create and export. Best for: Engineers and team leads who use Claude Code, Cursor, Codex or another Agent Skills host and need architecture or flow diagrams. Needs: A coding agent that supports Agent Skills, such as Claude Code, Cursor, Codex or OpenCode; Node.js, needed for the command-line SVG export; Chrome or Edge, needed only for command-line PNG, GIF or MP4 export. Start here: [Turn a system description into an interactive architecture diagram](https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/) (Intermediate, 30 minutes) 1. In Claude Code, run /plugin marketplace add Aryanutkarsh/seecode 2. Run /plugin install seecode@seecode 3. Ask your agent: describe the flow in plain words, naming each component and what it calls or writes to 4. Open the generated HTML file in a browser and hover a node to check the connections All 5 use cases: https://dedupedai.com/use-cases/aryanutkarsh-seecode/ | GitHub: https://github.com/Aryanutkarsh/SeeCode ### QGraphFlow (supermax92/qgraphflow) QGraphFlow is a JavaScript skill that turns source code, schemas, configuration and requirements into interactive software diagrams with source evidence, offline HTML, and SVG or PNG export. Best for: Developers and engineering leads who need to understand, document, or keep an existing codebase's structure and call flows current. Needs: Node.js 22 or later; A plugin-capable client such as Claude Code, Codex, Cursor or Qoder, with model access configured; A local checkout of the application project you want to diagram. Start here: [Map an unfamiliar codebase in one offline diagram](https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/) (Intermediate, 30 minutes) 1. Run npx skills add supermax92/qgraphflow to install the q-flow skill. 2. Open your application project in your client and start a new session. 3. In Claude Code, enter /q-flow Help me draw this project. I want to understand it as quickly as possible. 4. Open the generated index.html in your browser and use search, zoom and pan to explore responsibilities and upstream or downstream relationships. All 3 use cases: https://dedupedai.com/use-cases/supermax92-qgraphflow/ | GitHub: https://github.com/supermax92/qgraphflow ### SVG Diagram (bybit-exchange/svg-diagram) A house style and zero-dependency linter that lets a coding agent hand-place SVG diagrams and check them against fixed layout, font, colour and arrow rules. Best for: Developers and technical writers who need SVG diagrams drawn by an agent in one consistent, lint-checked style. Needs: Node.js, since svg-lint is plain Node with no packages; A coding agent that loads skills, such as Claude Code, Codex, Cursor or Gemini CLI; npx, to run the skills install command. Start here: [Draw a flowchart or architecture diagram as lint-clean SVG](https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/) (Intermediate, 30 minutes) 1. Run npx skills add bybit-exchange/svg-diagram -g to install the skill for your agents. 2. Start a new session and ask your agent for a diagram of your system, confirming it announces it is using SVG Diagram. 3. Run node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg (this path applies to a Claude Code install). 4. Fix each finding using its repair line, then rerun the linter until the output shows 0 errors, 0 warnings. All 3 use cases: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/ | GitHub: https://github.com/bybit-exchange/svg-diagram ## Questions ### What is the best open-source AI tool for drawing diagrams? The best open-source AI repos for drawing diagrams with AI right now are Next AI Draw.io, Diagram Design and vibeX. Next AI Draw.io is the easiest start: describe the diagram in chat and get an editable draw.io file. Diagram Design makes polished HTML and SVG diagrams in your brand style from a coding agent, and vibeX and QGraphFlow draw diagrams straight from your schema or source code. ### Which repo for drawing diagrams with AI is easiest to start with? Next AI Draw.io: its starter use case "Draw a cloud architecture diagram from one sentence" is rated Beginner and takes about 10 minutes. ### How do I get started with Next AI Draw.io? Open the online demo at next-ai-drawio.jiang.jp; nothing to install; To lift the demo limit, open settings in the chat panel and enter your own provider and API key; Describe the system in one sentence, like the README's example of a highly available web app on AWS across two Availability Zones. Full steps and a copy-paste agent prompt: https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/draw-architecture-diagram-from-chat/ ### Are these drawing diagrams with AI repos free? They are open-source projects on GitHub (check each license; some, like fair-code projects, limit commercial use). Some also sell a hosted version or need a paid model API key; the requirements for each repo are listed on this page. ### How is this list of drawing diagrams with AI repos chosen? Deduped tracks the hottest AI repos on GitHub and writes step-by-step use cases from each README. For this page we picked the repos that do this job, ordered by fit and then GitHub stars. Repos with a risk flag or a retired page are left out. The page is rebuilt with the site; stars are as of the last build in 2026. Third-party repos we don't own or vouch for. AI-written use cases can be wrong: review everything and run at your own risk.