Chhart MCP

Chhart MCP サーバー

ChatGPT、Claude などの AI アシスタントが、chhart.app でフローチャートやサンキー図をプログラムから作成できるようにする MCP（Model Context Protocol）サーバーです。

目次

• 機能
• 前提条件
• インストール
• 使い方
  • クイックスタート（公開サーバー）
  • ローカルモード（stdio）
  • リモートモード（StreamableHTTP）
• 利用可能なツール
• 会話の例
• 開発
• 仕組み
• トラブルシューティング
• コントリビューション
• セキュリティ
• ライセンス
• リンク

機能

• 🎨 フローチャートの作成 - Chhart の直感的なテキストベース DSL を使ってフローチャートを生成します
• 📊 サンキー図の作成 - フローのデータからサンキー図を作成します
• 📚 構文のヘルプ - 充実したドキュメントとサンプルを参照できます
• 🔗 共有可能な URL - すべての図に共有可能な chhart.app のリンクが付きます
• 🚀 簡単な統合 - MCP 対応の AI アシスタントであれば、どれでも利用できます
• 🌐 デュアルモード - ローカル（stdio）またはリモート（StreamableHTTP）で実行できます
• ☁️ クラウド対応 - Railway、Vercel、その他の Node.js ホスティングにデプロイできます
• 🔒 高い信頼性 - 安定した接続を実現する最新の StreamableHTTP トランスポートを使用します

前提条件

• Node.js 20 以降
• npm または yarn
• MCP 対応のクライアント（Claude Desktop、Cursor など）

インストール

npm から

npm install -g chhart-mcp

または、インストールせずに直接実行します。

npx chhart-mcp

ソースから

# Clone the repository
git clone https://github.com/alwank/chhart_MCP.git
cd chhart_MCP

# Install dependencies
npm install

# Build the project
npm run build

使い方

クイックスタート（公開サーバー）

ローカルに何もインストールせずに、管理された MCP サーバーを利用できます。

MCP クライアントを設定して、公開エンドポイントに接続します。

{
  "mcpServers": {
    "chhart": {
      "url": "https://mcp.chhart.app/mcp"
    }
  }
}

ローカルモード（stdio）

Claude Desktop、Cursor、その他のローカル MCP クライアントで利用します。

1. プロジェクトをビルドします。

   npm run build
   

2. MCP クライアントの設定に追加します。

   Claude Desktop の場合は、claude_desktop_config.json を編集します。

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

   Cursor やその他のクライアントについては、詳しい例が記載された CONFIG_EXAMPLES.md を参照してください。

3. MCP クライアントを再起動します

リモートモード（StreamableHTTP）

Railway、Vercel、その他のクラウドプラットフォームにデプロイする場合は、信頼性の高いステートレス通信を実現する最新の StreamableHTTP トランスポートを使用します。

1. StreamableHTTP サーバーをビルドして起動します。

   npm run build
   npm run start:streamable
   

   サーバーはポート 3000（または PORT 環境変数で指定したポート）で起動します。

2. MCP クライアントを設定して、リモートエンドポイントに接続します。

   {
     "mcpServers": {
       "chhart": {
         "url": "https://your-deployment-url.com/mcp"
       }
     }
   }
   

3. Railway にデプロイします。

   詳しい手順については、Railway Deployment Guide を参照してください。

StreamableHTTP を使用する理由

信頼性を高めるため、SSE から StreamableHTTP トランスポートに移行しました。

機能	SSE トランスポート	StreamableHTTP トランスポート
接続タイプ	長時間接続の SSE ストリーム	ステートレス HTTP リクエスト
安定性	タイムアウトが発生しやすい	✅ 堅牢で信頼性が高い
クラウドとの互換性	限定的	✅ 優れている
セッション管理	必須	任意（ステートレス）

レガシー SSE モード

SSE トランスポートも引き続き利用できますが、非推奨です。

npm run start:sse  # Not recommended for production

利用可能なツール

create_flowchart

Chhart のテキストベース DSL を使ってフローチャートを作成します。

パラメーター：

• content（string、必須） - Chhart DSL 形式のフローチャートの内容
• title（string、任意） - フローチャートのタイトル

例：

{
  "content": "Start\n  Process Step\n    Decision? [shape=diamond]\n      Yes\n        Action\n        End\n      No\n        Skip\n        End",
  "title": "Simple Workflow"
}

create_sankey

ノード間のフローを示すサンキーダイアグラムを作成します。

パラメーター：

• content（string、必須）- Chhart DSL 形式のサンキーダイアグラムの内容
• title（string、任意）- ダイアグラムのタイトル

例：

{
  "content": "Revenue [value=100]\n  Costs [value=40]\n    Salaries [value=25]\n    Operations [value=15]\n  Profit [value=60]",
  "title": "Budget Flow"
}

get_syntax_help

Chhart の構文に関するドキュメントと例を返します。

パラメーター：

• type（enum、任意）- 'flowchart'、'sankey'、または 'all'（デフォルト：'all'）

会話の例

設定が完了したら、AI アシスタントに次のように依頼できます。

「メール認証を含むユーザーログインプロセスのフローチャートを作成して」

「収益 100 ドルがコスト、税金、利益にどのように分配されるかを示すサンキーダイアグラムを作成して」

「Chhart でフローチャートを作成する構文を教えて」

開発

# Install dependencies
npm install

# Build
npm run build

# Watch mode (auto-rebuild on changes)
npm run watch

# Run locally (stdio mode)
npm start

# Run StreamableHTTP server (recommended for remote access)
npm run start:streamable

# Run SSE server (legacy, deprecated)
npm run start:sse

プロジェクト構成

chhart_MCP/
├── src/
│   ├── index.ts              # Main entry point (stdio mode)
│   ├── server-streamable.ts  # StreamableHTTP server (recommended)
│   ├── server-sse.ts         # SSE server (legacy)
│   ├── tools/                # MCP tool implementations
│   ├── utils/                # Utility functions
│   └── transports/           # Transport implementations
│       ├── streamable.ts     # StreamableHTTP transport
│       └── sse.ts            # SSE transport (legacy)
├── dist/                     # Compiled JavaScript (generated)
└── docs/                     # Documentation files

仕組み

MCP サーバーは、chhart.app に既存の URL ベースの共有機能を活用し、チャートデータを URL ハッシュにエンコードして共有可能な URL を生成します。つまり、次のとおりです。

• ✅ バックエンド API は不要です
• ✅ チャートはすべてクライアント側で処理されます
• ✅ URL は保存なしですぐに機能します
• ✅ chhart.app でチャートを編集できます
• ✅ プライバシーに配慮しています（データは URL 内に保持されます）

トラブルシューティング

「コマンドが見つからない」または「モジュールが見つからない」

• npm install と npm run build を実行したことを確認してください
• MCP クライアントの設定に指定したパスが絶対パスであることを確認してください
• Node.js 20 以降がインストールされていることを確認してください：node --version

接続の問題

「connection closed: EOF」などのエラー：

• リモートモードを使用している場合は、StreamableHTTP トランスポートを使用していることを確認してください（npm run start:streamable）
• 従来の SSE トランスポートは非推奨であり、安定性に問題がある場合があります
• サーバーが実行中であることを確認してください：http://localhost:3000/health のヘルスエンドポイントを確認します
• リモートでデプロイする場合は、ファイアウォールの設定を確認してください
• ドメインに対して CORS が適切に設定されていることを確認してください

クライアントの設定：

• StreamableHTTP クライアントは、/mcp に対する application/json リクエストを使用します
• 従来の SSE クライアントでは、/mcp ストリームに text/event-stream が、/messages に JSON が必要です
• URL が /mcp エンドポイントを指していることを確認してください

チャートが読み込まれない

• 生成された URL が完全で、途中で切れていないことを確認してください
• ブラウザーのコンソールでエラーを確認してください
• URL をブラウザーで直接開いてみてください
• 非常に大きなダイアグラムは URL の長さ制限（通常 2000 文字）を超える場合があります

TypeScript のビルドエラー

• Node.js 20 以降を使用していることを確認してください
• node_modules と dist を削除してから、npm install と npm run build を実行してください
• TypeScript のバージョンに互換性があることを確認してください

詳しくは、CONTRIBUTING.md を参照するか、イシューを作成してください。

コントリビューション

コントリビューションを歓迎します！以下のガイドラインについては、CONTRIBUTING.md を参照してください。

• バグの報告
• 機能の提案
• プルリクエストの提出
• 開発環境のセットアップ
• コーディング規約

セキュリティ

セキュリティに関する懸念については、セキュリティポリシー を参照してください。セキュリティの脆弱性について、公開イシューを作成しないでください。

ライセンス

MIT License - 詳細は LICENSE を参照してください。

Copyright (c) 2026 Chhart.app

リンク

• Chhart.app - ダイアグラムを作成して共有
• Model Context Protocol - MCP について学ぶ
• ドキュメント - 追加のガイドと例
• 変更履歴 - バージョン履歴と更新情報
• イシュー - バグの報告や機能のリクエスト