Start free

Mermaid Claude MCP App

The Mermaid Claude MCP App enables Claude to create, validate, and render 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 - from syntax validation to rendering an interactive widget with the diagram, copy functionality, and repair links for invalid syntax.

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


Available Tools

validate_and_render_mermaid_diagram

Validates Mermaid diagram syntax and renders it to an interactive UI widget.

Input Parameters:

ParameterTypeRequiredDescription
diagramCodestringYesThe Mermaid diagram code to validate and render
titlestringNoOptional title for the diagram

Output:

The tool returns structured content containing:

  • title - The diagram title
  • diagramCode - The original Mermaid code
  • valid - Whether the diagram syntax is valid
  • renderedSVG - SVG rendering of the diagram (if valid)
  • renderedPNG - PNG rendering of the diagram (if valid)
  • rawSVG - Raw SVG data
  • diagramType - The detected diagram type (flowchart, sequence, etc.)
  • liveEditUrl - Link to edit the diagram in Mermaid Live
  • error / validationError - Error details if validation fails

Tool Annotations:

  • readOnlyHint: true - Does not modify any data
  • openWorldHint: false - Does not interact with external domains
  • destructiveHint: false - Safe to run without side effects

UI Widget

The app includes an interactive UI widget that displays:

  1. Rendered Diagram - Visual representation of the Mermaid diagram
  2. Copy Code Button - One-click copy of the diagram code
  3. Repair Link - If the diagram is invalid, provides a link to fix it in Mermaid Live

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 validate_and_render_mermaid_diagram tool validates the syntax
  3. If valid, the diagram is rendered as SVG/PNG
  4. The interactive widget displays the result with copy and edit options
  5. If invalid, you get a UI with a link to repair the diagram in Mermaid Live

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”

Claude will automatically use this tool to validate and render your diagram with the interactive widget.


Troubleshooting

If you encounter any issues:

  1. Invalid Syntax - Use the repair link provided in the widget to fix syntax errors in Mermaid Live
  2. Rendering Issues - Ensure your diagram code follows Mermaid syntax guidelines
  3. Copy Not Working - Check that clipboard permissions are enabled for the app

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!