yunshenwuchuxun/smart-drawio-next
Editable Draw.io diagrams for research and architecture: Next.js web app, Agent Skill, and local MCP server.
What it solves
This project provides a way to generate, edit, and refine professional-grade diagrams (such as flowcharts, architecture diagrams, and UML) directly from natural language prompts or reference images. It eliminates the manual effort of dragging and dropping shapes by automating the creation of editable Draw.io files.
How it works
It integrates a streaming LLM interface with an embedded Draw.io canvas. Users provide a text prompt or an image, and the system generates the corresponding XML diagram structure. The project includes a robust toolchain for post-processing, allowing users to apply style presets, refine layouts, and fix connectors. It also offers an MCP (Model Context Protocol) server and an agent skill, enabling AI agents to programmatically create, validate, and style diagrams.
Who it’s for
It is designed for researchers, developers, and technical writers who need to quickly create or iterate on complex diagrams for documentation, presentations, or technical reports.
Highlights
- Multimodal Generation: Supports both text-to-diagram and image-to-diagram workflows.
- Interactive Editing: Features a side-by-side view with a Monaco code editor for XML/JSON and a live Draw.io canvas.
- Extensive Tooling: Includes a library of 20+ diagram types, 10 built-in themes, and various style packs for one-click visual refinement.
- Agentic Integration: Provides an MCP server and agent skill for integration into automated agent workflows.
- Flexible Deployment: Can be run as a local web application, deployed via Docker, or used as a headless tool for agentic pipelines.
Related
- Project
- Project
- Project
- Project