Markdown から画像を生成

Markdown から画像へ変換 — スクリーンショット不要で .md をそのまま共有用 PNG に

ブラウザ上で動く Markdown → 画像 ジェネレーターです。生の Markdown をそのまま見せるには見づらく、かといってスクリーンショットを手動で撮るのも面倒——そんなシーンで活躍します。README、リリースノート、コードスニペット、アーキテクチャ図、チェックリストなど、どんな Markdown でも貼り付けるだけで、Twitter/X・LinkedIn・Slack・Discord・GitHub Issue・スライドに即貼りできる綺麗な PNG が手に入ります。

「markdown 画像 変換」「markdown png 変換」「Markdown スクリーンショット」「コードスニペット 画像化」「Carbon 代替 Markdown 対応」——そういったキーワードで辿り着いた方に最適なワークフローです。

なぜ Markdown を画像にするのか — HTML でも PDF でもなく

Markdown → HTML はマークアップをそのまま表示できる媒体への公開向き、Markdown → PDF はスクロールして読む文書や保存向きです。Markdown → 画像 はその中間にある場所——チャットスレッド、SNS タイムライン、スライド、ステータスページ、バグレポートなど、相手に「見せる」だけで事足りるシーン向けの出力形式です。

Markdown を画像に変換したくなる代表的な場面：

• 整ったフォーマットの内容を Twitter/X、LinkedIn、Bluesky、Threads、Mastodon に投稿したいが、*アスタリスク* や # 井桁 をそのまま晒したくない。
• コードレビューのまとめ、スタックトレース、エラーログを Slack、Discord、Microsoft Teams に一枚の画像として共有したい。
• レンダリング済みの .md スナップショットを GitHub Issue、Linear チケット、Notion ページ に添付し、書式崩れを防ぎたい。
• GitHub README プレビューや VS Code プレビュー、ドキュメントサイトの 手動スクリーンショット を、再現性のある画像出力に置き換えたい。
• コードブロック、Mermaid ダイアグラム、LaTeX 数式 を自己完結型のビジュアル素材としてスライドや教材に活用したい。

ここで多くの人が Carbon や ray.so を思い浮かべますが、これらは短いコードスニペット専用です。テーブル、タスクリスト、数式、Mermaid、引用ブロックには対応していません。本ツールはフル Markdown をサポートしています。

スクリーンショットを撮らない「Markdown スクリーンショットツール」

Markdown → 画像フローの本質は、OS のスニッピングツールから卒業することにあります。出力される PNG はモニター上のピクセルをキャプチャしたものではなく、レンダリング結果から直接生成された本物のラスタ画像です。

• エクスポートは レンダリングされたプレビューをそのまま読み取る ため、見出し・テーブル・コードブロックのレイアウトがブラウザのズーム率やウィンドウサイズに左右されません。
• 長い内容は 1 枚の縦長画像として出力 され、キャンバスの安全上限を超える場合は自動的に複数の PNG に分割されます。手動での貼り合わせは不要です。
• Retina 品質（2× デバイスピクセル） で描画するため、高解像度ディスプレイ、プロジェクター、SNS タイムラインでもテキストがくっきり表示されます。
• ウォーターマークやブランドロゴは一切なし。ダウンロードした PNG がそのまま使える最終成果物です。

// PNG export reads the rendered preview, not the screen
export async function shareSnippet(markdown: string) {
  const png = await renderToPng(markdown, { theme: 'paper', scale: 2 });
  return png; // a clean, watermark-free image
}

Carbon / ray.so の代替 — フル Markdown 対応

Carbon、ray.so、polacode といったコードスニペット画像化ツールは、単一のフェンスドコードブロックを前提に作られています。見出しやリスト、テーブル、説明文、Mermaid ダイアグラムを含む内容を一枚にまとめたい場合、これらのツールでは対応しきれません。

本コンバーターは GitHub Flavored Markdown を出発点としているため、一枚の「コードカード」に以下を同時に含められます：

• スニペットの背景を伝える 見出し
• 動作を解説する 本文テキスト
• 実際の 構文ハイライト付きコードブロック
• それに続く テーブル、タスクリスト、コールアウト
• 必要に応じた Mermaid ダイアグラム や LaTeX 数式

// Tables, code, and prose all export together
function highlight(snippet: string): string {
  return shiki.codeToHtml(snippet, { lang: 'ts' });
}

機能	Carbon / ray.so	本ツール
フェンスドコードブロック	✓	✓
見出し・リスト・テーブル・引用	✗	✓
GFM タスクリスト - [ ]	✗	✓
LaTeX 数式（KaTeX）	✗	✓
Mermaid ダイアグラム	✗	✓
長文 Markdown の自動分割	✗	✓
ウォーターマーク / ブランド	任意	なし

PNG 出力用に選べる 3 つの組み込みテーマ

エクスポートされる画像には、プレビューで選択したテーマがそのまま適用されます。画面で見たデザインが、そのまま出力ファイルに反映されます。ワークベンチには 3 つのプリセットが用意されています：

• Paper — 暖かみのある上品なスタイル。チュートリアル、ニュースレター、デザインアップデート、プロダクト解説など、ターミナル風ではなく「美しい Markdown 画像」を求める場面に最適です。
• Blueprint — くっきりしたハイコントラストの技術系スタイル。チェンジログ、RFC、エンジニアリングアナウンスに向いています。
• Nocturne — 本格的な ダークモード。コード中心の投稿、開発者向け SNS カード、黒い IDE ウィンドウと並べても違和感のないスクリーンショットに最適です。

テーマを選んでからエクスポートすれば、プレビューとピクセル単位で一致した PNG が得られます。

Markdown → PNG 変換で保持されるコンテンツ

エクスポート処理はレンダリング済みプレビューをそのままラスタライズするため、「画像モード」への切り替えは発生しません。画面上に表示されている Markdown の機能すべてが、そのまま PNG に含まれます。

GitHub Flavored Markdown

• 見出し 一貫した垂直リズム
• テーブル 列揃えに対応
• タスクリスト - [ ] / - [x] チェックボックス
• フェンスドコードブロック 言語別構文ハイライト
• 引用ブロック とコールアウト
• 脚注・自動リンク・取り消し線

LaTeX 数式

$E = mc^2$ のようなインライン数式やディスプレイ数式は、画像キャプチャの前に KaTeX で描画されます。学術的な内容も PDF リーダーの画面を別途スクリーンショットすることなく、クリーンな PNG として出力できます。

$$\sigma(x) = \frac{1}{1 + e^{-x}}$$

Mermaid ダイアグラム

フローチャートやシーケンス図はプレビュー上で鮮明な SVG として表示され、PNG 生成時にもシャープさを保ちます：

flowchart LR
  Source[Markdown] --> Preview[テーマ付きプレビュー]
  Preview --> Slice[長い場合は自動分割]
  Slice --> PNG[.png をダウンロード]
  PNG --> Share[Twitter / Slack / GitHub]

出力の詳細：サイズ・自動分割・画質

生成される PNG について、実際に使ううえで押さえておきたいポイントです：

• 幅 はプレビュー列の幅に基づくため、ブラウザのウィンドウサイズに依存しません。同じ Markdown なら毎回安定した幅で出力されます。
• 長い内容は自動的に分割 され、単一キャンバスがラスタライザの安全上限を超えた場合は複数ファイル（-1.png、-2.png …）が生成されます。長い README が途中で切れてしまう心配はありません。
• 解像度 は 2× デバイスピクセルで出力。Retina ディスプレイや、アップロード時に再圧縮がかかる SNS タイムラインにも適した密度です。
• フォーマットは PNG のみ — これは意図的な設計です。PNG はテキストの縁やコードブロックの背景、細い罫線を綺麗に保てます。JPG にすると、小さな文字やハイライトされたコードの周囲に圧縮ノイズが発生しやすく、Markdown 画像化の目的に反します。
• プライバシー — レンダリングとラスタライズはすべてブラウザ内で完結します。共有リンクを明示的に作成しない限り、Markdown ソースも生成された PNG もデバイスの外に送信されることはありません。

エクスポート前のチェックリスト

• Markdown を貼り付ける、または .md / .markdown ファイルをアップロード
• テーマを選択：Paper（暖色系）、Blueprint（技術系）、Nocturne（ダーク）
• コードブロック、テーブル、Mermaid の前後の余白をプレビューで確認
• LaTeX 数式と絵文字が意図どおりにレンダリングされているか確認
• ワークベンチヘッダーの Export から Image (PNG) を選択
• プレビューが長い場合、番号付きの複数 PNG ファイルが出力される点を確認
• 出来上がった画像を Twitter/X、LinkedIn、Slack、Discord、GitHub、スライドに貼り付け

上のサンプルをご自身の Markdown に差し替え、テーマを選び、プレビューが仕上がりイメージと合致したらエクスポートしてください。