Mermaid Chart MCP for AI Agents

Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Mermaid Chart MCP or direct API to validate Mermaid syntax, render diagrams as SVG, preview diagrams interactively, and iterate on chart fixes through natural language.

Mermaid Chart MCP logoMermaid Chart MCP
No Auth

Mermaid Chart MCP is a no-auth MCP server for validating Mermaid syntax and rendering diagrams as SVG. Use it to preview, zoom, and iterate on diagrams quickly without wiring up custom rendering code.

1 Tools

Try Mermaid Chart MCP now

Type what you want done — sign in and watch it run live in the Tool Router playground.

TOOL ROUTER PLAYGROUND
Mermaid Chart MCP
Try asking
TOOLS

Supported Tools

Every Mermaid Chart MCP action and event your agent gets out of the box.

Validate and render mermaid diagram

Use this tool to output a Mermaid diagram: - The tool will validate the diagram syntax and render it to a UI widget.

SETUP GUIDE

Connect Mermaid Chart MCP Tool with your Agent

1

Install Composio

typescript
npm install @composio/core ai @ai-sdk/openai @ai-sdk/mcp
Install the Composio SDK for Python or TypeScript
2

Initialize Client and Create Tool Router Session

typescript
import { Composio } from '@composio/core';

const composio = new Composio({ apiKey: 'your-api-key' });
const session = await composio.create('your-user-id');
console.log(`Tool Router session created: ${session.mcp.url}`);
Import and initialize the Composio client, then create a Tool Router session for Mermaid Chart MCP
3

Connect to AI Agent

typescript
import { openai } from '@ai-sdk/openai';
import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp';
import { generateText } from 'ai';

const client = await createMCPClient({
  transport: {
    type: 'http',
    url: session.mcp.url,
    headers: {
      'x-api-key': 'your-composio-api-key',
    },
  },
});

const tools = await client.tools();
const { text } = await generateText({
  model: openai('gpt-4o'),
  tools,
  messages: [{
    role: 'user',
    content: 'Render this Mermaid sequence diagram as SVG and tell me if the syntax is valid: sequenceDiagram\nparticipant User\nparticipant API\nUser->>API: Submit order\nAPI-->>User: Return confirmation'
  }],
  maxSteps: 5,
});

console.log(`Agent: ${text}`);
Use the MCP server with your AI agent (Anthropic Claude or Mastra)
SETUP GUIDE

Connect Mermaid Chart MCP API Tool with your Agent

1

Install Composio

typescript
npm install @composio/openai
Install the Composio SDK
2

Initialize Composio and Create Tool Router Session

typescript
import OpenAI from 'openai';
import { Composio } from '@composio/core';
import { OpenAIResponsesProvider } from '@composio/openai';

const composio = new Composio({
  provider: new OpenAIResponsesProvider(),
});
const openai = new OpenAI({});
const session = await composio.create('your-user-id');
Import and initialize Composio client, then create a Tool Router session
3

Execute Mermaid Chart MCP Tools via Tool Router with Your Agent

typescript
const tools = session.tools;
const response = await openai.responses.create({
  model: 'gpt-4.1',
  tools: tools,
  input: [{
    role: 'user',
    content: 'Validate this Mermaid flowchart syntax and render it as SVG: graph TD; A[User] --> B[Checkout]; B --> C[Payment]; C --> D[Confirmation]'
  }],
});
const result = await composio.provider.handleToolCalls(
  'your-user-id',
  response.output
);
console.log(result);
Get tools from Tool Router session and execute Mermaid Chart MCP actions with your Agent

Why Use Composio?

AI Native Mermaid Chart MCP Integration

  • Supports both Mermaid Chart MCP and direct API based integrations
  • Structured, LLM-friendly schemas so agents can validate Mermaid diagrams without guessing
  • Ready-made tools for syntax checks, SVG rendering, and interactive diagram previews

Managed Auth

  • Mermaid Chart MCP uses no-auth access, so your agents can start validating and rendering diagrams right away
  • No hard-coded API keys or OAuth setup needed for this toolkit
  • Composio still gives you a central place to manage agent access and execution

Agent Optimized Design

  • Tools are shaped for language models, making Mermaid syntax fixes more reliable
  • Agents can move from broken diagram text to a rendered SVG in one flow
  • Comprehensive execution logs show every validation, render, and preview request

Enterprise Grade Security

  • Fine-grained RBAC so you control which agents and users can access Mermaid Chart MCP
  • Scoped access for diagram validation and rendering workflows
  • Full audit trail of agent actions to support review and compliance
FRAMEWORKS

Use Mermaid Chart MCP with any AI Agent Framework

Choose a Framework you want to connect Mermaid Chart MCP with

FAQ

Frequently asked questions

No. Mermaid Chart MCP uses no-auth access, so you don't need to configure OAuth credentials, API keys, or bearer tokens. Composio handles the tool routing layer so your agents can validate Mermaid syntax, render SVG diagrams, and preview charts without custom integration code.

Yes! Composio's Tool Router enables agents to use multiple toolkits. Learn more.

Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. Learn more.

Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.

Start with Mermaid Chart MCP.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Mermaid Chart MCP tool your agent needs.Free to start.

Start building