Chhart MCP Server

Create flowcharts and Sankey diagrams on chhart.app via AI

README.md

Chhart MCP Server

An MCP (Model Context Protocol) server that enables AI assistants like ChatGPT, Claude, and others to programmatically create flowcharts and Sankey diagrams on chhart.app.

Features

  • 🎨 Create Flowcharts - Generate flowcharts using Chhart's intuitive text-based DSL
  • 📊 Create Sankey Diagrams - Build Sankey diagrams from flow data
  • 📚 Syntax Help - Get comprehensive documentation and examples
  • 🔗 Shareable URLs - All diagrams come with shareable chhart.app links
  • 🚀 Easy Integration - Works with any MCP-compatible AI assistant
  • 🌐 Dual Mode - Run locally (stdio) or remotely (StreamableHTTP)
  • ☁️ Cloud Ready - Deploy to Railway, Vercel, or any Node.js hosting
  • 🔒 Reliable - Modern StreamableHTTP transport for stable connections

Prerequisites

  • Node.js 20 or higher
  • npm or yarn
  • An MCP-compatible client (Claude Desktop, Cursor, etc.)

Installation

From npm

npm install -g chhart-mcp

Or run directly without installing:

npx chhart-mcp

From Source

# 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

Usage

Quick Start (Public Server)

You can use our managed MCP server without installing anything locally.

Configure your MCP client to connect to the public endpoint:

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

Local Mode (stdio)

For use with Claude Desktop, Cursor, or other local MCP clients:

  1. Build the project:

    npm run build
    
  2. Add to your MCP client configuration:

    For Claude Desktop, edit claude_desktop_config.json:

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

    For Cursor or other clients, see CONFIG_EXAMPLES.md for more examples.

  3. Restart your MCP client

Remote Mode (StreamableHTTP)

For deployment to Railway, Vercel, or other cloud platforms, we use the modern StreamableHTTP transport for reliable, stateless communication.

  1. Build and start the StreamableHTTP server:

    npm run build
    npm run start:streamable
    

    The server will start on port 3000 (or the port specified in PORT environment variable).

  2. Configure your MCP client to connect to the remote endpoint:

    {
      "mcpServers": {
        "chhart": {
          "url": "https://your-deployment-url.com/mcp"
        }
      }
    }
    
  3. Deploy to Railway:

    See the Railway Deployment Guide for detailed instructions.

Why StreamableHTTP?

We migrated from SSE to StreamableHTTP transport for better reliability:

Feature SSE Transport StreamableHTTP Transport
Connection Type Long-lived SSE stream Stateless HTTP requests
Stability Prone to timeouts ✅ Robust and reliable
Cloud Compatibility Limited ✅ Excellent
Session Management Required Optional (stateless)
Legacy SSE Mode

The SSE transport is still available but deprecated:

npm run start:sse  # Not recommended for production

Available Tools

`create_flowchart`

Creates a flowchart using Chhart's text-based DSL.

Parameters:

  • content (string, required) - Flowchart content in Chhart DSL format
  • title (string, optional) - Title for the flowchart

Example:

{
  "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`

Creates a Sankey diagram showing flows between nodes.

Parameters:

  • content (string, required) - Sankey diagram content in Chhart DSL format
  • title (string, optional) - Title for the diagram

Example:

Tools 2

create_flowchartCreates a flowchart using Chhart's text-based DSL.
create_sankeyCreates a Sankey diagram showing flows between nodes.

Environment Variables

PORTPort for the StreamableHTTP server

Try it

Create a flowchart showing the steps for a user login process.
Generate a Sankey diagram representing the budget allocation for my project.
Create a flowchart for a decision tree regarding whether to buy or rent a house.
Visualize the flow of data in my application using a Sankey diagram.

Frequently Asked Questions

What are the key features of Chhart MCP?

Generate flowcharts using Chhart's intuitive text-based DSL. Build Sankey diagrams from flow data. Provide shareable chhart.app links for all diagrams. Support for both local (stdio) and remote (StreamableHTTP) deployment.

What can I use Chhart MCP for?

Documenting software architecture and system workflows. Visualizing project budget or resource distribution. Creating decision trees for business processes. Mapping out user journeys for product design.

How do I install Chhart MCP?

Install Chhart MCP by running: npx chhart-mcp

What MCP clients work with Chhart MCP?

Chhart MCP works with any MCP-compatible client including Claude Desktop, Claude Code, Cursor, and other editors with MCP support.

Turn this server into reusable context

Keep Chhart MCP docs, env vars, and workflow notes in Conare so your agent carries them across sessions.

Open Conare