Mermaid Claude MCP App

The Mermaid Claude MCP App enables Claude to create, render, and manage Mermaid diagrams directly within the conversation. When you ask Claude to create a flowchart, sequence diagram, or any other Mermaid diagram, this app handles the entire process automatically - rendering an interactive widget with the diagram, copy functionality, and repair options for invalid syntax. Authenticated users can save, update, and list their personal diagrams.

Server URL: https://chatgpt.mermaid.ai/anthropic/v2/mcp

Available Tools

display_mermaid

Displays a Mermaid diagram in an interactive UI widget. The diagram is rendered client-side in the widget using the Mermaid library.

Input Parameters:

Output:

The tool returns structured content containing:

• viewMode - Always "diagramView"
• title - The diagram title
• diagramCode - The original Mermaid code
• documentID - The document ID (if provided)
• isAuthenticated - Whether the user is signed in
• remainingCredits - AI credits remaining (if authenticated)

Tool Annotations:

• readOnlyHint: true - Does not modify any data
• openWorldHint: false - Does not interact with external domains
• idempotentHint: true - Safe to call multiple times
• destructiveHint: false - No destructive side effects

list_personal_diagrams

Lists the user’s saved Mermaid diagrams from their Mermaid.ai account. Requires authentication.

Input Parameters: None

Output:

The tool returns structured content containing:

• viewMode - Always "listView"
• diagrams - Array of { documentID, title } objects
• totalCount - Total number of diagrams
• isAuthenticated - Whether the user is signed in

Tool Annotations:

• readOnlyHint: true - Does not modify any data
• openWorldHint: false - Does not interact with external domains
• idempotentHint: true - Safe to call multiple times
• destructiveHint: false - No destructive side effects

save_diagram

Saves a new diagram to the user’s Mermaid.ai account. Requires authentication.

Input Parameters:

Output:

The tool returns structured content containing:

• documentID - The new document ID
• projectID - The project ID
• id - The document record ID
• code - The saved diagram code
• title - The diagram title

Tool Annotations:

• readOnlyHint: false - Creates a new document
• openWorldHint: false - Does not interact with external domains
• idempotentHint: false - Each call creates a new document
• destructiveHint: false - Does not overwrite existing data

update_diagram

Updates an existing diagram in the user’s Mermaid.ai account. Requires authentication.

Input Parameters:

Output:

The tool returns structured content containing:

• documentID - The document ID
• projectID - The project ID
• code - The updated diagram code
• title - The diagram title

Tool Annotations:

• readOnlyHint: false - Modifies an existing document
• openWorldHint: false - Does not interact with external domains
• idempotentHint: true - Updating with the same data has no additional effect
• destructiveHint: true - Overwrites existing diagram data

repair_diagram

Attempts to repair an invalid Mermaid diagram using AI. Requires authentication and consumes AI credits if the repair was successful.

Input Parameters:

Output:

The tool returns structured content containing:

• diagramCode - The repaired Mermaid diagram code

Tool Annotations:

• readOnlyHint: false - Consumes AI credits
• openWorldHint: false - Does not interact with external domains
• idempotentHint: false - AI repair may produce different results and consumes credits each call
• destructiveHint: false - Does not overwrite existing data

sign_in

Triggers the OAuth sign-in flow for the user’s Mermaid.ai account.

Input Parameters: None

Output:

Returns a text confirmation of successful sign-in.

Tool Annotations:

• readOnlyHint: false - Establishes an auth session
• openWorldHint: false - Does not interact with external domains
• idempotentHint: true - Signing in multiple times has the same effect
• destructiveHint: false - No destructive side effects

get_diagram_by_url

Returns diagram title and code from the user’s Mermaid account using a URL. Requires authentication.

Input Parameters:

Output:

The tool returns structured content containing:

• documentID - The document ID
• projectID - The project ID
• code - The diagram code
• title - The diagram title

Tool Annotations:

• readOnlyHint: true - Does not modify any data
• openWorldHint: false - Does not interact with external domains
• idempotentHint: true - Safe to call multiple times
• destructiveHint: false - No destructive side effects

UI Widget

The app includes an interactive UI widget that displays:

1. Rendered Diagram - Visual representation of the Mermaid diagram, rendered client-side
2. Copy Code Button - One-click copy of the diagram code
3. Repair Option - If the diagram has a syntax error, offers a repair option
4. Diagram List - Browse and select from saved personal diagrams

Widget Permissions:

• clipboardWrite - Allows copying diagram code to clipboard

How It Works

When you ask Claude to create a Mermaid diagram:

1. Claude generates the Mermaid syntax based on your request
2. The display_mermaid tool sends the code to the interactive widget
3. The widget renders the diagram client-side using the Mermaid library
4. If the diagram has a syntax error, the widget offers a repair option
5. Authenticated users can save diagrams to their Mermaid.ai account and manage them with save_diagram, update_diagram, and list_personal_diagrams

Example Usage

Ask Claude to create any type of Mermaid diagram:

• “Create a flowchart showing the user login process”
• “Make a sequence diagram for an API request flow”
• “Generate a class diagram for a User model”
• “Draw a state diagram for an order lifecycle”
• “Show me my saved diagrams”
• “Save this diagram to my account”

Claude will automatically use the appropriate tool to render, save, or manage your diagrams.

Troubleshooting

If you encounter any issues:

1. Invalid Syntax - Use the repair option in the widget, or ask Claude to use the repair_diagram tool
2. Rendering Issues - Ensure your diagram code follows Mermaid syntax guidelines
3. Copy Not Working - Check that clipboard permissions are enabled for the app
4. Authentication Issues - Use the sign_in tool to re-authenticate with your Mermaid.ai account

For additional help, report issues at Mermaid Chart Issue Tracker.

Ask Claude to create a Mermaid diagram and see it rendered instantly with the interactive widget!