Markdown Visual Editor

EN: A WYSIWYG Markdown editor for VS Code. Edit Markdown directly in its rendered preview, with GUI editing for 21 Mermaid diagram types (flowchart, sequence, class, ER, mindmap, gantt, quadrant, state, pie, journey, gitGraph, timeline, requirement, C4, sankey, xychart, block, ZenUML, packet, architecture, kanban), LaTeX math (KaTeX) for $...$ / $$...$$ / ```math blocks, and GUI table editing (cell-text wrapping, drag-to-resize columns). Text is edited in H1/H2 section units, blocks can be added by right-click or keyboard alone, Mermaid diagrams zoom and pan right in the preview, and unsaved blocks are highlighted live so you can see exactly what changed before saving. All libraries are bundled locally — no telemetry, no authentication, no network calls by the extension itself.

Markdown ファイルを プレビュー表示のまま直接編集 できる VS Code 拡張機能です。
Mermaid ダイアグラム 21 種類 のビジュアル（GUI）編集、LaTeX 数式 (KaTeX) のインライン・ディスプレイレンダリング、テーブルの GUI 編集（セル内折り返し・列幅のドラッグ調整）に対応しています。
本文テキストは H1 / H2 の見出しセクション単位 で編集し、ブロックの追加は右クリックやキーボードだけで完結。Mermaid 図はプレビュー上で ズーム・パン できます。
未保存のブロックはリアルタイムでハイライトされ、保存前に「どこを変えたか」を一目で確認できます。

ライブラリはすべて同梱 — 拡張機能自体はネットワーク通信を行わず（Mermaid・KaTeX・フォントも同梱）、テレメトリも送信しません。

主な機能

WYSIWYG Markdown 編集

• 見出し・段落・リスト・コードブロックなどがレンダリングされた状態で表示
• ブロックを ダブルクリック（または選択して Enter / F2）すると Markdown ソースが表示され、その場で編集
• Escape / Ctrl+Enter / ブロック外クリックで確定、即座に再レンダリング
• 編集内容はファイルに反映され、保存は VS Code 標準の Ctrl+S
• 未保存・変更箇所のハイライト — 最後に保存した内容と異なるブロックを、左端のガターバー + 淡い背景 + 「未保存」バッジで強調表示。VS Code 標準の差分がカスタムエディタには届かないため、変更前後の比較をビジュアル表示のまま確認できます。保存 (Ctrl+S) するとハイライトは解除されます。
• ブロックの並べ替え（ドラッグ & ドロップ） — ブロック左端のハンドル ⋮⋮（ホバーで表示）またはブロック自体を掴んで、任意のブロックの上下にドロップして順序を入れ替え。複数選択した状態でドラッグすると一括で移動。
• ブロックの削除 — 右クリックメニューの「🗑 削除」または Delete キーで削除（削除前に内容を自動的にクリップボードへコピーし、誤操作からの復旧を支援）。
• 画像表示・ドラッグ & ドロップ挿入 — ![alt](https://github.com/kaeru758/md-visual-editor/raw/HEAD/path.png) の相対パスは Markdown ファイルのディレクトリを基準にホスト拡張側で解決し、WebView の CSP 制約下でも表示。file:// 絶対パスや data: URL も対応。エクスプローラー等から画像ファイルをブロック上や余白にドロップすると、Markdown と同階層の images/ フォルダに保存して ![alt](https://github.com/kaeru758/md-visual-editor/raw/HEAD/images/…) を挿入します（png / jpg / gif / webp / svg / bmp / ico / avif）。
• 数式 (LaTeX / KaTeX) — インライン $E = mc^2$、ディスプレイ $$ ... $$、および ```math コードブロックを KaTeX で完全ローカルにレンダリング。数式ブロックはダブルクリックで TeX ソースを直接編集。

ブロックの単位 — H1 / H2 セクション

本エディタは Markdown を「ブロック」単位で編集します。ブロックの区切りは次のルールです。

見出しごとにまとまった単位で編集できるため、文章の推敲は「セクションを丸ごと開いて直す」流れになり、図表は従来どおり個別に GUI 編集できます。

ブロックの追加

• 右クリック → 「⬆ 上にブロックを追加…」「⬇ 下にブロックを追加…」
• キーボード → Ctrl+Enter（下に追加）/ Ctrl+Shift+Enter（上に追加）

選べる種類: 段落 / H1・H2・H3 見出し / 箇条書き / 番号付きリスト / タスクリスト / 表 / コードブロック / 数式 / 引用 / 水平線 / Mermaid ダイアグラム（20 種のピッカー）。
追加したブロックは そのまま編集状態 に入ります。

キーボード操作

ブロック選択中（編集していない状態）:

テキスト編集中:

「移動 → 編集 → 確定 → 移動」をマウスに持ち替えずに繰り返せます。

ツールバー

ワンクリックで以下の要素を挿入：

挿入位置ピッカー: ブロック編集中でない場合、ツールバーボタンを押すと挿入位置選択ダイアログが表示され、「先頭に挿入」または任意のブロックの後に挿入できます。ブロックを選択した状態で押すと、そのブロックが最初から選択された状態で開くので、Enter でそのまま確定できます。

ツールバー右端のユーティリティ

テキストエディタとの往復

• ビジュアル → テキスト: ツールバー右端の 📝 ボタン
• テキスト → ビジュアル: .md を標準テキストエディタで開いている間、エディタ右上に表示される 「Markdown ビジュアルエディタで開く」 ボタン（コマンドパレットの Markdown Visual Editor: Markdown ビジュアルエディタで開く からも実行可能）

リンクのクリック動作

• レンダリングされたリンクを クリックすると開きます（修飾キーは不要）
  • http:// / https:// / mailto: → 外部ブラウザ・メーラー
  • その他（相対パスなど）→ VS Code 内で vscode.open で開く

テーブル GUI 編集

• セルの直接入力・編集
• 行・列の追加／削除（右クリックメニューからも操作可能）
• セル内テキストの折り返し — 長文がセル幅を超えても見切れず、編集中も自動で折り返して全体を表示。セル内で改行するとマークダウン上は <br> として保存され、再編集時には改行として復元されます。
• 列幅のドラッグ調整 — ヘッダー右端の境界をドラッグして列幅を変更（編集モード時のみ）。表示上の調整で、マークダウン側のテーブルには影響しません。

⚠️ 制限: 列の配置指定（:--- / :---: / ---:）には未対応です。配置指定を含む既存のテーブルをビジュアルエディタで編集して保存すると、配置指定は失われます。配置を保持したい表は 📝 ボタンでテキストエディタを使って編集してください。

Mermaid ダイアグラム — ビジュアルエディタ

Markdown 内の Mermaid コードブロックを自動検出し、ダイアグラム種別に応じた専用ビジュアルエディタを起動します。
SVG プレビューと設定パネルを併用した直感的な GUI 操作で、Mermaid 構文を知らなくても図を作成・編集できます。

共通 UX 基盤（全 21 種に適用）

• 初回オンボーディングヒント — 各エディタを初めて開いた際に使い方ガイドを表示。「次回から表示しない」を保存
• キーボードショートカット — Delete 削除 / ↑↓ フォーカス移動 / Enter 編集
• ドラッグ & ドロップ並び替え — 左パネルのリスト項目を掴んで並べ替え
• 右クリックコンテキストメニュー — リスト項目で 編集 / ↑上に移動 / ↓下に移動 / 🗑 削除、SVG 上で各図種に応じた操作（後述）
• レスポンシブレイアウト — 画面幅に応じて左パネルと SVG エリアを縦積みに切替

ズーム / パン

フローチャート (flowchart / graph)

• ノード追加・編集・削除（ラベル・形状の選択）
• エッジ追加（接続元 → 接続先の選択）、ラベル・線種の編集
• SVG 上でノードをクリックして選択、ダブルクリックで編集
• SVG 上でエッジをクリックしてラベル・線種を変更
• SVG 上でエッジをダブルクリック → 方向反転 ⇄ ／削除 🗑 ／線種変更／ラベル編集
• SVG 上でサブグラフをダブルクリック → 名前変更・ノード追加／除外
• 方向切り替え（TB / LR / RL / BT）
• SVG 右クリックメニュー — ノード上で ラベル編集 / 色変更 / ここから接続 / 削除、エッジ上で 編集 / 線種切替 / 削除
• レイアウトエンジン切替 — Dagre / ELK / ELK ツリー をツールバーで選択。%%{init:{"layout":"..."}}%% ディレクティブとして保存
• サブグラフの入れ子化 — サブグラフ一覧で複数チェック → 「🗂️ 複数グループを 1 つに結合」、または個別に「親グループ」を選択（サイクル防止付き）

クラス図 (classDiagram)

• クラスの追加・編集・削除
• 属性（プロパティ）とメソッドの管理
• リレーション（継承・実装・関連・依存など）の追加・編集・削除
• SVG 上でクラスをクリック → リストパネルの該当箇所にスクロール・ハイライト
• SVG 上でリレーションの線をクリック → 編集ダイアログを表示
• SVG 右クリックメニュー — クラスノード上で クラス名編集 / 属性追加 / メソッド追加 / 削除、リレーション上で 編集 / 削除

シーケンス図 (sequenceDiagram)

• アクター / 参加者の追加・編集・削除・並べ替え
• メッセージの追加・編集・削除（ラベル・種類の選択）
• メッセージの並び替え（↑↓ ボタン）
• ノートの追加・編集・削除（位置指定: right of / left of / over）
• SVG 上でメッセージの線をクリック → 種類変更
• SVG 上でメッセージのテキストをダブルクリック → テキスト編集
• SVG 右クリックメニュー — 参加者上で 編集 / 削除、メッセージ線上で 編集 / ↑↓ 順序変更 / 削除

マインドマップ (mindmap)

• ノードの追加・編集・削除（テキスト・形状の選択）
• ツリー構造の階層操作
• SVG 上でノードをドラッグ＆ドロップして親ノードを変更（再グループ化）
• SVG 上でノードをダブルクリックしてテキストをインライン編集
• SVG 右クリックメニュー — ノード上で 子ノード追加 / 名前を編集 / このノードを削除

象限チャート (quadrantChart)

• タイトル・軸ラベル・象限ラベルの設定
• データポイントの追加・編集・削除（名前・X/Y 座標）
• SVG 上でデータポイントをドラッグ＆ドロップして位置を変更
• SVG 上でデータポイントをダブルクリックして名前を編集
• ドラッグ中のリアルタイム座標表示
• SVG 右クリックメニュー — ポイント上で 編集 / 削除

日本語ラベル対応 (v0.5.1): 軸ラベル・象限ラベル・データポイント名は 日本語（非 ASCII）をそのまま使えます。Mermaid のレキサーは引用符なしのラベルを [A-Za-z] でしかトークン化しないため、保存時に自動でダブルクォートを付けて出力します。
※ ラベル内に含まれる " は保存時に取り除かれます。

ガントチャート (gantt)

• セクション・タスクの追加・編集・削除
• タスクの日付・期間・ステータス・依存関係の設定
• タイトル・日付フォーマット・軸フォーマットの設定
• セクションの折りたたみ（▼/▶ トグル）
• タスクのドラッグ＆ドロップ並び替え（セクション内・セクション間移動対応）
• 色カスタマイズ（セクション背景色 → 配下タスクに自動適用、タスク個別の背景色の上書きも可）
• SVG 上でのタスクバー直接操作 — 左右ドラッグで開始日変更、右端ドラッグで期間変更、右クリックで ±1日 / ±7日 即時シフト・削除（after X 依存タスクはドラッグ不可）
• SVG ライブプレビュー

ER 図 (erDiagram)

• エンティティの追加・名前変更・削除
• 属性の追加・編集・削除（型・名前・PK/FK/UK キー設定）
• リレーションの追加・編集・削除（6 種のカーディナリティ・ラベル）
• SVG 上でエンティティ名をクリック → パネルの該当箇所にスクロール
• SVG 右クリックメニュー — エンティティ上で 名前を変更 / 属性を追加 / このエンティティを削除

その他の Mermaid ダイアグラム（14 種）

以下の Mermaid ダイアグラムは専用の汎用フォームエディタ（セクション別リスト編集 + ライブ SVG プレビュー + コードモード切替）で GUI 編集できます。リスト項目の右クリックメニューは全種で共通です。

LaTeX 数式 — KaTeX レンダリング

学術文書・技術メモ・README で数式を扱う場面のために、KaTeX 0.17 を同梱して完全ローカルで TeX 数式をレンダリングします（CDN 参照・フォントダウンロード一切なし）。

主な特徴

• GUI 編集 — 数式ブロックをダブルクリックすると TeX ソースが現れ、その場で編集 → Ctrl+Enter / Escape / 外部クリックで即座に再レンダリング
• エラー表示 — 構文エラーは赤背景の math-error バッジで表示し、ホバーで KaTeX のエラーメッセージをツールチップ表示
• AMS 数式環境 — \begin{align} / \begin{cases} / \begin{matrix} などの主要環境をサポート
• 検索ヒット — Ctrl+F での検索は数式の TeX ソースに対しても動作
• テーマ追従 — ライト／ダーク切替に応じて数式の文字色も自動調整
• 完全ローカル — KaTeX 本体・フォント (media/vendor/katex.min.{js,css} と media/vendor/fonts/) を同梱し、オフライン環境でも数式が崩れません

記述例

質量とエネルギーの等価性は $E = mc^2$ で表されます。

$$
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
$$

```math
\begin{align}
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{align}
```

動作環境

外部ネットワーク接続は不要です。

使い方

1. .md ファイルを右クリック →「Open With...」→「Markdown Visual Editor」を選択
2. プレビュー表示のまま、各ブロックをダブルクリックして編集
3. Mermaid コードブロックやテーブルは専用のビジュアルエディタで GUI 操作

詳しい操作方法は 利用者向けガイド を参照してください。
各 Mermaid 種別ごとの対応マトリクスは MERMAID-SUPPORT-MATRIX.md にまとまっています。

既定エディタに設定する（.md を常にこのエディタで開く）

本拡張はオプションエディタとして登録されているため、初期状態では .md ファイルは標準テキストエディタで開き、毎回「Open With...」で選ぶ必要があります。
すべての .md ファイルを 常に Markdown Visual Editor で開く ようにするには、次のいずれかの方法で既定エディタに設定します。

方法 A: GUI から設定（おすすめ）

1. .md ファイルを右クリック →「Open With...」を選択
2. 一覧の下部にある「Configure default editor for '*.md'...」（既定エディタを構成）をクリック
3. 「Markdown Visual Editor」を選択

以降、.md ファイルはダブルクリックで本エディタが開きます。

方法 B: settings.json に直接記述

コマンドパレット (Ctrl+Shift+P) →「Preferences: Open User Settings (JSON)」を開き、以下を追記します。

"workbench.editorAssociations": {
  "*.md": "mdVisualEditor.markdownEditor"
}

元に戻すには: 標準テキストエディタに戻したい場合は、上記の値を "default" に変更するか、workbench.editorAssociations から *.md の行を削除してください。
特定のファイルだけ一時的にテキストで開きたいときは、本エディタのツールバー右端「📝 テキストで開く」ボタンが使えます。

インストール

Marketplace から（公開後）

VS Code の Extensions ビューで Markdown Visual Editor を検索してインストールしてください。
コマンドラインからは以下でインストールできます（<publisher> は公開時の Marketplace パブリッシャー ID）：

ext install <publisher>.md-visual-editor

VSIX ファイルからインストール

code --install-extension md-visual-editor-1.0.1.vsix

または VS Code のコマンドパレット (Ctrl+Shift+P) で「Extensions: Install from VSIX...」を選択し、.vsix ファイルを指定してください。

VSIX のビルド手順は VSIX-BUILD-PROCEDURE.md を参照してください。

Privacy & Security

• ✅ 拡張機能自体はネットワーク通信を行わない — Mermaid / marked / KaTeX（フォント含む）はすべて同梱。CDN 参照・更新チェックもありません

• ✅ テレメトリ・分析・クラッシュレポートを送信しない

• ✅ 認証・アカウント不要

• ✅ WebView は CSP で保護。実際のポリシーは以下のとおりです。

  default-src 'none';
  img-src ${cspSource} data: blob: https:;
  style-src ${cspSource} 'unsafe-inline';
  script-src 'nonce-${nonce}' 'unsafe-eval';
  font-src ${cspSource};
  worker-src ${cspSource} blob:;
  connect-src ${cspSource};
  

  • 'unsafe-eval' は Mermaid が要求するため付与しています
  • ⚠️ img-src に https: が含まれるため、文書中に外部 URL の画像を書いた場合はその画像取得のための通信が発生します。拡張機能が自発的に通信することはありませんが、「いかなる場合も通信が発生しない」わけではない点にご注意ください

• ⚠️ 書き込みを行うファイル — 編集対象の .md に加えて、次の 2 か所に書き込みます

  • 画像をドラッグ & ドロップした場合: Markdown と同階層の images/ フォルダ（ファイル名はサニタイズ・重複回避のうえ保存）
  • PDF 出力時: OS の一時ディレクトリに印刷用 HTML を書き出し、OS 既定のブラウザで開きます（この HTML は VS Code の WebView サンドボックス外で描画されます）

• ✅ Markdown レンダリング時に script / iframe / form などの要素、on* 属性、javascript: / vbscript: URL を除去（XSS 防止）

  • ※ 方式は「危険なものを取り除く denylist」であり、DOMPurify のような allowlist ではありません。CSP が第 2 の防御層として機能します

詳細は SECURITY.md を参照してください。

技術仕様

既知の制限事項

エディタ全般

• テーブルの配置指定（:---: など）に未対応 — 配置指定を含むテーブルをビジュアルエディタで編集して保存すると配置指定が失われます
• テーブルの列幅は表示上のみの調整で、Markdown には保存されません
• デフォルトエディタではなく、オプションエディタとして登録されます（既定エディタに設定する を参照）
• 対応 OS は Windows 10/11 のみ検証済み（macOS / Linux は動作見込みですが未検証）

Mermaid ダイアグラム

• ZenUML (zenuml) はバンドルに含まれていないため コード編集のみ動作（図種ピッカーからは除外）
• フローチャートエディタはパン（表示位置の移動）に未対応 — ズームのみ（他の 20 種はパン対応）
• シーケンス図は alt / opt / loop / par / activate に未対応（rect の色ブロックは対応）
• ガントチャートの after X 依存タスクは SVG 上でドラッグできません。色指定は独自のメタコメント (%%gantt-style) で、Mermaid 標準構文ではありません
• アーキテクチャ図の アイコンは組込 5 種（cloud / database / disk / internet / server）のみ。カスタムアイコンパックは WebView の CSP により利用できません
• C4 図 / ブロック図は簡易版の実装です
• XY チャート (xychart-beta) はパレート図のような 左右 2 軸 (Y 軸 2 本) に未対応（Mermaid 自体の制約）
• パケット図はビット範囲の重複を検証しません
• 象限チャートのラベル内に含まれる " は保存時に取り除かれます

ライセンス

MIT License のもとで提供されます。依存ライブラリのライセンス詳細は LICENSE-COMPLIANCE.md を参照してください。