diagram-builder (v1.0.0)

Interactive diagrams — Mermaid in your chat

https://lucky-darkness-402ph.run.mcp-use.com/mcp

Powered by github.com/mcp-use/mcp-use

Installation Guide

Choose your preferred MCP client

Install in Claude Code

Run this command in your terminal:

claude mcp add --transport http "diagram-builder" https://lucky-darkness-402ph.run.mcp-use.com/mcp

Install in Cursor

Click the button below to add this MCP server to Cursor:

Open in Cursor

Or add manually: Settings → MCP → Add server

Install in VS Code

Click the button below to add this MCP server to VS Code:

Open in VS Code

Or add manually: Settings → MCP → Add server

Install in VS Code Insiders

Click the button below to add this MCP server to VS Code Insiders:

Open in VS Code Insiders

Or add manually: Settings → MCP → Add server

Connect with ChatGPT

Enable Developer Mode: Settings → Connectors → Advanced → Developer mode
Import this MCP server: Go to Connectors tab and add: https://lucky-darkness-402ph.run.mcp-use.com/mcp
Use in conversations: Choose the MCP server from the Plus menu

Primitives

Tools (2)

create-diagram

Create an interactive Mermaid diagram. Supports flowchart, sequence, class, state, ER, gantt, pie, mindmap, and timeline diagrams. Pass valid Mermaid syntax and the diagram renders live as you stream.

edit-diagram

Edit the most recent diagram. Provide updated Mermaid syntax to replace the current diagram.

Resources (1)

ui://widget/diagram-view.htmldiagram-view

Interactive Mermaid diagram renderer with live preview