Labsco
alwank logo

Chhart MCP

โ˜… 3

from alwank

Chhart MCP is a tool that enables AI assistants to generate instant, shareable flowcharts and Sankey diagrams directly in chat,

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅโœ“ VerifiedFreeAdvanced setup

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.

Table of Contents

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

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:

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

Returns documentation and examples for Chhart syntax.

Parameters:

  • type (enum, optional) - 'flowchart', 'sankey', or 'all' (default: 'all')

Example Conversations

Once configured, you can ask your AI assistant:

"Create a flowchart showing a user login process with email verification"

"Create a Sankey diagram showing how $100 of revenue splits into costs, taxes, and profit"

"Show me the syntax for creating flowcharts in Chhart"

Development

# 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

Project Structure

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

How It Works

The MCP server generates shareable URLs by encoding chart data into the URL hash, leveraging chhart.app's existing URL-based sharing feature. This means:

  • โœ… No backend API required
  • โœ… Charts are fully client-side
  • โœ… URLs work immediately without storage
  • โœ… Charts can be edited on chhart.app
  • โœ… Privacy-friendly (data stays in the URL)

Security

For security concerns, please see our Security Policy. Do not open public issues for security vulnerabilities.