# 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:

```bash
# Enter development shell with all dependencies
nix develop

# Install Node.js dependencies
npm install

# Build the TypeScript project
npm run build
```

### Manual Installation

```bash
# 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

```bash
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:**
```json
{
  "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:**
```json
{
  "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

```markdown
---
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

```bash
# 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:

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

```bash
# 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