{
 "schema_version": 1,
 "generated": "2026-10-29",
 "url": "https://dedupedai.com/best-ai-repos-for/ai-diagrams/",
 "task": "drawing diagrams with AI",
 "question": "What is the best open-source AI tool for drawing diagrams?",
 "answer": "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.",
 "md": "https://dedupedai.com/best-ai-repos-for/ai-diagrams/index.md",
 "repos": [
  {
   "repo": "DayuanJiang/next-ai-draw-io",
   "title": "Next AI Draw.io",
   "url": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/",
   "github": "https://github.com/DayuanJiang/next-ai-draw-io",
   "what": "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.",
   "who": "Developers, architects and PMs who draw system or process diagrams and want an AI to do the layout.",
   "stars": null,
   "language": "TypeScript",
   "requirements": [
    "Node.js",
    "An LLM provider key for the web app"
   ],
   "uc_count": 3,
   "use_cases": [
    {
     "title": "Draw a cloud architecture diagram from one sentence",
     "url": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/draw-architecture-diagram-from-chat/"
    },
    {
     "title": "Let your coding agent draw draw.io diagrams through MCP",
     "url": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/let-coding-agent-make-diagrams/"
    },
    {
     "title": "Self-host the AI diagram app with your own model",
     "url": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/self-host-ai-diagram-app/"
    }
   ],
   "best": {
    "title": "Draw a cloud architecture diagram from one sentence",
    "url": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/draw-architecture-diagram-from-chat/",
    "difficulty": "Beginner",
    "time": "10 minutes",
    "agents": [],
    "steps": [
     "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",
     "Select shapes and tell the AI what to change, or edit them by hand like any draw.io file",
     "Compare or restore earlier versions if a change goes wrong",
     "Export as .drawio for later edits and .png or .svg for the document"
    ],
    "md": "https://dedupedai.com/use-cases/dayuanjiang-next-ai-draw-io/draw-architecture-diagram-from-chat/index.md"
   }
  },
  {
   "repo": "cathrynlavery/diagram-design",
   "title": "Diagram Design",
   "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/",
   "github": "https://github.com/cathrynlavery/diagram-design",
   "what": "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.",
   "who": "Developers, writers and teams who need publishable diagrams and already work with an AI coding agent that supports Agent Skills.",
   "stars": 58715,
   "language": "HTML",
   "requirements": [
    "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"
   ],
   "uc_count": 4,
   "use_cases": [
    {
     "title": "Draw an architecture diagram for a doc or post",
     "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/"
    },
    {
     "title": "Match diagrams to your site's brand",
     "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/match-diagrams-to-your-site-brand/"
    },
    {
     "title": "Redraw old Mermaid or draw.io diagrams",
     "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/redraw-mermaid-or-drawio-diagrams/"
    }
   ],
   "best": {
    "title": "Draw an architecture diagram for a doc or post",
    "url": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/",
    "difficulty": "Intermediate",
    "time": "15 minutes",
    "agents": [
     "claude-code",
     "codex",
     "cursor",
     "gemini-cli"
    ],
    "steps": [
     "Install the skill with npx skills add cathrynlavery/diagram-design.",
     "Ask your agent in plain words, for example: \"Make me an architecture diagram of my app: frontend, backend, database, Redis cache.\"",
     "Check the agent's stated plan for the diagram type it chose.",
     "Open the generated .html file by double-clicking it.",
     "Ask the agent again to remove or rename nodes, or edit the SVG directly."
    ],
    "md": "https://dedupedai.com/use-cases/cathrynlavery-diagram-design/draw-architecture-diagram-for-a-doc/index.md"
   }
  },
  {
   "repo": "Raja0sama/vibex",
   "title": "vibeX",
   "url": "https://dedupedai.com/use-cases/raja0sama-vibex/",
   "github": "https://github.com/Raja0sama/vibex",
   "what": "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.",
   "who": "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.",
   "stars": 388,
   "language": "JavaScript",
   "requirements": [
    "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"
   ],
   "uc_count": 5,
   "use_cases": [
    {
     "title": "Draw the real data model from a Prisma schema",
     "url": "https://dedupedai.com/use-cases/raja0sama-vibex/draw-data-model-from-prisma-schema/"
    },
    {
     "title": "Map every API endpoint from an OpenAPI document",
     "url": "https://dedupedai.com/use-cases/raja0sama-vibex/map-api-endpoints-from-openapi/"
    },
    {
     "title": "Document a service and fail CI when the docs drift",
     "url": "https://dedupedai.com/use-cases/raja0sama-vibex/document-service-and-fail-ci-on-drift/"
    }
   ],
   "best": {
    "title": "Draw the real data model from a Prisma schema",
    "url": "https://dedupedai.com/use-cases/raja0sama-vibex/draw-data-model-from-prisma-schema/",
    "difficulty": "Intermediate",
    "time": "15 minutes",
    "agents": [
     "claude-code",
     "codex"
    ],
    "steps": [
     "vibex import prisma prisma/schema.prisma docs/db.erd.json",
     "vibex validate docs/db.erd.json",
     "vibex render docs/db.erd.json --open"
    ],
    "md": "https://dedupedai.com/use-cases/raja0sama-vibex/draw-data-model-from-prisma-schema/index.md"
   }
  },
  {
   "repo": "Aryanutkarsh/SeeCode",
   "title": "SeeCode",
   "url": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/",
   "github": "https://github.com/Aryanutkarsh/SeeCode",
   "what": "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.",
   "who": "Engineers and team leads who use Claude Code, Cursor, Codex or another Agent Skills host and need architecture or flow diagrams.",
   "stars": 709,
   "language": "JavaScript",
   "requirements": [
    "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"
   ],
   "uc_count": 5,
   "use_cases": [
    {
     "title": "Turn a system description into an interactive architecture diagram",
     "url": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/"
    },
    {
     "title": "Redraw existing Mermaid or draw.io diagrams in See Code style",
     "url": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/redraw-existing-diagrams-for-a-design-doc/"
    },
    {
     "title": "Export a diagram as SVG, PNG, GIF or MP4 for slides, docs or posts",
     "url": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/export-diagram-for-slides-readme-or-social/"
    }
   ],
   "best": {
    "title": "Turn a system description into an interactive architecture diagram",
    "url": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/",
    "difficulty": "Intermediate",
    "time": "30 minutes",
    "agents": [
     "claude-code",
     "cursor",
     "codex"
    ],
    "steps": [
     "In Claude Code, run /plugin marketplace add Aryanutkarsh/seecode",
     "Run /plugin install seecode@seecode",
     "Ask your agent: describe the flow in plain words, naming each component and what it calls or writes to",
     "Open the generated HTML file in a browser and hover a node to check the connections",
     "Share the HTML file with the team, or keep it as a link"
    ],
    "md": "https://dedupedai.com/use-cases/aryanutkarsh-seecode/explain-system-architecture-as-interactive-html/index.md"
   }
  },
  {
   "repo": "supermax92/qgraphflow",
   "title": "QGraphFlow",
   "url": "https://dedupedai.com/use-cases/supermax92-qgraphflow/",
   "github": "https://github.com/supermax92/qgraphflow",
   "what": "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.",
   "who": "Developers and engineering leads who need to understand, document, or keep an existing codebase's structure and call flows current.",
   "stars": 109,
   "language": "JavaScript",
   "requirements": [
    "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"
   ],
   "uc_count": 3,
   "use_cases": [
    {
     "title": "Map an unfamiliar codebase in one offline diagram",
     "url": "https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/"
    },
    {
     "title": "Trace a business flow as a sequence diagram with source lines",
     "url": "https://dedupedai.com/use-cases/supermax92-qgraphflow/trace-business-flow-sequence/"
    },
    {
     "title": "Fail CI when a committed diagram drifts from the code",
     "url": "https://dedupedai.com/use-cases/supermax92-qgraphflow/keep-diagrams-synced-in-ci/"
    }
   ],
   "best": {
    "title": "Map an unfamiliar codebase in one offline diagram",
    "url": "https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/",
    "difficulty": "Intermediate",
    "time": "30 minutes",
    "agents": [
     "claude-code",
     "codex",
     "cursor"
    ],
    "steps": [
     "Run npx skills add supermax92/qgraphflow to install the q-flow skill.",
     "Open your application project in your client and start a new session.",
     "In Claude Code, enter /q-flow Help me draw this project. I want to understand it as quickly as possible.",
     "Open the generated index.html in your browser and use search, zoom and pan to explore responsibilities and upstream or downstream relationships.",
     "Inspect a few nodes and edges to confirm their source files, lines and symbols before relying on the diagram."
    ],
    "md": "https://dedupedai.com/use-cases/supermax92-qgraphflow/map-unfamiliar-codebase/index.md"
   }
  },
  {
   "repo": "bybit-exchange/svg-diagram",
   "title": "SVG Diagram",
   "url": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/",
   "github": "https://github.com/bybit-exchange/svg-diagram",
   "what": "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.",
   "who": "Developers and technical writers who need SVG diagrams drawn by an agent in one consistent, lint-checked style.",
   "stars": 631,
   "language": "JavaScript",
   "requirements": [
    "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"
   ],
   "uc_count": 3,
   "use_cases": [
    {
     "title": "Draw a flowchart or architecture diagram as lint-clean SVG",
     "url": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/"
    },
    {
     "title": "Lint an existing SVG and read findings as JSON",
     "url": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/lint-svg-and-read-json-findings/"
    },
    {
     "title": "Draw a sequence or data-flow diagram with CJK labels",
     "url": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-cjk-labelled-sequence-diagram/"
    }
   ],
   "best": {
    "title": "Draw a flowchart or architecture diagram as lint-clean SVG",
    "url": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/",
    "difficulty": "Intermediate",
    "time": "30 minutes",
    "agents": [
     "claude-code",
     "codex",
     "cursor",
     "gemini-cli"
    ],
    "steps": [
     "Run npx skills add bybit-exchange/svg-diagram -g to install the skill for your agents.",
     "Start a new session and ask your agent for a diagram of your system, confirming it announces it is using SVG Diagram.",
     "Run node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg (this path applies to a Claude Code install).",
     "Fix each finding using its repair line, then rerun the linter until the output shows 0 errors, 0 warnings."
    ],
    "md": "https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/index.md"
   }
  }
 ]
}