Build with AI
Your AI, building in livediagram
Connect the AI tool you already use, then ask it for a diagram, a whiteboard or a workshop. It lands in your account, ready to edit together. Set up takes about a minute.
Your AI tool needs one address:
https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpWorks with Claude, ChatGPT, Claude Code, Codex, Gemini CLI, Cursor, VS Code, Windsurf and any MCP client. Free, with a free account you can make while you connect.
How it works
Three steps, about a minute
One address, one approval, then you just ask. There is nothing to install or run on your computer.
Step 1
Add livediagram
Paste the address into your AI tool, or click once in Cursor and VS Code.
Step 2
Approve
A livediagram page opens. Sign in or create a free account, check where access goes, and choose Connect.
Step 3
Ask
Ask for a diagram, a whiteboard or a workshop. It lands in your account, ready to edit and share.
Connect
Pick your AI tool
Step-by-step for the tools people use most. Choose yours, follow the steps, and approve when livediagram asks.
Connect Claude
On the web and the desktop app
Open Settings, then Connectors, in Claude.
Open Claude connectors (opens in a new tab)Choose Add custom connector, name it livediagram and paste the address as its URL.
URLhttps://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpChoose Connect, then approve on the livediagram page that opens.
A connector you add on the web shows up in Claude Desktop too. On a Team or Enterprise plan, an owner may need to add it first.
Connected? Try a promptConnect ChatGPT
Connectors in developer mode
In ChatGPT, open Settings, then Apps & Connectors, then Advanced settings, and switch on Developer mode.
Open ChatGPT settings (opens in a new tab)Choose Create, name it livediagram, paste the address as the MCP server URL and pick OAuth.
URLhttps://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpApprove on the livediagram page that opens, then pick livediagram from the tools menu in a new chat.
Developer mode depends on your ChatGPT plan, and OpenAI moves its menus now and then: look for custom connectors in Settings.
Connected? Try a promptConnect Claude Code
One command in your terminal
Add livediagram for every project:
Terminalclaude mcp add --transport http --scope user livediagram https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpIn a Claude Code session, run /mcp, choose livediagram and Authenticate. Approve in the browser.
In Claude Code/mcp
Working in a repository? The livediagram CLI is another way in, on the same account.
Connected? Try a promptConnect Codex
OpenAI's coding agent
Add the server:
Terminalcodex mcp add livediagram --url https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpSign in, and approve in the browser:
Terminalcodex mcp login livediagram
Prefer config files? Add [mcp_servers.livediagram] with url = "https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcp" to ~/.codex/config.toml.
Connected? Try a promptConnect Gemini CLI
Google's agent in your terminal
Add the server:
Terminalgemini mcp add --transport http livediagram https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpIn Gemini CLI, sign in and approve in the browser:
In Gemini CLI/mcp auth livediagram
Connect Cursor
One click, or one line of config
Add livediagram to Cursor in one click:
Add to CursorOr add it by hand to ~/.cursor/mcp.json:
mcp.json{ "mcpServers": { "livediagram": { "url": "https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcp" } } }In Cursor’s MCP settings, choose to sign in to livediagram, then approve in the browser.
Connect VS Code
GitHub Copilot’s agent mode
Add livediagram to VS Code in one click:
Add to VS CodeOr add it by hand to .vscode/mcp.json:
json{ "servers": { "livediagram": { "type": "http", "url": "https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcp" } } }Start the server when VS Code asks, allow the sign-in, and use it from Copilot Chat in agent mode.
Connect Windsurf
Cascade’s MCP config
In Cascade, open the MCP settings and choose to view the raw config (mcp_config.json).
Add livediagram to it:
json{ "mcpServers": { "livediagram": { "serverUrl": "https://livediagram-mcp.liveworkspace-easing509.workers.dev/mcp" } } }Refresh the servers, then sign in to livediagram and approve in the browser.
Connect Any client
Anything that speaks remote MCP
Add a remote MCP server (HTTP, sometimes called Streamable HTTP) with this address:
URLhttps://livediagram-mcp.liveworkspace-easing509.workers.dev/mcpIf the tool can sign in to servers (OAuth), it finds livediagram’s sign-in by itself: there is no client id or secret to enter.
If it can’t, create an API token in livediagram’s Settings, under Account, API Tokens, and send it as a header:
HeaderAuthorization: Bearer lwt_…
Try it
Your first prompts
Connected? Paste one of these into your AI tool, or ask in your own words. Mentioning livediagram helps it pick the right tool.
Map a codebase
“Read this repository and draw its architecture as a livediagram diagram: the main services, what each one owns, and how requests flow between them.”
Turn steps into a flowchart
“Make a livediagram flowchart of how a new customer signs up, from landing page to first invoice, with a decision for each place they can drop off.”
Plan a launch
“Create a livediagram Gantt chart for launching our new website, with bars for design, copy, build, testing and go-live, and share a link I can send the team.”
Brainstorm an offsite
“Make a livediagram mind map of ideas for our team offsite, with a branch each for the venue, the agenda, the budget and the activities.”
Run a retro
“Set up a livediagram retrospective for our sprint, with what went well, what to improve and actions, and share a participant link so the team can add their notes.”
Find and improve
“Find my livediagram canvas about onboarding, show it to me, and suggest three ways to make it clearer. Make the changes once I agree.”
What it can do
Everything you make in livediagram
Your AI gets the same building blocks you have in the editor, and everything it makes is yours to change.
Diagrams from a sentence
Flowcharts, architecture, org charts, mind maps and state machines. Your AI names the boxes and links; livediagram lays them out. Mermaid works too.
Boards and templates
Retros, roadmaps, SWOT, Gantt charts and more from the template library, filled in with your own content.
Tidy up
Renames canvases, moves the ones you no longer need to the Trash, and restores them again if you change your mind.
Find and read
Searches your canvases and your teams’, and reads any tab back as an outline and a picture.
Share links
Turns a canvas into a link for your team, as a Participant link unless you ask for another role.
Live, and undoable
Changes land on an open canvas as they happen, outlined so you can see them, with Undo one click away.
In your control
Safe to connect
Connecting needs a free livediagram account, so your AI's work is saved to you. The canvas itself never needs one.
You approve every connection
The approval page says exactly which site the access goes to. Nothing connects until you choose Connect.
Read-only, if you prefer
Switch on Read-only access and the AI can find and read your documents, but never change them. Our server enforces it.
Revoke it any time
Each connection is an API token named after the tool, in Settings › Account › API Tokens, and lasts six months. Revoke it and access stops at once.
Your AI does the thinking
livediagram runs no AI model of its own here. It checks, lays out and saves what your tool asks for.
If it doesn't connect
The page says the request has expired
A connection request lasts ten minutes. Start the connection again from your AI tool.
It says I have reached my limit of API tokens
You can have ten unexpired tokens. Revoke one in Settings › Account › API Tokens, then connect again.
My tool keeps asking me to sign in
The token it held may have expired (they last six months) or been revoked. Remove the connection in your tool and add it again.
Still stuck? The Connecting AI Tools guide covers every tool in more depth, or get in touch.