Enable AI assistants to create, validate, and render Mermaid diagrams seamlessly, plus full integration with your Mermaid Chart account for advanced diagram management.
The official MCP SDK for TypeScript lets Node and edge services call MCP servers directly, with an API key for headless auth.
This guide connects Mermaid Chart MCP to TypeScript through MewCP, so TypeScript can use Mermaid Chart MCP's 34 tools, like validate_and_render_mermaid_diagram, get_diagram_title and get_diagram_summary, without your Mermaid Chart MCP credentials ever reaching the app.
Your Mermaid Chart MCP API key is stored encrypted and injected only at call time. Your agent never holds it, so it can never leak it, log it or paste it into a prompt.
More apps
Manage repositories, pull requests, issues, branches and development workflows on GitHub. Automate software delivery and collaborate across engineering projects.
Connect to external APIs, webhooks and internet services through standard HTTP requests. Build integrations with virtually any platform that exposes a web-based interface.
Turn your AI agent into a creative studio The world's best image, video, audio and 3D models, inside the AI assistant you already use.
Give AI coding agents access to a curated library of real-world website designs, screenshots, design systems, and reusable UI components. Search visual references, find similar designs, analyze layouts, extract colors and typography, compare websites, and retrieve copy-ready JSX components for building better interfaces
Other clients
Mermaid Chart MCP works the same way in every client below. Pick yours for its own guide.
Free to start.
Scope access to the exact Mermaid Chart MCP tools and accounts you allow, work and personal side by side. Anything outside that scope is refused at call time, even when the model asks for it.
Each call is logged: what ran, on which account, and whether it worked. Failures come back structured, so the agent knows whether to retry instead of guessing.
Every app sits behind one secure MCP URL, and there is no server for you to deploy or keep running. Add an integration in the dashboard and it is live on the next call, with no config to change and no new credentials to wire up. Tools load only when a task needs them, so your agent stays fast and focused however many apps you connect.
SDK clients sign in with an API key. Create one in your dashboard and replace API_KEY in the code below.
SDK clients run without a browser, so they sign in with your API key. Needs Node 18+ as an ES module (for example npx tsx script.ts).
SIMPLE RENDER TOOL - Renders Mermaid diagrams directly (Mermaid automatically validates during rendering). If successful, returns diagram image. If Mermaid validation fails, returns error details for fixing. One tool, one call, simple workflow.
Generate a descriptive title for a Mermaid diagram based on its content. This tool analyzes the diagram structure and content to suggest an appropriate title.
Generate a concise summary for a Mermaid diagram based on its content. This tool provides prompts for the LLM to generate a brief summary (2-4 sentences) highlighting the primary flow, key decisions, and outcomes.
Search for available Mermaid icons by provider or name. Returns icons in ready-to-use format with provider prefixes (e.g., 'aws:arch-amazon-ec2'). PERFORMANCE TIP: For faster searches, start with limit=10 and specific queries. If no suitable icons found, increase limit and retry. Supports AWS, Azure, GCP, and FontAwesome icon sets.
Get comprehensive syntax documentation and examples for a specific Mermaid diagram type. Returns the official Mermaid.js documentation with syntax rules, examples, and usage instructions for the requested diagram type.
Lists all available MCP servers and their tools in the workspace.
List all projects in your Mermaid Chart account. REQUIRES OAUTH AUTHENTICATION: MCP client will handle authentication automatically via Mermaid Chart OAuth.
List all diagrams in a specific Mermaid Chart project. REQUIRES OAUTH AUTHENTICATION: MCP client handles authentication automatically.
Create a new diagram in Mermaid Chart. REQUIRES OAUTH AUTHENTICATION: MCP client handles authentication automatically. Use list_mermaid_chart_projects to get project IDs.
Get a diagram from Mermaid Chart by its document ID. REQUIRES AUTHENTICATION: Use authenticate_mermaid_chart first.
Update an existing diagram in Mermaid Chart. REQUIRES AUTHENTICATION: Use authenticate_mermaid_chart first.
Repair a broken Mermaid diagram using Mermaid AI. Requires authentication. Use this tool when you have a Mermaid diagram with syntax errors or rendering issues.
Chat with Mermaid AI to create, modify, or discuss Mermaid diagrams in natural language. Requires authentication. The AI understands your diagram context and can generate updated Mermaid code based on your requests. Each message consumes 1 AI credit from your MermaidChart account.
Get AI credits usage information. Shows remaining and total credits for AI-powered features like diagram repair.
Suggest a pull request title and body (markdown) from the diff between two Mermaid diagram versions (Mermaid AI diagram-diff-summary). Requires authentication. Use when opening a PR that changes a diagram. Consumes Your Mermaid AI credits.
List GitHub repositories for the authenticated user, or for an organization when `org` is set. REQUIRES: `Github-Token` header (HTTP) or `GITHUB_TOKEN` / `GH_TOKEN` in the server environment.
List .mmd Mermaid files in a GitHub repository (code search with tree fallback). REQUIRES: `Github-Token` header (HTTP) or GITHUB_TOKEN / GH_TOKEN.
Read a single .mmd file from a GitHub repository. Only paths ending in .mmd are allowed. REQUIRES: `Github-Token` header (HTTP) or GITHUB_TOKEN / GH_TOKEN.
Create a new branch (git ref), one commit from the base tree with your file changes, then open a pull request in the same repository. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN with `contents: write` (and no existing branch with the same `headBranch` name).
Create or update a single file on a given branch in a GitHub repository. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN with contents write access.
List pull requests for a GitHub repository. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN / GH_TOKEN.
List or resolve branch names. **List mode (default):** one `GET /repos/.../branches?per_page=100&page=1` — at most 100 names, A–Z sorted in the response; `has_more` if a full page was returned. **Resolve mode:** set `branch_name` for a single `GET` branch (404 if missing). At most one GitHub API call. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN / GH_TOKEN.
List issues for a repository (excludes pull requests). REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN / GH_TOKEN.
Create an issue in a GitHub repository. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN with issues write if creating issues in private repos.
List comments on an issue by issue number. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN / GH_TOKEN.
Get all pull request comments: both issue/PR thread comments and inline review comments, with a `type` of `issue_thread` or `review` per item. REQUIRES: `Github-Token` (HTTP) or GITHUB_TOKEN / GH_TOKEN.
Generate a Mermaid flowchart that visualises Jira issue dependency links for a project. Each node shows the ticket key, summary, and status, and is a clickable link to the ticket. Dashed nodes represent issues linked from outside the current filter set.
Generate a Mermaid kanban board from Jira issues. Issues are grouped into columns by their current status and ordered by workflow stage (To Do → In Progress → Done). Each card shows the issue summary and is a clickable link to the ticket, with optional assignee and priority badges.
Generate a Mermaid flowchart centred on a single Jira ticket. Fetches the ticket's subtasks, parent, issue links, and recent comments in one call. The focal ticket is highlighted in indigo; subtasks are grouped in a subgraph; issue links use colour-coded arrows (red thick = blocks, cyan dashed = relates to); comments appear in a rose subgraph.
Generate a Mermaid diagram showing the history of a single Jira ticket using its changelog. Two views are available: - **state**: stateDiagram-v2 showing all status transitions with dates and authors, nodes coloured by status category. - **timeline** (default): Mermaid timeline grouped by month, showing status changes, assignee changes, priority changes, sprint moves, and resolutions.
Extract all Mermaid code blocks from a Notion page. Returns block ID, diagram code, and optional caption for each block.
Retrieve a single Mermaid diagram block by its block ID. Returns the diagram code and optional caption.
Update the Mermaid source code (and optional caption) of an existing mermaid code block by its block ID.
Append a Mermaid diagram as a code block to a Notion page. The block is added at the end of the page content.
