MCP SVG-Marp Server

An MCP (Model Context Protocol) server that converts SVG files to Marp presentations.

Features

• Convert SVG files to Marp markdown presentations
• Extract text content from SVG files
• Generate PNG images from SVG for embedding in presentations
• Analyze SVG structure and suggest presentation layout
• Support for different Marp themes (default, gaia, uncover)

Prerequisites

• Node.js 18+
• One of the following for SVG to PNG conversion:
• ImageMagick (convert command)
• Inkscape
• librsvg (rsvg-convert command)

Installation

Using Nix (Recommended)

If you have Nix installed, you can use the provided flake:

# Enter development shell with all dependencies
nix develop

# Install Node.js dependencies
npm install

# Build the TypeScript project
npm run build

Manual Installation

# Install system dependencies (Ubuntu/Debian)
sudo apt-get install imagemagick inkscape librsvg2-bin

# Install Node.js dependencies
npm install

# Build the project
npm run build

Usage

Starting the MCP Server

npm start

The server communicates via stdio and implements the MCP protocol.

Available MCP Tools

#### convert_svg_to_marp

Converts an SVG file to a Marp presentation.

Parameters:

• svgPath (required): Path to the input SVG file
• outputPath (optional): Path for the output Marp markdown file
• options (optional):
• theme: Marp theme to use ("default", "gaia", or "uncover")
• includeImage: Include the SVG as a PNG image (default: true)
• extractText: Extract text from SVG for content (default: true)

Example:

{
  "tool": "convert_svg_to_marp",
  "arguments": {
    "svgPath": "/path/to/diagram.svg",
    "outputPath": "/path/to/presentation.md",
    "options": {
      "theme": "gaia",
      "includeImage": true,
      "extractText": true
    }
  }
}

#### analyze_svg

Analyzes an SVG file and suggests a Marp presentation structure.

Parameters:

• svgPath (required): Path to the SVG file to analyze

Example:

{
  "tool": "analyze_svg",
  "arguments": {
    "svgPath": "/path/to/diagram.svg"
  }
}

Output Format

The generated Marp markdown includes:

1. Front matter with Marp configuration
2. Title slide with SVG title or first text element
3. Image slide with the converted PNG (if enabled)
4. Content slide with extracted text as bullet points (if available)
5. Metadata slide with image dimensions and format information

Example Output

---
marp: true
theme: default
paginate: true
backgroundColor: #fff
backgroundImage: linear-gradient(to bottom right, #6366F1, #8B5CF6)
style: |
  section {
    font-family: 'Arial', sans-serif;
  }
  h1 {
    color: #FFFFFF;
    font-size: 56px;
  }
---

# My SVG Diagram

Description of the diagram

---

<!-- _class: centered -->

![SVG Content](diagram.png)

---

## Content

- First text element
- Second text element
- Third text element

---

## Image Information

- **Dimensions**: 800 × 600 pixels
- **Format**: SVG (Scalable Vector Graphics)

Using with Claude

This MCP server is designed to work seamlessly with Claude. When you ask Claude to create slides or presentations from SVGs, it will:

1. Automatically create professional SVG designs based on your content
2. Convert to Marp using the convert_svg_to_marp tool
3. Provide both files - the original SVG and the Marp markdown

Trigger Phrases

Claude will automatically use this tool when you say things like:

• "Convert this SVG to a Marp presentation"
• "Make a slide from this diagram"
• "Create a Marp presentation about [topic]"
• "このSVGをMarpプレゼンに変換して"

Development

# Run in development mode (with hot reload)
npm run dev

# Build the project
npm run build

# Start the built server
npm start

Integration with Claude Desktop

To use this MCP server with Claude Desktop, add it to your MCP servers configuration:

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

Marp Output Capabilities

From the generated Marp markdown, you can create:

• HTML presentations - Interactive slideshows for web browsers
• PDF documents - For printing or sharing
• PNG/JPEG images - Individual slide images
• PowerPoint files - Using Marp CLI's PPTX export

Converting Marp to Other Formats

# Install Marp CLI globally
npm install -g @marp-team/marp-cli

# Convert to HTML
marp presentation.md -o presentation.html

# Convert to PDF
marp presentation.md -o presentation.pdf

# Convert to PPTX
marp presentation.md -o presentation.pptx

# Convert to PNG images
marp presentation.md -o slide.png

License

MIT