graphviz-mcp

Graphviz MCP App

Turn descriptions into real diagrams, right inside your AI chat.

Graphviz MCP App is a small add-on for Claude Desktop, Claude Code, VS Code Copilot, and other AI clients that support Model Context Protocol (MCP). Once it's installed, you can ask your AI to draw things — architecture diagrams, flowcharts, dependency graphs, decision trees, family trees, you name it — and an actual rendered diagram comes back in the conversation, powered by Graphviz.

In apps that support MCP Apps, diagrams show up as an interactive viewer right in the chat: you can pan, zoom, switch the layout algorithm to see the graph a different way, and copy the underlying source.

What you can ask for

Anything you can describe as boxes and connections. A few examples:

Draw an architecture diagram of a Next.js app talking to a Postgres database through an API. Use a left-to-right layout.

Render this graph: digraph { A -> B; B -> C; A -> C }

Make a decision tree to help me pick between TypeScript and JavaScript for a new project.

Visualize the import dependencies between these files I'm about to paste.

Setup

Claude Desktop (macOS)

• Open this file in your editor — create it if it doesn't exist:

  ~/Library/Application Support/Claude/claude_desktop_config.json
  

• Paste this in (or merge it with what's already there):

  {
    "mcpServers": {
      "graphviz": {
        "command": "npx",
        "args": ["-y", "graphviz-mcp"]
      }
    }
  }
  

• Quit Claude Desktop completely (Cmd+Q) and reopen it. You should see new graphviz tools available — start a new chat and try one of the example prompts above.

No separate Graphviz install is required. The package ships with everything it needs to render SVG diagrams.

Claude Desktop (Windows)

Same as macOS, but the config file lives at:

%APPDATA%\Claude\claude_desktop_config.json

Claude Code

From your terminal:

claude mcp add graphviz npx -- -y graphviz-mcp

Other MCP clients

Any client that supports stdio MCP servers will work. Point its config at npx -y graphviz-mcp (or install with npm install -g graphviz-mcp and point at graphviz-mcp).

PNG output (optional)

Out of the box, graphviz-mcp returns diagrams as SVG, which is crisp, scalable, and ideal for viewing in chat or embedding in docs.

If you want PNG output (a regular raster image — handy for pasting into Slack, slide decks, or anywhere SVG isn't supported), install Graphviz on your system:

• macOS: brew install graphviz
• Linux (Debian / Ubuntu): sudo apt install graphviz
• Windows: download the installer from graphviz.org/download

graphviz-mcp will detect it automatically the next time it starts up. No config change needed.