diagram-to-image — Skillopedia

Diagram to Image Convert Mermaid diagrams and Markdown tables to PNG images via the mermaid-red API (diagramless.xyz). Produces high-quality, styled output with custom themes — no heavy local dependencies needed. When to Use Use this skill when: - User has a Mermaid diagram that needs to be converted to an image - User has a Markdown table that needs to be converted to an image - User is writing content for X/Twitter and needs visual exports - User asks to "convert to image", "export as PNG", "make this an image", or similar Prerequisites The bundled script uses Node.js built-in (Node 18+). N…

, line):\n separator_idx = i\n break\n\n if separator_idx > 0:\n # Has headers\n headers = parse_cells(lines[separator_idx - 1])\n sep_cells = parse_cells(lines[separator_idx])\n alignments = []\n for cell in sep_cells:\n cell = cell.strip()\n if cell.startswith(':') and cell.endswith(':'):\n alignments.append('center')\n elif cell.endswith(':'):\n alignments.append('right')\n else:\n alignments.append('left')\n rows = [parse_cells(line) for line in lines[separator_idx + 1:]]\n else:\n # No headers - all data rows\n headers = []\n rows = [parse_cells(line) for line in lines]\n alignments = ['left'] * (len(rows[0]) if rows else 0)\n\n return headers, rows, alignments\n\n\ndef get_font(size: int, bold: bool = False):\n \"\"\"Get a font, falling back to default if system fonts unavailable.\"\"\"\n font_paths = [\n # macOS\n \"/System/Library/Fonts/SFNSMono.ttf\",\n \"/System/Library/Fonts/Helvetica.ttc\",\n \"/Library/Fonts/Arial.ttf\",\n # Linux\n \"/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf\",\n \"/usr/share/fonts/TTF/DejaVuSans.ttf\",\n # Windows\n \"C:/Windows/Fonts/arial.ttf\",\n ]\n\n for path in font_paths:\n try:\n return ImageFont.truetype(path, size)\n except (OSError, IOError):\n continue\n\n # Fallback to default\n return ImageFont.load_default()\n\n\ndef render_table_to_image(\n headers: list[str],\n rows: list[list[str]],\n alignments: list[str],\n scale: int = 2\n) -> Image.Image:\n \"\"\"Render table data to a PIL Image.\"\"\"\n\n # Configuration\n base_font_size = 14\n font_size = base_font_size * scale\n padding_x = 16 * scale\n padding_y = 12 * scale\n border_radius = 8 * scale\n margin = 20 * scale\n\n # Colors\n bg_color = (255, 255, 255)\n header_bg = (249, 250, 251)\n text_color = (55, 65, 81)\n header_text_color = (17, 24, 39)\n border_color = (229, 231, 235)\n\n # Fonts\n regular_font = get_font(font_size)\n bold_font = get_font(font_size, bold=True)\n\n # Calculate column widths\n col_count = len(headers) if headers else (len(rows[0]) if rows else 0)\n col_widths = [0] * col_count\n\n # Create temp image for text measurement\n temp_img = Image.new('RGB', (1, 1))\n temp_draw = ImageDraw.Draw(temp_img)\n\n # Measure headers\n for i, header in enumerate(headers):\n bbox = temp_draw.textbbox((0, 0), header, font=bold_font)\n col_widths[i] = max(col_widths[i], bbox[2] - bbox[0])\n\n # Measure data cells\n for row in rows:\n for i, cell in enumerate(row):\n if i \u003c col_count:\n bbox = temp_draw.textbbox((0, 0), cell, font=regular_font)\n col_widths[i] = max(col_widths[i], bbox[2] - bbox[0])\n\n # Add padding to widths\n col_widths = [w + padding_x * 2 for w in col_widths]\n\n # Calculate dimensions\n row_height = font_size + padding_y * 2\n header_height = row_height if headers else 0\n table_width = sum(col_widths)\n table_height = header_height + len(rows) * row_height\n\n img_width = table_width + margin * 2\n img_height = table_height + margin * 2\n\n # Create image\n img = Image.new('RGB', (img_width, img_height), bg_color)\n draw = ImageDraw.Draw(img)\n\n # Draw table border (rounded rectangle)\n x0, y0 = margin, margin\n x1, y1 = margin + table_width, margin + table_height\n draw.rounded_rectangle([x0, y0, x1, y1], radius=border_radius, outline=border_color, width=scale)\n\n y = margin\n\n # Draw header\n if headers:\n # Header background\n draw.rounded_rectangle(\n [x0, y0, x1, y0 + row_height],\n radius=border_radius,\n fill=header_bg\n )\n # Cover bottom corners of header (they should be square)\n draw.rectangle([x0, y0 + row_height - border_radius, x1, y0 + row_height], fill=header_bg)\n\n # Header border\n draw.line([(x0, y + row_height), (x1, y + row_height)], fill=border_color, width=scale)\n\n # Header text\n x = margin\n for i, header in enumerate(headers):\n bbox = draw.textbbox((0, 0), header, font=bold_font)\n text_width = bbox[2] - bbox[0]\n\n if alignments[i] == 'center':\n text_x = x + (col_widths[i] - text_width) // 2\n elif alignments[i] == 'right':\n text_x = x + col_widths[i] - text_width - padding_x\n else:\n text_x = x + padding_x\n\n text_y = y + padding_y\n draw.text((text_x, text_y), header, fill=header_text_color, font=bold_font)\n x += col_widths[i]\n\n y += row_height\n\n # Draw data rows\n for row_idx, row in enumerate(rows):\n # Row border (except last row)\n if row_idx \u003c len(rows) - 1:\n draw.line([(x0, y + row_height), (x1, y + row_height)], fill=border_color, width=scale)\n\n # Cell text\n x = margin\n for i, cell in enumerate(row):\n if i >= col_count:\n break\n\n bbox = draw.textbbox((0, 0), cell, font=regular_font)\n text_width = bbox[2] - bbox[0]\n\n if i \u003c len(alignments):\n if alignments[i] == 'center':\n text_x = x + (col_widths[i] - text_width) // 2\n elif alignments[i] == 'right':\n text_x = x + col_widths[i] - text_width - padding_x\n else:\n text_x = x + padding_x\n else:\n text_x = x + padding_x\n\n text_y = y + padding_y\n draw.text((text_x, text_y), cell, fill=text_color, font=regular_font)\n x += col_widths[i]\n\n y += row_height\n\n return img\n\n\ndef main():\n if len(sys.argv) \u003c 3:\n print(\"Usage: python3 table_to_image.py \u003cinput.md> \u003coutput.png> [--scale N]\")\n sys.exit(1)\n\n input_path = sys.argv[1]\n output_path = sys.argv[2]\n\n # Parse optional scale argument\n scale = 2\n if '--scale' in sys.argv:\n scale_idx = sys.argv.index('--scale')\n if scale_idx + 1 \u003c len(sys.argv):\n try:\n scale = int(sys.argv[scale_idx + 1])\n except ValueError:\n pass\n\n # Read input\n content = Path(input_path).read_text()\n\n # Parse table\n try:\n headers, rows, alignments = parse_markdown_table(content)\n except Exception as e:\n print(f\"Error parsing table: {e}\")\n sys.exit(1)\n\n if not rows:\n print(\"Error: No data rows found in table\")\n sys.exit(1)\n\n # Render image\n img = render_table_to_image(headers, rows, alignments, scale)\n\n # Save\n output = Path(output_path)\n img.save(output, 'PNG')\n print(f\"Saved: {output} ({img.width}x{img.height})\")\n\n\nif __name__ == '__main__':\n main()\n","content_type":"text/x-python; charset=utf-8","language":"python","size":8011,"content_sha256":"cf73c3e96d4930f80c658d36937f0dda81c0bd215ddf8660b0f877243440f523"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Diagram to Image","type":"text"}]},{"type":"paragraph","content":[{"text":"Convert Mermaid diagrams and Markdown tables to PNG images via the mermaid-red API (diagramless.xyz). Produces high-quality, styled output with custom themes — no heavy local dependencies needed.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use","type":"text"}]},{"type":"paragraph","content":[{"text":"Use this skill when:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"User has a Mermaid diagram that needs to be converted to an image","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"User has a Markdown table that needs to be converted to an image","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"User is writing content for X/Twitter and needs visual exports","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"User asks to \"convert to image\", \"export as PNG\", \"make this an image\", or similar","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Prerequisites","type":"text"}]},{"type":"paragraph","content":[{"text":"The bundled script uses Node.js built-in ","type":"text"},{"text":"fetch","type":"text","marks":[{"type":"code_inline"}]},{"text":" (Node 18+). No npm install needed.","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# The render script is bundled with this skill:\nSKILL_DIR=~/.claude/skills/diagram-to-image/scripts\nls $SKILL_DIR/diagram-to-image.mjs","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Smart Output Location","type":"text"}]},{"type":"paragraph","content":[{"text":"IMPORTANT:","type":"text","marks":[{"type":"strong"}]},{"text":" Determine the best output location based on context. Follow this decision tree:","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. User Specifies Path","type":"text"}]},{"type":"paragraph","content":[{"text":"If user explicitly mentions a path or filename, use that.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Project Context Detection","type":"text"}]},{"type":"paragraph","content":[{"text":"Check for common image/asset directories in the current project:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Check for existing image directories (in order of preference)\nls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1","type":"text"}]},{"type":"paragraph","content":[{"text":"Use the first existing directory found. Common patterns:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - General projects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./assets/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Web projects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./assets/images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Structured web projects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./public/images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Next.js, React projects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./static/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Hugo, other static site generators","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"./img/","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Short form convention","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Article/Document Context","type":"text"}]},{"type":"paragraph","content":[{"text":"If user is writing an article or document:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Look for the document's directory","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create ","type":"text"},{"text":"images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" subdirectory if appropriate","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Name the image based on the document name + descriptor","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Conversation Context","type":"text"}]},{"type":"paragraph","content":[{"text":"Analyze the conversation to determine:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"What the diagram represents","type":"text","marks":[{"type":"strong"}]},{"text":" → Use for filename (e.g., ","type":"text"},{"text":"auth-flow.png","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"user-journey.png","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Related file being discussed","type":"text","marks":[{"type":"strong"}]},{"text":" → Place image near that file","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Topic being discussed","type":"text","marks":[{"type":"strong"}]},{"text":" → Use for naming","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"5. Default Fallback","type":"text"}]},{"type":"paragraph","content":[{"text":"If no context clues:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use current working directory","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Generate descriptive filename from diagram content","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Filename Generation","type":"text"}]},{"type":"paragraph","content":[{"text":"Create meaningful filenames based on content analysis:","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Content Pattern","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Example Filename","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"flowchart","type":"text","marks":[{"type":"code_inline"}]},{"text":" with auth/login","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"auth-flow.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"sequenceDiagram","type":"text","marks":[{"type":"code_inline"}]},{"text":" with API","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"api-sequence.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"erDiagram","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"entity-relationship.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"pie","type":"text","marks":[{"type":"code_inline"}]},{"text":" chart about X","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"x-distribution.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"gantt","type":"text","marks":[{"type":"code_inline"}]},{"text":" chart","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"project-timeline.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Table with comparison","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"comparison-table.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Table with data","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"data-table.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Rules:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use kebab-case (lowercase with hyphens)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keep names concise but descriptive (2-4 words)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Avoid generic names like ","type":"text"},{"text":"diagram.png","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"image.png","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Include topic/subject when identifiable","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Conversion Process","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step 1: Analyze Context","type":"text"}]},{"type":"paragraph","content":[{"text":"Before converting, gather context:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check current working directory","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Look for existing image directories","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Analyze diagram/table content for naming","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Consider any files or topics mentioned in conversation","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step 2: Determine Output Path","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Example logic (implement mentally, not as literal script)\nif user_specified_path:\n output_path = user_specified_path\nelif exists(\"./images\"):\n output_path = \"./images/{generated_name}.png\"\nelif exists(\"./assets\"):\n output_path = \"./assets/{generated_name}.png\"\nelif exists(\"./public/images\"):\n output_path = \"./public/images/{generated_name}.png\"\nelse:\n output_path = \"./{generated_name}.png\"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step 3: Create Temporary Input File","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# For Mermaid diagrams\ncat > /tmp/diagram.mmd \u003c\u003c 'DIAGRAM_EOF'\n\u003cmermaid content>\nDIAGRAM_EOF\n\n# For Markdown tables\ncat > /tmp/table.md \u003c\u003c 'TABLE_EOF'\n\u003ctable content>\nTABLE_EOF","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step 4: Convert via mermaid-red API","type":"text"}]},{"type":"paragraph","content":[{"text":"The API auto-detects content type (mermaid vs table). Both use the same command.","type":"text"}]},{"type":"paragraph","content":[{"text":"Using the bundled script:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Mermaid diagram\nnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o \u003coutput_path>.png\n\n# Markdown table\nnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o \u003coutput_path>.png\n\n# With custom theme\nnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o \u003coutput_path>.png --theme ocean\n\n# Force content type (if auto-detect gets it wrong)\nnode ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o \u003coutput_path>.png --type table","type":"text"}]},{"type":"paragraph","content":[{"text":"Available options:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--theme \u003cname>","type":"text","marks":[{"type":"code_inline"}]},{"text":" — default, dark, forest, neutral, ocean, emerald, midnight, slate, lavender, blueprint","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--type \u003ctype>","type":"text","marks":[{"type":"code_inline"}]},{"text":" — auto (default), mermaid, table","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--scale \u003cn>","type":"text","marks":[{"type":"code_inline"}]},{"text":" — 1-4 (default: 2, for 2x DPI)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--bg \u003ccolor>","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Background color (default: white, use \"transparent\" for no bg)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"--server \u003curl>","type":"text","marks":[{"type":"code_inline"}]},{"text":" — Override server (default: https://diagramless.xyz)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Piping from stdin also works:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"echo \"graph TD; A-->B\" | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs -o out.png\ncat /tmp/table.md | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs --type table -o table.png","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step 5: Report Result","type":"text"}]},{"type":"paragraph","content":[{"text":"After conversion, tell the user:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Full path","type":"text","marks":[{"type":"strong"}]},{"text":" where image was saved","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Why","type":"text","marks":[{"type":"strong"}]},{"text":" that location was chosen (briefly)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"File size","type":"text","marks":[{"type":"strong"}]},{"text":" in bytes (printed by the script)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Suggest they can specify a different location if needed","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Examples","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Example 1: Project with images/ directory","type":"text"}]},{"type":"paragraph","content":[{"text":"Context:","type":"text","marks":[{"type":"strong"}]},{"text":" User is in a project that has ","type":"text"},{"text":"./images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory, discussing authentication.","type":"text"}]},{"type":"paragraph","content":[{"text":"User:","type":"text","marks":[{"type":"strong"}]},{"text":" \"Convert this to an image\"","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"flowchart TD\n A[Login] --> B{Valid?}\n B -->|Yes| C[Dashboard]\n B -->|No| D[Error]","type":"text"}]},{"type":"paragraph","content":[{"text":"Action:","type":"text","marks":[{"type":"strong"}]}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Detect ","type":"text"},{"text":"./images/","type":"text","marks":[{"type":"code_inline"}]},{"text":" exists","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Analyze content → authentication flow","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Generate filename: ","type":"text"},{"text":"login-flow.png","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Save content to ","type":"text"},{"text":"/tmp/diagram.mmd","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Run: ","type":"text"},{"text":"node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./images/login-flow.png","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Example 2: Writing X article about AI with ocean theme","type":"text"}]},{"type":"paragraph","content":[{"text":"Context:","type":"text","marks":[{"type":"strong"}]},{"text":" User mentioned writing an article about AI agents for X.","type":"text"}]},{"type":"paragraph","content":[{"text":"User:","type":"text","marks":[{"type":"strong"}]},{"text":" \"Make this a PNG with ocean theme\"","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"flowchart LR\n User --> Agent --> Tools --> Response","type":"text"}]},{"type":"paragraph","content":[{"text":"Action:","type":"text","marks":[{"type":"strong"}]}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Save content to ","type":"text"},{"text":"/tmp/diagram.mmd","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Run: ","type":"text"},{"text":"node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./ai-agent-flow.png --theme ocean","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Example 3: Data comparison table","type":"text"}]},{"type":"paragraph","content":[{"text":"User:","type":"text","marks":[{"type":"strong"}]},{"text":" \"Export this table as image\"","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"| Model | Speed | Accuracy |\n|-------|-------|----------|\n| GPT-4 | Slow | High |\n| Claude | Fast | High |","type":"text"}]},{"type":"paragraph","content":[{"text":"Action:","type":"text","marks":[{"type":"strong"}]}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Save content to ","type":"text"},{"text":"/tmp/table.md","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Run: ","type":"text"},{"text":"node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o ./model-comparison.png","type":"text","marks":[{"type":"code_inline"}]},{"text":" (auto-detects as table)","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Example 4: User specifies location","type":"text"}]},{"type":"paragraph","content":[{"text":"User:","type":"text","marks":[{"type":"strong"}]},{"text":" \"Save this diagram to ~/Desktop/my-chart.png\"","type":"text"}]},{"type":"paragraph","content":[{"text":"Action:","type":"text","marks":[{"type":"strong"}]},{"text":" Use exactly ","type":"text"},{"text":"~/Desktop/my-chart.png","type":"text","marks":[{"type":"code_inline"}]},{"text":" as output path.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Error Handling","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"If the API server is unreachable, the script prints a clear error message","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"If content type auto-detection fails, use ","type":"text"},{"text":"--type mermaid","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"--type table","type":"text","marks":[{"type":"code_inline"}]},{"text":" explicitly","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"For local development/testing, use ","type":"text"},{"text":"--server http://localhost:3000","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},"metadata":{"date":"2026-11-02","name":"diagram-to-image","author":"@skillopedia","source":{"stars":139,"repo_name":"01coder-agent-skills","origin_url":"https://github.com/sugarforever/01coder-agent-skills/blob/HEAD/skills/diagram-to-image/SKILL.md","repo_owner":"sugarforever","body_sha256":"8c0291ecc683f0cf5f443371228ae538d829603d47a3d6e970dc4a7763bdbdc4","cluster_key":"23b65fa237a11825c3982732344a4292535ca44c294b150d6e9bde7929cb2325","clean_bundle":{"format":"clean-skill-bundle-v1","source":"sugarforever/01coder-agent-skills/skills/diagram-to-image/SKILL.md","text_bytes":10910,"source_commit":"6f009ba0e3353df03139d477a0a14cd94e785fc9","skills_sh_rank":19460,"attachment_count":2,"text_attachments":2,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"skills/diagram-to-image/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"documents-office","category_label":"Documents"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"documents-office","import_tag":"skills-sh-top20k-2026-11","description":"Convert Mermaid diagrams and Markdown tables to images (PNG) for platforms that don't support rich formatting. Use when user asks to \"convert to image\", \"export as PNG\", \"make this an image\", or has content for X/Twitter that needs visual exports."}},"renderedAt":1793672006603}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.