MCP Diagram Designer

图表设计师

将混乱的Mermaid代码转化为令人惊叹的架构图

  

别再纠结于图表工具了。 用Mermaid编写你的系统架构，让人工智能生成专业图表——为演示、文档和开源项目做好准备。

开始使用MCPize · 在游乐场尝试 · 请联系我

______________________________________________________________________

问题

Mermaid代码中描述了一个复杂的系统架构——节点、边、子图无处不在。它是功能性的，但 没人想看它。您需要干净、专业的图表来：

• 演示 --用精致的系统概述给利益相关者留下深刻印象
• 基础设施文档 --使您的架构文档真正可读
• 开源自述文件 --用吸引贡献者的图表展示您的项目
• 技术博客 --完美地说明复杂系统

图表设计师 获取您的Mermaid代码，并在60秒内将其转换为生产质量的架构图图像。

______________________________________________________________________

展示

云风格

使用AWS/GCP/Azure调色板的干净、现代的云原生图。非常适合系统文档和演示。

DeepRAG Cloud Architecture

More Cloud Style Examples

ShopFlow电子商务平台

ShopFlow Cloud Architecture

______________________________________________________________________

暗模式风格

光滑的深色背景，带有霓虹色调。非常适合技术演示、演讲台和现代文档。

DataPulse Streaming Architecture

______________________________________________________________________

等距样式

3D分层透视图，直观地传达系统层次和深度。展示复杂平台的最佳视觉选择。

NeuralForge MLOps Architecture

______________________________________________________________________

特性

______________________________________________________________________

运作原理

Your Mermaid Code  →  AI Prompt Composer  →  Image Generator  →  Professional PNG
    (input)            (understands your       (AI-powered)       (download link)
                        architecture)

1. 提供 你的美人鱼图+系统描述
2. 选择 您喜欢的风格、细节水平和质量等级
3. 接收 具有适当图标、标签、颜色和布局的专业PNG
4. 下载 您的图片（链接有效期为1小时）

______________________________________________________________________

快速开始

第一步：在MCPize上订阅

访问 图表设计器市场页面 并订阅一个计划。可用免费层（2张图）。

第2步：获取API密钥

订阅后，从您的MCPize帐户设置中复制您的API密钥。

步骤3：配置MCP客户端

Claude Code (CLI)

claude mcp add --transport http diagram-designer https://diagram-designer.mcpize.run/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

或者通过JSON添加：

claude mcp add-json diagram-designer '{
  "type": "http",
  "url": "https://diagram-designer.mcpize.run/mcp",
  "headers": {
    "Authorization": "Bearer YOUR_API_KEY"
  }
}'

Cursor IDE

创建 .cursor/mcp.json 在您的项目中（或 ~/.cursor/mcp.json 全球）：

{
  "mcpServers": {
    "diagram-designer": {
      "url": "https://diagram-designer.mcpize.run/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Windsurf

编辑 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "diagram-designer": {
      "serverUrl": "https://diagram-designer.mcpize.run/mcp",
      "headers": {
        "Authorization": "Bearer ${env:MCPIZE_API_KEY}"
      }
    }
  }
}

设置环境变量： export MCPIZE_API_KEY=YOUR_API_KEY

Claude Desktop

首选 设置>连接器 并添加MCPize服务器URL。或者使用 mcp-remote 在您的配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "diagram-designer": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://diagram-designer.mcpize.run/mcp",
        "--header",
        "Authorization: Bearer YOUR_API_KEY"
      ]
    }
  }
}

VS Code (GitHub Copilot)

创建 .vscode/mcp.json 在您的工作空间中：

{
  "servers": {
    "diagram-designer": {
      "type": "http",
      "url": "https://diagram-designer.mcpize.run/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

注：VS代码使用 "servers" 作为根密钥，不是 "mcpServers".

步骤4：生成图表

连接后，让你的AI助手生成一个图表。示例提示：

*使用图设计器为我的系统生成架构图。样式：云，质量：高级，目的：演示*

AI会问你一些澄清问题，创建美人鱼图，并调用 generate_diagram_image 生成图表的工具。

______________________________________________________________________

参数

______________________________________________________________________

定价

______________________________________________________________________

专业优质——值得

为了获得最佳效果，我们强烈建议使用 专业版 或 优质 层：

• 2.2倍更详细的提示 --高级级别使用高级AI模型，生成约10700个字符的提示，而标准级别为约5000个字符。这意味着更精确的组件放置、更好的图标描述和更丰富的颜色说明。
• 更高的Mermaid逻辑合规性 --高级图表更准确地遵循Mermaid代码中定义的关系和层次结构。连接、数据流和分组得以更高保真地保留。
• 复杂的系统，没问题 --对于包含15-25个以上组件（微服务、ML管道、多层平台）的大型架构，Premium可以在不偷工减料或合并组件的情况下处理复杂性。
• 2K分辨率 --即使在密集的图表中，每个标签、图标和连接线也保持清晰易读。不再有模糊的文本或伪影。

太长，读不下去了：使用标准进行快速迭代和草稿。将Premium用于您将与他人共享的最终交付成果、演示文稿和文档。

______________________________________________________________________

对于企业

需要在组织的基础架构中部署关系图设计器吗？对自定义集成、批量定价或私有实例有疑问吗？

让我们谈谈。 通过LinkedIn联系：


______________________________________________________________________

⭐ 如果你觉得这很有用，请考虑给一颗星！ ⭐

 ](https://github.com/LeDat98/mcp-diagram-designer)

您的支持有助于我们改进和构建更多功能。

______________________________________________________________________

MIT许可证© 2026年