
hustcc/mcp-mermaid
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
❤️ AI MCPで人魚の図とチャートを動的に生成しましょう。
概要
- 🖼️ figure.ling.pub/gallery は、mcp-mermaidやその他のツールで作成されたAI生成図や図を閲覧・共有できます。 - Mermaidのすべての機能と構文を完全にサポートします。- backgroundColorとthemeの設定をサポートし、大規模なAIモデルが豊かなスタイル構成を出力できるようにします。 - base64、svg、mermaid、file、リモート対応svg_url、png_url形式へのエクスポートをサポートし、Mermaidの検証機能によりモデルの正しい構文やグラフィックの多ラウンド出力が可能になります。outputType: "file"を使ってPNG図を自動ディスクに保存し、AIエージェント向けにURLモードで図を公開のmermaid.inkリンクを通じて共有できます。 Claude、VSCode、Cline、Cherry Studioなどのデスクトップアプリで使用する場合は、下記にMCPサーバー設定を追加してください。Macシステムでは: また、aliyun、modelscope、glama.ai、smithery.ai など、HTTPやSSEプロトコルで使うこともできます。
概要(AI 翻訳)
AI MCPで人魚の図とチャートを動的に生成できます。また、以下も利用できます:
- mcp-server-chart:チャート、グラフ、マップを生成する。
- インフォグラフィックを生成するためのインフォグラフィック(例:
Timeline]、Comparison、List、Processなど)。 - 🖼️ figure.ling.pub/gallery は、mcp-mermaidやその他のツールで作成されたAI生成図や図を閲覧・共有できます。
✨ 特徴
-
Mermaidのすべての機能と構文を完全にサポートすること。 -
backgroundColorおよびthemeの設定をサポートし、大規模なAIモデルが豊かなスタイル構成を出力できるようにします。 -
base64、svg、mermaid、file、およびリモート対応のsvg_url、png_url形式へのエクスポートをサポートし、モデルの正しい構文とグラフィックの複数ラウンド出力を可能にするためにMermaidの検証機能も備えています。outputType: "file"を使ってPNG図を自動ディスクに保存し、AIエージェント向けにURLモードで図を公開のmermaid.inkリンクを通じて共有できます。
🤖 使用法
Claude、VSCode、Cline、Cherry StudioなどのDesktop APPで使用する場合は、以下のMCPサーバー設定を追加してください。Macシステムでは:
Windowsシステムについて:
また、aliyun、modelscope、glama.ai、smithery.ai など、HTTPやSSEプロトコルで使うこともできます。
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
MCP Mermaid

Generate mermaid diagram and chart with AI MCP dynamically. Also you can use:
- mcp-server-chart to generate chart, graph, map.
- Infographic to generate infographic, such as
Timeline,Comparison,List,Processand so on. - 🖼️ figure.ling.pub/gallery to browse and share AI-generated diagrams and figures created with mcp-mermaid and other tools.
✨ Features
-
Fully support all features and syntax of
Mermaid. -
Support configuration of
backgroundColorandtheme, enabling large AI models to output rich style configurations. -
Support exporting to
base64,svg,mermaid,file, and remote-friendlysvg_url,png_urlformats, with validation forMermaidto facilitate the model’s multi-round output of correct syntax and graphics. UseoutputType: "file"to automatically save PNG diagrams to disk for AI agents, or the URL modes to share diagrams through public mermaid.ink links.
🤖 Usage
To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}
On Window system:
{
"mcpServers": {
"mcp-mermaid": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"mcp-mermaid"
]
}
}
}
Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.
Access Points:
- SSE:
http://localhost:3033/sse - Streamable:
http://localhost:1122/mcp
Available Docker Tags:
susuperli/mcp-mermaid:latest- Latest stable version
インストール
npx -y mcp-mermaid設定
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}