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

Related MCP server: fcp-drawio

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:

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

MIT