AI-powered flowchart, ERD, and swimlane diagram builder.
AI Charts
AI-powered flowchart, ERD, and swimlane diagram builder.
AI Charts combines a built-in AI assistant for quick chart creation with an MCP server that lets external AI tools like Claude Desktop and Cursor create and manage charts programmatically. It works with any OpenAI-compatible LLM provider — Ollama, OpenAI, or your own endpoint. No vendor lock-in.
Features
- Three chart types — flowcharts, entity-relationship diagrams, and swimlane diagrams
- Built-in AI assistant — setup wizard for new projects and a chart builder mode for iterating on diagrams through conversation
- MCP server — 18+ tools for external AI integration; connect Claude Desktop, Cursor, or any MCP client to create and manage charts programmatically
- Any LLM provider — works with Ollama, OpenAI, or any OpenAI-compatible API
- Import/export — portable ZIP project archives, Mermaid syntax, Markdown summaries, and PDF export
- Auto-layout & validation — ELK-based auto-layout, cycle detection, reachability analysis, and structural validation
- Revision history — full undo/redo with event tracking
- Dark-themed UI — built with React Flow for interactive diagram editing
Quick Start
Prerequisites: Bun and an LLM provider (e.g. Ollama)
git clone https://github.com/tjameswilliams/ai-charts.git
cd ai-charts
bun install
bun run db:push
bun run dev
The app will be available at http://localhost:5174.
LLM Configuration
Configure your LLM provider through the Settings UI in the app. The default configuration points to a local Ollama instance:
| Setting | Default |
|---|---|
| API Base URL | http://localhost:11434/v1 |
| API Key | ollama |
| Model | llama3.2 |
To use OpenAI, set the base URL to https://api.openai.com/v1, add your API key, and choose a model like gpt-4o. Any OpenAI-compatible endpoint works the same way.
MCP Server
AI Charts exposes an MCP server so external AI tools can create and manage charts programmatically.
Run standalone:
bun run mcp
Connect from Claude Desktop — add to your claude_desktop_config.json:
{
"mcpServers": {
"ai-charts": {
"command": "bun",
"args": ["run", "mcp"],
"cwd": "/path/to/ai-charts"
}
}
}
Available tools include: list_projects, create_project, list_charts, create_chart, build_chart, add_node, add_edge, delete_node, delete_edge, resize_nodes, get_nodes, get_chart_status, validate_chart, export_mermaid, export_markdown, and more.
Project Structure
client/ React + Vite frontend
src/
components/ UI components
store/ Zustand state management
api/ API client
server/ Bun + Hono backend
routes/ API endpoints
db/ Drizzle ORM schema & migrations
lib/
llm.ts LLM integration & tool definitions
mcp/ MCP server & client manager
export/ Export utilities (Mermaid, Markdown, PDF)
validation.ts Chart validation
Tech Stack
- Runtime: Bun
- Backend: Hono, SQLite via Drizzle ORM
- Frontend: React 19, React Flow, Zustand, Tailwind CSS 4
- AI: OpenAI-compatible chat completions, Model Context Protocol
- Layout: ELK via elkjs
License
Tools (15)
list_projectsLists all available diagram projects.create_projectCreates a new diagram project.list_chartsLists all charts within a project.create_chartCreates a new chart.build_chartBuilds or updates a chart structure.add_nodeAdds a node to a chart.add_edgeAdds a connection between nodes.delete_nodeRemoves a node from a chart.delete_edgeRemoves a connection from a chart.resize_nodesAdjusts the dimensions of nodes.get_nodesRetrieves the current nodes in a chart.get_chart_statusChecks the current status and validation state of a chart.validate_chartPerforms structural validation on a chart.export_mermaidExports the chart to Mermaid syntax.export_markdownExports the chart to Markdown format.Configuration
{"mcpServers": {"ai-charts": {"command": "bun", "args": ["run", "mcp"], "cwd": "/path/to/ai-charts"}}}