メニュー
Convert Obsidian markdown documents (with Mermaid diagrams, tables, wiki links) to professional A4 PDF using Playwright. Use when user requests PDF export of markdown files.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create interactive HTML road-trip guides for multi-day driving itineraries. Use when an AI agent is asked to plan a road trip, build a travel itinerary page, make a fullscreen route map, estimate trip cost/time, compare restaurant or lodging alternatives, add POIs with photos and Google Maps links, or produce a self-contained HTML guide for any road trip.
Set up a new AI4PKM vault from scratch or migrate an existing vault to the latest template version. Detects current state, generates a plan, and applies changes with full backup safety.
고비 데스크탑 3.0 대화형 음성 온보딩 가이드
Create animated GIF slideshows from structured content. Use when the user asks to create a GIF summary, animated slide recap, GIF presentation, or visual summary GIF for events, meetups, presentations, or any multi-point content. Supports Korean text, dark/light themes, custom colors, progress indicators, and quote boxes. Ideal for social media sharing (Gobi Brain Updates, Slack, etc).
Convert DOCX files into markdown while preserving headings, lists, tables, metadata, and extracted images.
Convert EPUB files into a single well-formatted markdown document with extracted metadata, table of contents, and images.
| name | md-to-pdf |
| description | Convert Obsidian markdown documents (with Mermaid diagrams, tables, wiki links) to professional A4 PDF using Playwright. Use when user requests PDF export of markdown files. |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| license | MIT |
Convert Obsidian markdown files to styled A4 PDF documents with full support for Mermaid diagrams, tables, wiki links, embedded images (![[image.png]]), and Korean text.
Activate when the user:
markdown, playwrightplaywright install chromium)python3 -c "import markdown; from playwright.sync_api import sync_playwright"pip3 install markdown playwright && python3 -m playwright install chromium--- blocks- [ ] → ☐, - [x] → ☑![[image.png]] to base64 <img> tags (placeholder swap)[[link|display]] → display text, [[link]] → link textmarkdown library with tables, fenced_code, attr_list extensions<img> tags```mermaid code blocks and convert to <div class="mermaid"> with type-specific CSS classesGenerate a self-contained Python script at /tmp/md_to_pdf.py with the following parameters extracted from user request:
INPUT = "<source markdown file path>"
OUTPUT = "_Outbox_/PDF/<filename>.pdf" # always output to _Outbox_/PDF/
TITLE = "<document title>" # extracted from H1 or filename
AUTHOR = "<author name>" # from frontmatter or user request
DATE = "<YYYY-MM-DD>" # from frontmatter or today
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>/* see CSS Rules below */</style>
<script src="mermaid CDN"></script>
</head>
<body>
<div class="doc-meta">AUTHOR | DATE</div>
<h1>TITLE</h1>
{converted HTML body}
<script>mermaid.initialize({...})</script>
</body>
</html>
@page { size: A4; margin: 20mm 18mm 25mm 18mm; }
body { font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: 11pt; line-height: 1.6; }
Container sizing by diagram type:
.mermaid): max-width: 100% — timeline, gantt, sequence, graph LR diagrams use full page width.mermaid-flowchart): max-width: 420px — only flowchart TB, flowchart TD, graph TB, graph TD get constrained to prevent oversized renderingtext-align: center; margin: 16px auto; overflow: visiblemax-width: 100% !important; height: auto !importantType detection logic (in wrap_mermaid_blocks):
stripped = code.strip().lower()
if stripped.startswith(('flowchart tb', 'flowchart td', 'graph tb', 'graph td')):
cls = 'mermaid mermaid-flowchart' # constrained width
else:
cls = 'mermaid' # full width
Mermaid initialization:
mermaid.initialize({
startOnLoad: true,
theme: 'default',
flowchart: { useMaxWidth: true, htmlLabels: true },
sequence: { useMaxWidth: true },
themeVariables: { fontSize: '13px' }
});
Key lessons:
fontSize per diagram type config (e.g., flowchart.fontSize) — it makes non-flowchart diagrams too smallthemeVariables.fontSize as the single global font size controlmax-width on the container, not font size reductiongraph LR is a horizontal layout and should NOT be constrained — only TB/TD directions overflowUse Playwright's display_header_footer — do NOT also use CSS @page @bottom-center (causes duplication).
await page.pdf(
...,
display_header_footer=True,
header_template='<span></span>',
footer_template='<div style="width:100%;text-align:center;font-size:8pt;color:#888;font-family:Apple SD Gothic Neo,sans-serif;">TITLE | p. <span class="pageNumber"></span></div>'
)
Place above H1 as right-aligned metadata:
<div class="doc-meta">AUTHOR | DATE</div>
.doc-meta { text-align: right; color: #666; font-size: 10pt; margin-bottom: 4px; }
Problem: Python's markdown library requires a blank line between a paragraph and a bullet list. Without it, list items render as inline text inside a <p> tag instead of proper <ul><li> elements.
Example of broken markdown:
**논의 포인트**:
- 항목 1
- 항목 2
This renders as <p><strong>논의 포인트</strong>:\n- 항목 1\n- 항목 2</p> — all one paragraph, no bullets.
Fix: Two transformations needed:
- that follows non-list textdef fix_list_breaks(md_text):
lines = md_text.split('\n')
result = []
for i, line in enumerate(lines):
stripped = line.strip()
is_top_level_bullet = stripped.startswith('- ') and not line.startswith(' ')
# Insert blank line before top-level bullets following paragraph text
if (is_top_level_bullet and
i > 0 and
not lines[i-1].strip().startswith('- ') and
not lines[i-1].strip().startswith(' - ') and
lines[i-1].strip() != ''):
result.append('')
# Convert 2-space indent to 4-space for proper nesting
if line.startswith(' - ') and not line.startswith(' - '):
line = ' ' + line.lstrip(' ')
result.append(line)
return '\n'.join(result)
Key lesson: Obsidian uses 2-space indentation for sub-lists, but Python markdown library requires 4-space. Always normalize indentation before conversion.
Processing order — must run BEFORE markdown conversion:
md_text = strip_frontmatter(md_text)
md_text = convert_checkboxes(md_text)
md_text = fix_list_breaks(md_text) # NEW: ensure proper list parsing
md_text = extract_images_to_placeholders(md_text)
md_text = convert_wiki_links(md_text)
html = markdown.markdown(md_text, ...)
html = restore_placeholders(html)
CRITICAL: Image extraction (![[...]]) MUST happen BEFORE wiki link conversion ([[...]]).
convert_wiki_links uses r'\[\[([^\]]+)\]\]' which also matches the inner [[...]] of ![[image.png]], stripping the image embed. Always extract images first, replace with text placeholders, then convert wiki links.
Processing order:
md_text = strip_frontmatter(md_text)
md_text = convert_checkboxes(md_text)
md_text = extract_images_to_placeholders(md_text) # ![[img]] → PLACEHOLDER
md_text = convert_wiki_links(md_text) # [[link]] → text
html = markdown.markdown(md_text, ...)
html = restore_placeholders(html) # PLACEHOLDER → <img base64>
Image search paths (tried in order):
_files_/ subdirectory relative to the markdown file's parentIMG_DIR if setCSS for embedded images:
.embedded-img {
display: block;
max-width: 100%;
height: auto;
margin: 16px auto;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
Obsidian wiki links are not valid HTML. Convert before markdown processing:
[[Page|Display Text]] → Display Text[[Page Name]] → Page Namepython3 /tmp/md_to_pdf.py
The script:
/tmp/<name>.html for debuggingopen "<output path>"_Outbox_/PDF/<filename>.pdf (ensure directory exists with mkdir -p)/tmp/<name>.html