---
name: myai-convert-html
description: Convert HTML templates to PNG, PDF, or PPTX formats for precise visual content
---

# HTML Conversion Tool

Convert HTML templates and D2 diagrams to images, PDFs, and presentations with pixel-perfect accuracy.

## When to Use This Tool

Use HTML conversion when you need:
- **Data-driven infographics** with precise numbers and text
- **Comparison tables** with exact formatting
- **Process diagrams** with specific labels
- **Architecture diagrams** using D2 language
- **Presentation slides** (PPTX) from HTML content

## Available Commands

### List Templates
```bash
node src/scripts/html-conversion-cli.js list
```

### Convert HTML Template
```bash
# Basic usage
node src/scripts/html-conversion-cli.js template data-chart --data '{"title":"Sales Report","items":[...]}' --format png

# With output file
node src/scripts/html-conversion-cli.js template comparison-table --data data.json --output comparison.png
```

### Convert D2 Diagram
```bash
# From inline script
node src/scripts/html-conversion-cli.js d2 "user -> api -> database" --format png

# From file
node src/scripts/html-conversion-cli.js d2 diagram.d2 --format svg --theme 200
```

### Convert D2 Template
```bash
node src/scripts/html-conversion-cli.js d2-template architecture --data '{"title":"System Design",...}' --format svg
```

### Convert Raw HTML
```bash
node src/scripts/html-conversion-cli.js html custom.html --format pdf
```

### Generate PPTX
```bash
# From directory of HTML slides
node src/scripts/html-conversion-cli.js pptx ./slides/ --output presentation.pptx

# From JSON configuration
node src/scripts/html-conversion-cli.js pptx slides.json --title "Q4 Report" --author "Team"
```

## Built-in Templates

### HTML Templates

1. **data-chart** - Bar/pie charts with data visualization
   ```json
   {
     "title": "Revenue by Region",
     "chartType": "bar",
     "items": [
       {"label": "North America", "value": 45, "percentage": 90, "color": "#3b82f6"},
       {"label": "Europe", "value": 32, "percentage": 64, "color": "#10b981"}
     ]
   }
   ```

2. **comparison-table** - Side-by-side feature comparisons
   ```json
   {
     "title": "Plan Comparison",
     "layout": "table",
     "columns": [{"name": "Basic"}, {"name": "Pro", "highlight": true}],
     "rows": [{"feature": "Users", "values": [{"text": "5"}, {"text": "Unlimited"}]}]
   }
   ```

3. **process-flow** - Step-by-step process diagrams
   ```json
   {
     "title": "Development Workflow",
     "layout": "vertical",
     "steps": [
       {"number": 1, "title": "Planning", "description": "Define requirements"}
     ]
   }
   ```

### D2 Templates

1. **architecture** - System architecture diagrams
2. **flowchart** - Decision flowcharts
3. **sequence** - Sequence diagrams

## HTML vs AI Image Generation

| Use Case | Recommended Tool |
|----------|-----------------|
| Infographics with exact data | HTML Conversion |
| Creative/artistic images | AI Image Generation |
| Diagrams with specific text | HTML/D2 Conversion |
| Photorealistic scenes | AI Image Generation |
| Presentations/slides | HTML → PPTX |
| Charts and graphs | HTML Conversion |

## Example Workflow

1. **Create data file** (data.json):
```json
{
  "title": "Q4 Performance Report",
  "subtitle": "Year over Year Growth",
  "chartType": "bar",
  "items": [
    {"label": "Revenue", "value": "$2.4M", "percentage": 85, "color": "#3b82f6"},
    {"label": "Users", "value": "150K", "percentage": 72, "color": "#10b981"},
    {"label": "Retention", "value": "94%", "percentage": 94, "color": "#f59e0b"}
  ],
  "source": "Internal Analytics"
}
```

2. **Generate PNG**:
```bash
node src/scripts/html-conversion-cli.js template data-chart --data data.json --format png --output q4-report.png
```

3. **Generate PDF**:
```bash
node src/scripts/html-conversion-cli.js template data-chart --data data.json --format pdf --output q4-report.pdf
```

## D2 Diagram Quick Reference

D2 is a declarative diagram language. Quick syntax:

```d2
# Nodes
user: User {shape: person}
api: API Server
db: Database {shape: cylinder}

# Connections
user -> api: HTTP
api -> db: SQL

# Grouping
backend: Backend {
  api
  db
}
```

Install D2: `curl -fsSL https://d2lang.com/install.sh | sh`

## Tips

1. **Preview templates** before generating final output:
   ```bash
   node src/scripts/html-conversion-cli.js preview data-chart
   ```

2. **Use high DPI** for print quality:
   ```bash
   node src/scripts/html-conversion-cli.js template data-chart --data data.json --scale 3
   ```

3. **Custom styling** via template data:
   ```json
   {
     "accentColor": "#6366f1",
     "accentGradient": "#4f46e5",
     "backgroundColor": "#fafafa"
   }
   ```