SkillHub ClubShip Full StackFull Stack

markdown-table-to-image

将 Markdown 表格转换为清晰图片。当用户说"表格看不清"、"生成图片"、"转成图片"时触发。

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars

3,104

Hot score

Updated

March 20, 2026

Overall rating

C4.0

Composite score

4.0

Best-practice grade

B77.6

Install command

npx @skill-hub/cli install openclaw-skills-markdown-table-to-image

Repository

openclaw/skills

Skill path: skills/bg1avd/markdown-table-to-image

将 Markdown 表格转换为清晰图片。当用户说"表格看不清"、"生成图片"、"转成图片"时触发。

Open repository

Best for

Primary workflow: Ship Full Stack.

Technical facets: Full Stack.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: openclaw.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

Install markdown-table-to-image into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
Review https://github.com/openclaw/skills before adding markdown-table-to-image to shared team environments
Use markdown-table-to-image for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: markdown-table-to-image
version: 1.0.2
description: 将 Markdown 表格转换为清晰图片。当用户说"表格看不清"、"生成图片"、"转成图片"时触发。
metadata:
  openclaw:
    requires:
      bins: [node, wkhtmltoimage]
---

# Markdown 表格转图片 v1.0.1

## 流程

1. 解析 Markdown 表格
2. 生成 HTML（单元格内容居中对齐）
3. 用 wkhtmltoimage 输出为图片

## 使用方式

```bash
# 从文本生成
node {baseDir}/scripts/md2img.js "| 列1 | 列2 |
|------|------|
| A | B |" output.png

# 指定宽度（默认900）
node {baseDir}/scripts/md2img.js "表格内容" output.png 1200
```

## 在 Agent 中使用

```
用户: 把这个表格转成图片

Agent:
1. 提取表格内容
2. node ~/.openclaw/workspace/skills/table-to-image/scripts/md2img.js "表格内容" /tmp/table.png
3. 发送图片给用户
```

## 输出

- PNG 格式
- 单元格内容居中对齐
- 支持中英文


---

## Skill Companion Files

> Additional files collected from the skill directory layout.

### _meta.json

```json
{
  "owner": "bg1avd",
  "slug": "markdown-table-to-image",
  "displayName": "Table To Image",
  "latest": {
    "version": "1.0.2",
    "publishedAt": 1772699108897,
    "commit": "https://github.com/openclaw/skills/commit/f395935f1a02f756beaca1ca5e9ef2a01cafb07d"
  },
  "history": []
}

```

### scripts/md2img.js

```javascript
#!/usr/bin/env node

/**
 * Markdown 表格转图片 v1.0.1
 * 
 * 流程：
 * 1. 解析 Markdown 表格
 * 2. 生成 HTML（单元格内容居中对齐）
 * 3. 用 wkhtmltoimage 输出为图片
 */

const fs = require('fs');
const { execSync } = require('child_process');
const path = require('path');
const os = require('os');

// 解析 Markdown 表格
function parseMarkdownTable(text) {
    const lines = text.trim().split('\n');
    const headers = [];
    const rows = [];
    
    for (const line of lines) {
        const trimmed = line.trim();
        if (!trimmed) continue;
        // 跳过分隔行
        if (/^[\|\-\s:]+$/.test(trimmed)) continue;
        
        if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
            const cells = trimmed.slice(1, -1).split('|').map(c => c.trim());
            if (cells.length > 0) {
                if (headers.length === 0) {
                    headers.push(...cells);
                } else {
                    rows.push(cells);
                }
            }
        }
    }
    
    return { headers, rows };
}

// 生成 HTML
function generateHtml(headers, rows) {
    let tableContent = '';
    
    // 表头
    tableContent += '<tr>\n';
    for (const h of headers) {
        tableContent += `    <th>${h}</th>\n`;
    }
    tableContent += '</tr>\n';
    
    // 数据行
    for (const row of rows) {
        tableContent += '<tr>\n';
        for (const cell of row) {
            tableContent += `    <td>${cell}</td>\n`;
        }
        tableContent += '</tr>\n';
    }
    
    return `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
    font-family: 'Noto Sans CJK SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: #1a1a2e;
    padding: 20px;
    display: flex;
    justify-content: center;
}
table {
    border-collapse: collapse;
    background: #16213e;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
th {
    background: #0f3460;
    color: #e94560;
    padding: 15px 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
td {
    color: #fff;
    padding: 12px 20px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #0f3460;
}
tr:last-child td {
    border-bottom: none;
}
</style>
</head>
<body>
<table>
${tableContent}</table>
</body>
</html>`;
}

// 主函数
function main() {
    const args = process.argv.slice(2);
    
    if (args.length < 2) {
        console.error('用法: md2img.js "表格内容" output.png [宽度]');
        process.exit(1);
    }
    
    const tableText = args[0];
    const outputFile = args[1];
    const width = args[2] || '900';
    
    // 解析表格
    const { headers, rows } = parseMarkdownTable(tableText);
    
    if (headers.length === 0) {
        console.error('错误: 没有找到有效表格');
        process.exit(1);
    }
    
    // 生成 HTML
    const html = generateHtml(headers, rows);
    
    // 写临时 HTML 文件
    const tempFile = path.join(os.tmpdir(), `table_${Date.now()}.html`);
    fs.writeFileSync(tempFile, html, 'utf-8');
    
    try {
        // 用 wkhtmltoimage 生成图片
        execSync(`wkhtmltoimage --quality 100 --width ${width} ${tempFile} ${outputFile}`, {
            stdio: 'inherit'
        });
        
        console.log(`Saved: ${outputFile}`);
    } finally {
        // 删除临时文件
        if (fs.existsSync(tempFile)) {
            fs.unlinkSync(tempFile);
        }
    }
}

main();

```