Graphviz MCP

Graphviz MCP服务器

Graphviz的，之DOT从语言生成图形MCP (Model Context Protocol) 服务器。

📋 目次

• 概要
• MCP什么是？面向初学者的解说
• 机能
• 安装
• 使用方法

- 局部模式 - 远程模式

• 提供的工具
• 使用例
• 开発

概要

此项目包括：Graphviz功能MCP通过协议提供。AI 助手（Claude、ChatGPT等）使用该服务器DOT可以从语言生成图形。

技术栈

• TypeScript：型安全代码
• @模型上下文协议/sdk：公式MCP SDK
• @viz js/viz: Graphviz 的，之WebAssembly 实施（无需本地安装）
• 快速：用于远程服务器Web框架结构

MCP什么是？面向初学者的解说

MCP基本概念

MCP（模型上下文协议） 是AI 助手与外部工具和数据源安全合作的标准协议。

简而言之：

• AI（Claude等） 想做什么的时候
• MCP服务器（此代码） 请求
• 服务器 执行实际作业（Graphviz执行等）
• 结果 的AI归还

为什么MCP必要？

1. 标准化：所有工具都以相同的方式AI通信
2. 安全性: AI不直接访问系统，通过服务器安全运行
3. 扩张性：轻松添加新功能

MCP的结构（图解）

┌─────────────────┐         ┌──────────────────┐         ┌──────────────┐
│                 │  MCP    │                  │  API    │              │
│   AI Client     │ ◄─────► │   MCP Server     │ ◄─────► │   Graphviz   │
│   (Claude等)    │ Protocol│  (このコード)     │  Call   │  (@viz-js)   │
│                 │         │                  │         │              │
└─────────────────┘         └──────────────────┘         └──────────────┘
      ↑                              ↑                          ↑
      │                              │                          │
   ユーザーが                    ツールを実装              実際のGraphviz
   「図を作って」                  (render_graphviz,        処理を実行
   と指示                          validate_dot等)

通信方式的不同

1. stdio (标准入出力） -本地模式

┌──────────────┐
│  Claude App  │
│              │
│  ┌────────┐  │
│  │  MCP   │  │ ← 同じマシン上で動作
│  │ Server │  │
│  └────────┘  │
└──────────────┘

• 特徴：在本地运行，进程间通信
• 优点：快速、安全
• 用途: Claude Desktop、VS Code扩展等

2. SSE（服务器发送事件） -远程模式

┌──────────────┐         インターネット         ┌──────────────┐
│  Claude App  │ ◄───────────────────────────► │  MCP Server  │
│  (クライアント)│         HTTP/HTTPS            │  (サーバー)   │
└──────────────┘                                └──────────────┘
  別のマシンでもOK                                クラウド、別PC等

• 特徴: HTTP网络连接
• 优点：可远程访问，支持多个客户端
• 用途：云服务、团队共享等

MCP服务器设置方法（面向初学者）

Claude Desktop使用时

1. 找到配置文件的位置

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

1. 编辑文件（不存在时新建）

{
  "mcpServers": {
    "graphviz": {
      "command": "node",
      "args": ["/absolute/path/to/graphviz-mcp/build/index.js"]
    }
  }
}

1. 使路径适合您的环境

- /absolute/path/to/graphviz-mcp 更改为实际路径 - 例: /Users/yourname/projects/graphviz-mcp

1. Claude Desktop重新启动

1. 动作确认

- Claude“请告诉我可用的工具” - render_graphviz 和 validate_dot 如果显示OK！

VS Code (Cline扩展）时使用

VS Code的，之Cline扩展也一样MCP服务器可用。

1. Cline打开扩展设置
2. MCP Settings在节中添加设置

{
  "mcpServers": {
    "graphviz": {
      "command": "node",
      "args": ["/absolute/path/to/graphviz-mcp/build/index.js"]
    }
  }
}

机能

✅ DOT从语言SVG/PNG生成图像\ ✅ 支持多个布局引擎（dot、neato、fdp、circo等）\ ✅ DOT语言语法验证\ ✅ 支持本地和远程模式\ ✅ 提供示例代码集\ ✅ 本地的Graphviz无需安装（使用WebAssembly版）

安装

# リポジトリをクローン
git clone 
cd graphviz-mcp

# 依存関係をインストール
npm install

# TypeScriptをビルド
npm run build

使用方法

局部模式

在本地运行MCP服务器。VS Code的，之Cline扩展和Claude Desktop中选择另一种天花板类型。

以开发模式启动

在开发过程中，可以通过以下命令启动服务器（自动TypeScript编译）：

npm run dev

不过，Claude Desktop啊Cline从扩展中使用时，只需在设定文件中记述OK是。服务器将自动启动。

在生产模式下启动

构建后启动：

npm run build
npm run start

远程模式

HTTP而需要与环境混合的每条反射光线，进行环境采样。可以从多个客户端同时使用。

启动服务器

# 開発モード（デフォルトポート 3000）
npm run dev:remote

# カスタムポートで起動
PORT=8080 npm run dev:remote

# 本番モード
npm run build
npm run start:remote

启动后显示如下：

Graphviz MCP Remote Server started on http://localhost:3000
SSE endpoint: http://localhost:3000/sse

Claude Desktop 中的设置

claude_desktop_config.json 添加：

{
  "mcpServers": {
    "graphviz-remote": {
      "url": "http://localhost:3000/sse"
    }
  }
}

作为远程服务器公开时

注意：出于安全原因，在生产环境中HTTPS中所述修改相应参数的值。

1. ngrok使用方法（简单）

# サーバーを起動
npm run start:remote

# 別のターミナルでngrokを起動
ngrok http 3000

1. 部署到云

- Heroku、Railway、Render等可部署 - 环境变数 PORT 在中指定端口号

提供的工具

1. render_graphviz

DOT从语言生成图像。

参数：

• dot （必需）：DOT语言图表定义
• engine （可选）：布局引擎

- dot （默认）：分层图表 - neato：无向图表 - fdp：基于力学模型 - circo：圆形布局 - twopi：径向布局 - 其他： sfdp, osage, patchwork

• format （可选）：输出格式

- svg （默认值） - png-image-element

2. validate_dot

DOT检查语言语法是否正确。

参数：

• dot （必需）：验证DOT语言

使用例

基本有向图表

digraph G {
  A -> B;
  B -> C;
  C -> A;
}

样式图表

digraph G {
  node [shape=box, style=filled, fillcolor=lightblue];
  edge [color=red];
  
  Start -> Process;
  Process -> End;
}

阶层构造

digraph hierarchy {
  rankdir=LR;
  node [shape=record];
  
  root [label="Root"];
  child1 [label="Child 1"];
  child2 [label="Child 2"];
  
  root -> child1;
  root -> child2;
}

流程图

digraph flowchart {
  node [shape=box];
  
  start [label="Start", shape=ellipse];
  decision [label="条件?", shape=diamond];
  process1 [label="処理A"];
  process2 [label="処理B"];
  end [label="End", shape=ellipse];
  
  start -> decision;
  decision -> process1 [label="Yes"];
  decision -> process2 [label="No"];
  process1 -> end;
  process2 -> end;
}

Claude 使用方法

Claude Desktop 中设置此服务器后，您可以：

「AからBへ、BからCへの有向グラフを作って」
「フローチャートを作りたい。Start→Decision→Process→Endの流れで」
「組織図を作成して。CEOの下にCTO、CFO、CMOがいる構造で」

开発

在开发模式下运行

# ローカルモード
npm run dev

# リモートモード
npm run dev:remote

构建

npm run build

监视模式

npm run watch

许可证

麻省理工学院

参考链接

• 模型上下文协议
• 快速mcp
• Graphviz
• @viz js/viz