TryMermaid MCP server
The TryMermaid MCP server lets AI assistants such as Claude create, check, read, edit and delete Mermaid diagrams in a TryMermaid account. The assistant writes the Mermaid code; the server checks it against the real Mermaid parser, saves it, and returns links and a PNG image.
At a glance
- Server URL:
https://trymermaid.app/mcp - Transport: Streamable HTTP
- Authentication: OAuth 2.1 with dynamic client registration (claude.ai, Claude Desktop), or an API key sent as a bearer token (Claude Code, Cursor, VS Code)
- Requires: a TryMermaid account on the Pro plan ($9/month)
- Tools: 9 (6 read-only, 3 write)
Connect in Claude (claude.ai and Claude Desktop)
- Go to Customize → Connectors.
- Click +, then Add custom connector.
- Enter
https://trymermaid.app/mcpand click Add. - In the window that opens, sign in to TryMermaid and click Allow on the consent screen.
No API key is needed; access is granted through OAuth and can be revoked at any time under Connected apps in your dashboard. The consent screen only allows Pro accounts to connect.
Connect with an API key
Every other client uses an API key. Create one in your dashboard under MCP connectors. It starts
with tm_live_ and is shown only once; replace tm_live_YOUR_KEY below with
it. Never commit a file containing your key.
Jump to your client:
Claude Code
Run in a terminal:
claude mcp add --transport http --scope user trymermaid https://trymermaid.app/mcp \
--header "Authorization: Bearer tm_live_YOUR_KEY" Drop --scope user to add it to the current project only.
Xcode does not yet document remote MCP servers for its agents. This uses the same format as Claude Code, which Xcode’s Claude Agent is built on. If it does not load, tell us.
VS Code (GitHub Copilot)
Add to .vscode/mcp.json in your project, or run “MCP: Open User Configuration” for all projects:
{
"inputs": [
{ "type": "promptString", "id": "trymermaid-key", "description": "TryMermaid API key", "password": true }
],
"servers": {
"trymermaid": {
"type": "http",
"url": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer ${input:trymermaid-key}" }
}
}
} VS Code uses the key "servers", not "mcpServers", and asks for your key the first time it connects.
Cursor
Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project):
{
"mcpServers": {
"trymermaid": {
"url": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer ${env:TRYMERMAID_API_KEY}" }
}
}
} Set the TRYMERMAID_API_KEY environment variable so the key stays out of the file.
Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"trymermaid": {
"serverUrl": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer ${env:TRYMERMAID_API_KEY}" }
}
}
} Windsurf uses "serverUrl", not "url". Set the TRYMERMAID_API_KEY environment variable.
Google Antigravity
In the agent panel, open the … menu, choose MCP Servers → Manage MCP Servers → View raw config, and add (the file is ~/.gemini/config/mcp_config.json):
{
"mcpServers": {
"trymermaid": {
"serverUrl": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer tm_live_YOUR_KEY" }
}
}
} Antigravity uses "serverUrl". The same file is shared by the Antigravity IDE and CLI.
Zed
Add to your Zed settings.json:
{
"context_servers": {
"trymermaid": {
"url": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer tm_live_YOUR_KEY" }
}
}
} Leave out "headers" and Zed signs you in with OAuth instead, with no key needed. You can also use Settings → AI → MCP Servers → Add Remote Server.
JetBrains IDEs (IntelliJ, PyCharm, WebStorm…)
In Settings → Tools → AI Assistant → Model Context Protocol (MCP), add a server as JSON:
{
"mcpServers": {
"trymermaid": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://trymermaid.app/mcp", "--header", "Authorization:${AUTH_HEADER}"],
"env": { "AUTH_HEADER": "Bearer tm_live_YOUR_KEY" }
}
}
} JetBrains does not document authentication headers for remote servers, so this uses the mcp-remote bridge, which needs Node.js installed.
Xcode (Claude Agent)
Add to ~/Library/Developer/Xcode/CodingAssistant/ClaudeAgentConfig/.claude.json:
{
"mcpServers": {
"trymermaid": {
"type": "http",
"url": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer tm_live_YOUR_KEY" }
}
}
} Restart Xcode, then type /context in the agent panel to check that TryMermaid loaded.
Xcode (Codex)
Add to ~/Library/Developer/Xcode/CodingAssistant/codex/config.toml:
[mcp_servers.trymermaid]
url = "https://trymermaid.app/mcp"
http_headers = { "Authorization" = "Bearer tm_live_YOUR_KEY" } The key is written directly because Xcode, as an app, does not see environment variables set in your shell. Restart Xcode after saving.
Xcode does not yet document remote MCP servers for its agents. This uses the standard Codex format. If it does not load, tell us.
Cline
Click the MCP Servers icon in the Cline panel, open Configure → Configure MCP Servers, and add to cline_mcp_settings.json:
{
"mcpServers": {
"trymermaid": {
"type": "streamableHttp",
"url": "https://trymermaid.app/mcp",
"headers": { "Authorization": "Bearer tm_live_YOUR_KEY" }
}
}
} Cline needs "type": "streamableHttp" for remote servers.
Gemini CLI
Run in a terminal:
gemini mcp add --transport http --header "Authorization: Bearer tm_live_YOUR_KEY" trymermaid https://trymermaid.app/mcp Or add "trymermaid": { "httpUrl": "…", "headers": { … } } to ~/.gemini/settings.json. Gemini CLI uses "httpUrl".
OpenAI Codex (CLI and IDE extension)
Run in a terminal:
codex mcp add trymermaid --url https://trymermaid.app/mcp --bearer-token-env TRYMERMAID_API_KEY Set the TRYMERMAID_API_KEY environment variable before starting Codex. This writes to ~/.codex/config.toml.
Any other MCP client
Use the URL above, or bridge it through a local command:
npx -y mcp-remote https://trymermaid.app/mcp --header "Authorization: Bearer tm_live_YOUR_KEY" If your client supports remote servers, give it the URL and an Authorization: Bearer header. If it only runs local commands, use this mcp-remote bridge (needs Node.js). Without --header, mcp-remote signs you in with OAuth instead.
Tools
Read-only
These change nothing and are annotated readOnlyHint: true.
| Tool | Title | What it does |
|---|---|---|
trymermaid_list_diagrams | List saved diagrams | Titles, IDs and links of your saved diagrams, with an optional title filter. |
trymermaid_get_diagram | Read a saved diagram | One diagram’s Mermaid code, settings and links. |
trymermaid_validate_diagram | Check Mermaid syntax | Parses code with the real Mermaid parser and returns the exact error, line and column. Stores nothing. |
trymermaid_preview_diagram | Get links and an image | Edit, view and embed links plus a PNG image URL for a diagram, without saving it. |
trymermaid_list_diagram_types | List diagram types | The diagram types TryMermaid documents and what each is for. |
trymermaid_get_diagram_type | Get syntax for a type | The syntax table and a worked example for one diagram type. |
Write
update and delete are annotated destructiveHint: true,
so Claude asks before running them. create only adds data.
| Tool | Title | What it does |
|---|---|---|
trymermaid_create_diagram | Save a new diagram | Validates, then saves a new diagram. Adds data only. |
trymermaid_update_diagram | Update a saved diagram | Replaces a diagram’s code, title or settings. Canvas positions you set by hand are kept. Claude asks before running it. |
trymermaid_delete_diagram | Delete a saved diagram | Permanently deletes a diagram. Claude asks before running it. |
Try it
Once connected, ask Claude:
- “Draw a Mermaid flowchart of a signup process, check it, and save it as Signup flow.”
- “List my TryMermaid diagrams.”
- “Add a password-reset branch to Signup flow.”
- “Give me a PNG link for a sequence diagram of a login, without saving it.”
- “Which Mermaid diagram type suits a release history? Show me its syntax.”
Saved diagrams appear in your dashboard and open in the TryMermaid editor, where flowcharts can also be edited on a drag-and-drop canvas.
Permissions and data
- The server can only reach diagrams in the account that authorised it. It has no access to other users’ data.
- It receives only what the assistant sends in each tool call, such as diagram code and titles. It does not receive or store your conversation.
- API keys and OAuth tokens are stored only as hashes. OAuth access tokens expire after one hour.
- PNG and SVG links are served by mermaid.ink, a third-party renderer; the diagram content is encoded in the link.
Full details are in the privacy policy.
Limits
- Diagram code up to 100,000 characters per call.
- Image links are omitted for diagrams too large to fit in a URL; the edit and view links still work.
- 100 requests per minute per key or connection.
Troubleshooting
- “Your TryMermaid credential is invalid, expired or revoked” — create a new key, or reconnect the connector.
- “API keys and MCP access are a Pro feature” — the account is on the Free plan. Upgrade on the pricing page.
- A diagram fails to save — the code did not parse. The error names the line and column; the assistant usually fixes it and retries.
Disconnect
Revoke an API key or disconnect a connected app from your dashboard; access stops immediately. You can also remove the connector in your AI client.
Support
Email [email protected]. For a walkthrough with a live example, see How to generate Mermaid diagrams with Claude.