Markdown to Card - MCP工具

Markdown to Card - MCP Tool

A powerful MCP tool for converting Markdown documents into beautiful knowledge card images, supporting multiple card styles, perfect for blogs and social media sharing.

中文版本 | English Version

Features

🎨 Multiple Card Styles

Support for 20+ beautiful card styles:

Warm Soft - Perfect for life sharing
Elegant Gray - Professional business style
Dreamy Gradient - Creative design style
Fresh Natural - Green eco-friendly theme
Tech Blue - Dedicated for technical content
Elegant Purple - Premium elegant style
Vibrant Orange - Energetic design
More styles...

📝 Complete Markdown Support

✅ Headers (H1-H6)
✅ Paragraphs and text styles
✅ Ordered and unordered lists
✅ Code blocks (with syntax highlighting)
✅ Quote blocks
✅ Tables
✅ Horizontal rules
✅ Math formulas (planned)
✅ Flowcharts and sequence diagrams (planned)

🚀 Multiple Usage Methods

MCP Server - Integrate with Claude, Cursor, and other AI tools
API Service - HTTP interface for integration with any application
Command Line Tool - Direct terminal usage

Quick Start

1. Install Dependencies

npm install

2. Build Project

npm run build

3. Run Service

Run as MCP Server

npm run dev -- --mcp

Run as API Server

npm run dev -- --api

Usage

MCP Server Mode

The MCP server provides the following tools:

1. List All Available Styles

// Tool name: list_styles
// Parameters: none
// Returns: List of all available styles

2. Get Specific Style Details

// Tool name: get_style
// Parameters: { styleId: string }
// Returns: Detailed configuration of the style

3. Preview Card

// Tool name: preview_card
// Parameters: {
//   markdown: string,
//   styleId: string,
//   width?: number,
//   height?: number,
//   title?: string,
//   watermark?: string
// }
// Returns: Base64 format image data

4. Generate and Save Card

// Tool name: generate_card
// Parameters: {
//   markdown: string,
//   styleId: string,
//   width?: number,
//   height?: number,
//   title?: string,
//   watermark?: string,
//   filename?: string
// }
// Returns: Information about the saved file

5. List Generated Images

// Tool name: list_generated_images
// Parameters: none
// Returns: List of all generated images

6. Delete Image

// Tool name: delete_image
// Parameters: { filename: string }
// Returns: Deletion result

API Server Mode

The API server provides REST interfaces:

Get All Styles

GET /api/styles

Get Specific Style

GET /api/styles/:id

Preview Card

POST /api/preview
Content-Type: application/json

{
  "markdown": "# Title\n\nThis is an example",
  "styleId": "warm-soft",
  "width": 800,
  "height": 1000,
  "title": "My Card",
  "watermark": "Created by MD-Card"
}

Generate Card

POST /api/generate
Content-Type: application/json

{
  "markdown": "# Title\n\nThis is an example",
  "styleId": "warm-soft",
  "width": 800,
  "height": 1000,
  "title": "My Card",
  "watermark": "Created by MD-Card",
  "filename": "my-card"
}

Get Generated Image

GET /api/images/:filename

List All Images

GET /api/images

Delete Image

DELETE /api/images/:filename

Style Configuration

Each style contains the following configuration:

interface CardStyle {
  name: string;           // Style name
  id: string;             // Style ID
  backgroundColor: string; // Background color
  textColor: string;      // Text color
  headerColor: string;    // Header color
  accentColor: string;    // Accent color
  borderRadius: number;   // Border radius
  padding: number;        // Padding
  fontFamily: string;     // Font family
  fontSize: number;       // Font size
  lineHeight: number;     // Line height
  gradient?: {            // Gradient background (optional)
    start: string;
    end: string;
    direction: 'horizontal' | 'vertical' | 'diagonal';
  };
  shadow?: {              // Shadow effect (optional)
    offsetX: number;
    offsetY: number;
    blur: number;
    color: string;
  };
}

Integration with MCP Clients

Configuration in Claude Desktop

Add the following to Claude Desktop's configuration file:

{
  "mcpServers": {
    "markdown-to-card": {
      "command": "node",
      "args": ["path/to/mdtcard/dist/index.js", "--mcp"]
    }
  }
}

Usage in Cursor

Install MCP extension
Configure server address
Start using card generation features

Development

Project Structure

src/
├── api/           # API server
├── styles/        # Card style definitions
├── types/         # TypeScript type definitions
├── utils/         # Utility functions
├── mcp-server.ts  # MCP server implementation
└── index.ts       # Main entry file

Adding New Styles

Add new style in src/styles/cardStyles.ts
Ensure style ID is unique
Test style effects
Submit changes

Extending Features

Add new Markdown syntax support
Implement more image format outputs
Add animation effects
Support custom fonts

FAQ

Q: How to customize styles?

A: Modify the src/styles/cardStyles.ts file to add new style configurations.

Q: Which image formats are supported?

A: Currently supports PNG format, with plans to add JPEG, WebP, and other formats.

Q: How to handle Chinese fonts?

A: Specify Chinese fonts in style configuration, such as "PingFang SC, Microsoft YaHei".

Q: What if image generation is slow?

A: You can reduce image size or use simpler styles to improve generation speed.

License

Apache License 2.0

Contributing

Welcome to submit Issues and Pull Requests to improve this tool!

Changelog

v1.0.0

Initial version release
Support for 20+ card styles
Complete Markdown syntax support
Dual MCP and API mode support
Real-time preview and image generation features

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

A powerful MCP tool that converts Markdown documents into beautiful knowledge card images with 20+ card styles, suitable for sharing on blogs and social media.

Related MCP Servers

mcp-pandoc
vivekVells
A
security
A
license
A
quality
MCP server for seamless document format conversion using Pandoc, supporting Markdown, HTML, PDF, DOCX (.docx), csv and more.
Last updated -
1
330
Python
MIT License
markdown2pdf-mcp
2b3pro
A
security
F
license
A
quality
An MCP server for converting Markdown documents to PDF files.
Last updated -
1
68
9
JavaScript
Memex
narphorium
-
security
A
license
-
quality
A tool for Model Context Protocol (MCP) that allows you to analyze web content and add it to your knowledge base, storing content as Markdown files for easy viewing with tools like Obsidian.
Last updated -
9
Python
MIT License
File Converter MCP Server
wowyuarm
-
security
A
license
-
quality
An MCP server that provides multiple file conversion tools for AI agents, supporting various document and image format conversions including DOCX to PDF, PDF to DOCX, image conversions, Excel to CSV, HTML to PDF, and Markdown to PDF.
Last updated -
15
Python
MIT License

View all related MCP servers