ツール / VSCode / 環境構築

VSCode Markdown — 必須 Plugin・便利 Plugin

VSCode 標準の Markdown プレビューをさらに強化する拡張機能を紹介します。技術ドキュメント・README・設計書・ブログ執筆など、 Markdown を快適に書くための必須プラグインから図表・PDF エクスポートまで対応する便利プラグインまで解説します。

VSCode Markdown ドキュメント Mermaid PlantUML ⏱ 18 min

1. VSCode 標準の Markdown 機能

VSCode は追加拡張なしでも以下の Markdown 機能を標準で持っています。まず標準機能を把握した上で、必要な拡張を追加していくのが効率的です。

リアルタイムプレビュー — Ctrl+Shift+V でプレビューを開く
分割プレビュー — Ctrl+K → V でエディタと並べて表示
アウトライン — 見出し（#〜######）をサイドバーのアウトラインに自動表示
スニペット — ul・ol・table などの入力補完
リンク補完 — [text]( と入力するとファイル候補が表示

✅ 標準プレビューで使える数学記法
VSCode 1.86 以降は KaTeX を内蔵しており、 $E=mc^2$ （インライン）や $$\sum_{i=1}^n$$（ブロック）が標準プレビューでもレンダリングされます。

2. 必須 Plugin

Plugin 名	種別	役割
Markdown All in One	必須	Markdown 執筆に必要な機能を一本化した最強プラグイン。目次（TOC）の自動生成・更新、見出しの番号付け、リストの自動継続、ショートカット（太字・イタリック・取り消し線）、数学記法（KaTeX）のプレビュー強化、GitHub Flavored Markdown 対応など多機能。 Markdown を書く人はまず入れるべき拡張。
markdownlint	必須	CommonMark / GitHub Flavored Markdown の記法ルール違反をリアルタイムに検出。見出しの重複・不要なスペース・リストのインデントずれなどを波線で警告する。ドキュメントの品質を一定に保つために不可欠。

3. 便利 Plugin

プレビュー強化

Plugin 名	種別	役割
Markdown Preview Enhanced	便利	標準プレビューを大幅に強化。Mermaid・PlantUML・KaTeX・CSV テーブルのレンダリング、スライド出力（Reveal.js）、HTML / PDF / Word / PNG へのエクスポートが可能。技術文書をヘビーに使う人向けの多機能プラグイン。
Markdown Preview Mermaid Support	便利	VSCode 標準のプレビューに Mermaid 図（フロー・シーケンス・ガント・ER 図）を追加するだけのシンプルな拡張。「Markdown Preview Enhanced」より軽量で最低限の Mermaid だけ使いたい場合に向いている。

執筆・補完

Plugin 名	種別	役割
Markdown Table	便利	Markdown のテーブルを整列・成形する。列をタブキーで移動でき、行・列の追加・削除もコマンドで実行できる。手書きでは崩れがちな表の管理が格段に楽になる。
Paste Image	便利	クリップボードの画像を `Ctrl`+`Alt`+`V` でそのまま貼り付け。画像ファイルを自動保存して `![](path/to/image.png)` のリンクを挿入してくれる。スクリーンショットを多用する技術文書の執筆に便利。
Markdown Links	便利	Markdown 内のリンク（他 .md ファイルへの参照）のバリデーションと定義ジャンプに対応。ファイルを削除・移動したときのリンク切れをエラーとして検出する。
Word Count	便利	現在開いているファイルの文字数・単語数をステータスバーに常時表示。ブログ記事や仕様書の分量管理に役立つ。

エクスポート・変換

Plugin 名	種別	役割
Markdown PDF	便利	Markdown ファイルを PDF / HTML / PNG / JPEG に変換。右クリックメニューから「Markdown PDF: Export (pdf)」を選ぶだけで Chromium ベースの高品質 PDF が出力される。ヘッダー・フッター・カスタム CSS にも対応。
vscode-pandoc	便利	pandoc コマンドを VSCode から呼び出し、Markdown を Word（.docx）・HTML・LaTeX などへ変換する。技術文書を Word で提出しなければならない場面で重宝する。

4. 図表作成 Plugin（Mermaid / PlantUML）

Mermaid

Mermaid はテキストベースで図を記述するツールです。 GitHub・Notion・Confluence など多くのツールに対応しており、 Git でバージョン管理できる点が大きなメリットです。

Plugin 名	役割
Markdown Preview Mermaid Support	標準プレビューに Mermaid を追加する軽量拡張。
Mermaid Chart	Mermaid 公式が提供する拡張。クラウドエディタとの連携・PNG エクスポートが可能。

以下は Mermaid でシーケンス図を書く例です。

Markdown — Mermaid シーケンス図の例

```mermaid
sequenceDiagram
    autonumber
    actor User
    User->>+Browser: GET /login
    Browser->>+Server: POST /api/auth
    Server-->>-Browser: 200 OK { token }
    Browser-->>-User: ログイン画面を表示
```

PlantUML

PlantUML はより多彩な図（クラス図・ユースケース図・コンポーネント図など）を記述できます。ただし Java と Graphviz のインストールが必要です。

Plugin 名	役割
PlantUML	.puml / .pu ファイルのリアルタイムプレビュー・PNG/SVG エクスポートに対応。ローカルサーバーモードまたはリモート PlantUML サーバーを利用可能。

5. Markdown 向け settings.json

JSON — settings.json（Markdown 設定）

{
  // ── Markdown 基本 ────────────────────────────────
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.lineNumbers": "off",
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
    },
    "editor.defaultFormatter": "yzhang.markdown-all-in-one",
    "editor.formatOnSave": false   // Markdown は手動整形推奨
  },

  // ── Markdown All in One ──────────────────────────
  "markdown.extension.toc.levels": "2..6",
  "markdown.extension.toc.updateOnSave": true,
  "markdown.extension.toc.orderedList": false,
  "markdown.extension.print.absoluteImgPath": true,

  // ── markdownlint ─────────────────────────────────
  "markdownlint.config": {
    "MD013": false,    // 行長制限を無効（日本語文章では不便）
    "MD033": false,    // インライン HTML を許可
    "MD041": false     // ファイル先頭の H1 必須を無効
  },

  // ── プレビュー ────────────────────────────────────
  "markdown.preview.fontSize": 15,
  "markdown.preview.lineHeight": 1.8,
  "markdown.preview.fontFamily": "'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif",

  // ── Markdown Preview Enhanced ─────────────────────
  "markdown-preview-enhanced.previewTheme": "github-light.css",
  "markdown-preview-enhanced.enableExtendedTableSyntax": true,
  "markdown-preview-enhanced.mermaidTheme": "default"
}

6. よく使うショートカット（Markdown All in One）

操作	Windows / Linux	macOS
プレビューを開く	`Ctrl`+`Shift`+`V`	`Cmd`+`Shift`+`V`
分割プレビュー	`Ctrl`+`K` → `V`	`Cmd`+`K` → `V`
太字	`Ctrl`+`B`	`Cmd`+`B`
イタリック	`Ctrl`+`I`	`Cmd`+`I`
取り消し線	`Alt`+`S`	`Opt`+`S`
見出しレベル UP	`Ctrl`+`Shift`+`]`	`Cmd`+`Shift`+`]`
見出しレベル DOWN	`Ctrl`+`Shift`+`[`	`Cmd`+`Shift`+`[`
TOC を挿入・更新	コマンドパレット「目次を作成」	コマンドパレット「目次を作成」
チェックボックスの ON/OFF	`Alt`+`C`	`Opt`+`C`

7. まとめ

カテゴリ	Plugin	ポイント
必須	Markdown All in One	TOC 生成・ショートカット・見出し番号付けを一本化。Markdown ユーザー全員入れるべき。
必須	markdownlint	記法の違反をリアルタイム検出。品質管理に不可欠。
プレビュー	Markdown Preview Enhanced	Mermaid・数式・PDF 出力まで対応する多機能版プレビュー。
表	Markdown Table	タブキーでセル移動・表の自動整列。手書き表のストレスを解消。
画像	Paste Image	クリップボードから直接貼り付けてパスを自動挿入。
エクスポート	Markdown PDF	右クリックで PDF / HTML 出力。共有・提出に便利。
図表	Mermaid	フロー・シーケンス・ガント・ER 図をテキストで管理。Git 管理と相性抜群。