Markdown Visual Editor

$LaTeX / KaTeX$

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 tables. 100% local — no network calls, no telemetry, no authentication.

Markdown ファイルを プレビュー表示のまま直接編集 できる VS Code 拡張機能です。
Mermaid ダイアグラム 21 種類 のビジュアル（GUI）編集、LaTeX 数式 (KaTeX) のインライン・ディスプレイレンダリング、テーブルの GUI 編集にも対応しています。

完全ローカル動作 — ネットワーク通信を一切行わず（KaTeX フォントも同梱）、テレメトリも送信しません。

主な機能

WYSIWYG Markdown 編集

見出し・段落・リスト・コードブロックなどがレンダリングされた状態で表示
ブロックを ダブルクリック すると Markdown ソースが表示され、その場で編集
Escape / Ctrl+Enter / ブロック外クリックで確定、即座に再レンダリング
編集内容はファイルに自動保存
ブロックの並べ替え（ドラッグ & ドロップ） — ブロック左端のハンドル ⋮⋮（ホバーで表示）またはブロック自体を掴んで、任意のブロックの上下にドロップして順序を入れ替え。複数選択した状態でドラッグすると一括で移動。
ブロックの削除 — 右クリックメニューの「🗑 削除」または Delete / Shift+Delete キーで削除（削除前に内容を自動的にクリップボードへコピーし、誤操作からの復旧を支援）。
画像表示 — ![alt](https://github.com/kaeru758/md-visual-editor/raw/HEAD/path.png) の相対パスは Markdown ファイルのディレクトリを基準にホスト拡張側で解決し、WebView の CSP 制約下でも表示。file:// 絶対パスや data: URL も対応。ファイル／フォルダから画像をブロック上にドラッグ & ドロップして挿入することも可能。
数式 (LaTeX / KaTeX) — インライン $E = mc^2$ 、ディスプレイ $$ ... $$、および ```math コードブロックを KaTeX で完全ローカルにレンダリング。数式ブロックはダブルクリックで TeX ソースを直接編集。

ツールバー

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

ボタン	挿入内容
H1 〜 H6	見出し
B / I / ~~S~~ / `Code`	インラインスタイル
リンク / 画像	`[text](https://github.com/kaeru758/md-visual-editor/blob/HEAD/url)` / `![alt](https://github.com/kaeru758/md-visual-editor/raw/HEAD/url)`
区切り線	`---`
表	3×3 の Markdown テーブル
数式	```math ブロック (`E = mc^2` テンプレート)
Mermaid	ダイアグラム種別選択ピッカー（21 種類）

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

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

ボタン	機能
🔍 検索	検索・置換バーを表示（`Ctrl+F` / `Ctrl+H` でも起動）。大文字・正規表現・一括置換に対応。SVG 図中の文字も検索ヒットで強調表示（`<tspan>` 分割による黄色の縁取り）
☀️ / 🌙 テーマ切替	VS Code のテーマと独立してライト／ダークを強制。Mermaid 図の色も連動
📝 テキストで開く	当該 Markdown を標準テキストエディタで開き直し

リンクのクリック動作

通常クリックではリンクを踏まず、誤作動を防止
Ctrl + Click（macOS は Cmd + Click）で OS のデフォルトハンドラで開く
- http:// / https:// / mailto: → 外部ブラウザ・メーラー
- その他（相対パスなど）→ VS Code 内で vscode.open で開く

テーブル GUI 編集

セルの直接入力・編集
行・列の追加／削除
テーブルヘッダーの配置変更

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

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

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

初回オンボーディングヒント — 各エディタを初めて開いた際に使い方ガイドを表示。「次回から表示しない」を保存
キーボードショートカット — Delete 削除 / ↑↓ 並び替え / Enter 編集 / Ctrl+Z・Ctrl+Y 元に戻す/やり直し
ドラッグ & ドロップ並び替え — 左パネルのリスト項目を掴んで並べ替え
右クリックコンテキストメニュー — リスト項目で 編集 / ↑上に移動 / ↓下に移動 / 🗑 削除、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 右クリックメニュー — ポイント上で 編集 / 削除

制限事項: 象限チャートの構文解析器の制約により、タイトル・軸ラベル・象限ラベル・データポイント名は ASCII 文字のみ を推奨します（Mermaid 11 でも一部 CJK で解析エラーとなる場合があります）。

ガントチャート (`gantt`)

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

ER 図 (`erDiagram`)

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

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

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

種別	構文	特記事項
状態遷移図	`stateDiagram-v2`	「遷移追加」モード: SVG 上で From → To のノードを順クリックして遷移を作成
パイチャート	`pie`	表編集モード（既定）でラベル × 値を Excel 風に編集
ユーザージャーニー	`journey`	セクション・ステップ・スコア (1-5) を構造化編集
Git グラフ	`gitGraph`	コミット・ブランチ・チェックアウト・マージを順序制御
タイムライン	`timeline`	時代区分セクション内にイベントを追加
要求図	`requirementDiagram`	「リレーション追加」モード: SVG 上で要素間を順クリックしてリレーション (satisfies, traces 等) を作成。日本語値は自動的に `"…"` でクォート
C4 図	`C4Context` 系	Person / System / Container / Rel を追加
Sankey 図	`sankey-beta`	各行 `送信元, 受信先, 数値` で流量を編集
XY チャート	`xychart-beta`	表編集モード（既定）でカテゴリ × シリーズ値を編集。Y 軸はデータに自動追従（手動範囲指定にも切替可）
ブロック図	`block-beta`	`columns N` と各ブロック行で配置
ZenUML	`zenuml`	バンドル制約によりコード編集のみ動作（SVG プレビューは未対応・図種ピッカーからは除外）
パケット図	`packet-beta`	`開始-終了: "ラベル"` でビット配列を編集
アーキテクチャ図	`architecture-beta`	「接続モード」: SVG 上でサービス／グループを順クリックして接続を作成。クラウド・データベース・サーバ等の組込アイコン対応
Kanban	`kanban`	列とタスクの 2 階層リスト編集

LaTeX 数式 — KaTeX レンダリング

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

種類	構文	表示形式
インライン数式	$ ... $	本文中に組み込み（例: $E = mc^2$ ）
ディスプレイ数式	`$$ ... $$`	中央寄せの独立ブロック
数式コードブロック	```math フェンス	ディスプレイ数式と同等。ツールバーからワンクリック挿入可能

主な特徴

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}
```

動作環境

項目	要件
VS Code	1.80.0 以上
OS	Windows 10 / 11（macOS / Linux でも動作見込みですが未検証）

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

使い方

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

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

インストール

Marketplace から（公開後）

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

ext install <publisher>.md-visual-editor

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

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

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

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

Privacy & Security

✅ ネットワーク通信を一切行わない（CDN 参照・フォント取得・更新チェックもなし）
✅ テレメトリ・分析・クラッシュレポートを送信しない
✅ 認証・アカウント不要
✅ ファイルシステムアクセスは 開いているドキュメント 1 ファイルのみ
✅ WebView は Strict CSP で保護（script-src 'nonce-...' 'unsafe-eval'、その他は 'none'）
- ※ 'unsafe-eval' は Mermaid ライブラリが要求するため付与。WebView 内に限定された狭いサンドボックスです
✅ リンクは デフォルトで踏まれず、Ctrl/Cmd + Click でのみ開いた上でスキームホワイトリスト（http(s): / mailto:）を適用
✅ Markdown レンダリング時に script / iframe / on* 属性等を除去（XSS 防止）

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

技術仕様

項目	値
Markdown パーサー	marked 4.3.x
数式レンダリング	KaTeX 0.17.x（同梱・完全ローカル）
ダイアグラムエンジン	Mermaid 11.14.x
バンドラー	esbuild
HTML サニタイズ	`script` / `iframe` / `on*` 属性等を除去
通信	完全ローカル（ネットワーク通信なし）

既知の制限事項

象限チャート (quadrantChart) のジャンル付近で一部ラベルに日本語が使えないケースがあります（Mermaid の仕様）
ZenUML (zenuml) は UMD バンドルに含まれていないため コード編集のみ動作（図種ピッカーからは除外）
XY チャート (xychart-beta) はパレート図のような 左右 2 軸 (Y 軸 2 本) に未対応（Mermaid 自体の制約）
デフォルトエディタではなく、オプションエディタとして登録されます（「Open With...」で選択）
対応 OS は Windows 10/11 のみ検証済み

ライセンス

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

Markdown Visual Editor

rkojima

Markdown Visual Editor

主な機能

WYSIWYG Markdown 編集

ツールバー

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

リンクのクリック動作

テーブル GUI 編集

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

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

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

クラス図 (classDiagram)

シーケンス図 (sequenceDiagram)

マインドマップ (mindmap)

象限チャート (quadrantChart)

ガントチャート (gantt)

ER 図 (erDiagram)

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

LaTeX 数式 — KaTeX レンダリング

主な特徴

記述例

動作環境

使い方

インストール

Marketplace から（公開後）

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

Privacy & Security

技術仕様

既知の制限事項

ライセンス

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

クラス図 (`classDiagram`)

シーケンス図 (`sequenceDiagram`)

マインドマップ (`mindmap`)

象限チャート (`quadrantChart`)

ガントチャート (`gantt`)

ER 図 (`erDiagram`)