Diagram Builder

March 24, 2026 · View on GitHub

Interactive diagram MCP App powered by Mermaid.js. The model generates flowcharts, sequence diagrams, class diagrams, and more that render live inside the conversation with streaming support.

Diagram Builder Demo

Try it now

Connect to the hosted instance:

https://lucky-darkness-402ph.run.mcp-use.com/mcp

Or open the Inspector to test it interactively.

Setup on ChatGPT

Open Settings > Apps and Connectors > Advanced Settings and enable Developer Mode
Go to Connectors > Create, name it "Diagram Builder", paste the URL above
In a new chat, click + > More and select the Diagram Builder connector

Setup on Claude

Open Settings > Connectors > Add custom connector
Paste the URL above and save
The Diagram Builder tools will be available in new conversations

Features

Streaming props — diagrams render progressively as the model generates the Mermaid syntax
Multiple diagram types — flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline
Theme support — light and dark mode (Mermaid native themes)
Fullscreen mode — expand diagrams for detailed viewing
Edit support — iteratively refine diagrams with the edit-diagram tool

Tools

Tool	Description
`create-diagram`	Create a diagram from Mermaid syntax with optional title and type hint
`edit-diagram`	Update an existing diagram with new Mermaid syntax

Available Widgets

Widget	Preview
`diagram-view`

Local development

git clone https://github.com/mcp-use/mcp-diagram-builder.git
cd mcp-diagram-builder
npm install
npm run dev

The server starts at http://localhost:3000/mcp with the Inspector at http://localhost:3000/inspector.

Deploy

npx mcp-use deploy

Built with

mcp-use — MCP server framework
Mermaid.js — diagramming library (bundled, no CDN required)

License

MIT