FlowMD — WYSIWYG Markdown Editor for VS Code

Obsidian-style live preview editing, right inside VS Code.

日本語

FlowMD is a WYSIWYG Markdown editor for VS Code. The line you're editing shows raw Markdown; everything else renders beautifully in real time — no split panes, no context switching. Three modes let you switch between WYSIWYG editing, raw Markdown, and a read-only rendered view with a single click.

Features

Live Preview Editing

The focused block shows raw Markdown while all other blocks render inline. Switch instantly between editing and reading without leaving your file.

Three Editing Modes

Click the mode icon in the editor title bar to cycle: Live Preview → Viewer → Source → Live Preview.

GFM Tables

Full GitHub Flavored Markdown table rendering with:

• Interactive add row / add column buttons on hover
• Cell drag selection — click and drag to select rectangular cell ranges
• Delete key support — with cells selected, Delete removes entire rows, entire columns, or clears cell contents
• Inline checkbox toggle within table cells

Mermaid Diagrams

Inline rendering of flowcharts, sequence diagrams, Gantt charts, class diagrams, and more. Diagram theme follows VS Code's active color theme automatically.

KaTeX Math

Inline math with $...$ and display math with $$...$$. Full KaTeX support with MathML output — no external fonts or CSS required.

YAML Frontmatter

YAML frontmatter blocks render as an Obsidian-style property panel showing key-value pairs in a clean, readable layout.

Syntax Highlighting

20 programming languages with a copy button on every code block: JavaScript, TypeScript, Python, HTML, CSS, JSON, Java, C/C++, Rust, Go, SQL, PHP, XML, YAML, Shell, PowerShell, Ruby, Dockerfile, TOML, Diff

More Features

• Bold / Italic — Ctrl+B / Ctrl+I (Cmd+B / Cmd+I on Mac) to toggle formatting on selected text
• Inline Checkboxes — Click to toggle [ ] / [x], even inside table cells
• Footnotes — Auto-numbered with click-to-jump navigation
• Collapsible Sections — HTML <details>/<summary> rendering
• Strikethrough — GFM ~~text~~ support
• Image Paste & Insert — Paste screenshots with Ctrl+V, insert from file picker with Ctrl+Shift+I, or right-click images in Explorer → "Insert into FlowMD"
• Image Display — Local files, URLs, and data URIs
• Nested Blockquotes — Visual indicator bars for up to 5 nesting levels
• Collapsible Lists — Fold/unfold nested list sections with arrow indicators
• Anchor Links — Click heading links to jump within the document
• HTML Export — Export the current file as a standalone styled HTML document
• Find and Replace — Ctrl+F / Ctrl+H (Cmd+F / Cmd+Alt+F on Mac) with match count
• Theme Sync — Automatic dark/light theme synchronization with VS Code
• File Reload — Re-read file from disk with one click
• Word Wrap and Readable Line Length — Configurable content width
• IME Support — Full composition support for Japanese, Chinese, and Korean

Installation

1. Open VS Code
2. Press Ctrl+Shift+X to open Extensions
3. Search for "FlowMD"
4. Click Install

Or install directly from the VS Code Marketplace.

Usage

Opening Files

FlowMD registers as the default editor for .md files. Simply open any Markdown file and it loads in Live Preview mode.

You can also right-click any .md file in the Explorer and select Open with FlowMD.

Mode Switching

Click the mode icon in the editor title bar to cycle through modes:

You can also set the default mode in settings with flowMd.defaultMode.

Table Cell Selection

In Viewer mode, click and drag across table cells to select a rectangular range. With cells selected:

• Delete or Backspace — Delete selected rows (if full rows selected), delete selected columns (if full columns selected), or clear cell contents
• Click outside the table to deselect

Keyboard Shortcuts

Settings

Requirements

• VS Code 1.85.0 or later

License

Business Source License 1.1 — Free for personal and commercial use. See LICENSE for details.

Contributing

Bug reports and feature requests are welcome! Please open an issue on GitHub Issues.

Made with care by Hephaestus Workers.

FlowMD — VS Code用 WYSIWYG Markdownエディタ

Obsidian風ライブプレビュー編集を、VS Codeで。

English

FlowMDは、VS CodeをシームレスなMarkdown編集環境に変える拡張機能です。編集中の行はMarkdownソースを表示し、それ以外はリアルタイムにレンダリング。3つのモードを1クリックで切り替えられます。

機能

ライブプレビュー編集

カーソルのある行はMarkdownソースを表示し、それ以外の行はリアルタイムにレンダリングされます。プレビューパネル不要のWYSIWYG編集です。

3つの編集モード

エディタのタイトルバーに表示されるモードアイコンをクリックすると順に切り替わります: ライブプレビュー → ビューアー → ソース → ライブプレビュー。

GFMテーブル

GitHub Flavored Markdownのテーブル記法に完全対応しています。

• ホバーで表示される 行追加 / 列追加 ボタン
• セルのドラッグ選択 — クリック＆ドラッグで矩形範囲を選択
• Deleteキー対応 — 選択中にDeleteで行削除・列削除・セル内容クリア
• テーブルセル内のチェックボックス切り替え

Mermaidダイアグラム

フローチャート、シーケンス図、ガントチャート、クラス図などをインラインでレンダリングします。VS Codeのカラーテーマに自動追従します。

KaTeX数式

インライン数式 $...$ とブロック数式 $$...$$ に対応しています。MathML出力を採用しており、追加のCSSやフォントファイルは不要です。

YAMLフロントマター

YAMLフロントマターブロックをObsidian風のプロパティパネルとして表示します。キーと値のペアが見やすいレイアウトでレンダリングされます。

シンタックスハイライト

20のプログラミング言語に対応。各コードブロックにはコピーボタン付き: JavaScript, TypeScript, Python, HTML, CSS, JSON, Java, C/C++, Rust, Go, SQL, PHP, XML, YAML, Shell, PowerShell, Ruby, Dockerfile, TOML, Diff

その他の機能

• 太字 / 斜体 — Ctrl+B / Ctrl+I（Macは Cmd+B / Cmd+I）で書式を切り替え
• インラインチェックボックス — テーブル内でも動作するタスクリスト
• 脚注 — 自動採番とクリックによるジャンプ
• 折りたたみセクション — <details>/<summary> のレンダリング対応
• 取り消し線 — GFM ~~text~~ 記法に対応
• 画像ペースト・挿入 — Ctrl+Vでスクリーンショット貼り付け、Ctrl+Shift+Iでファイル選択挿入、エクスプローラー右クリック→「Insert into FlowMD」で画像挿入
• 画像表示 — ローカルファイル、URL、data URIのいずれも表示可能
• ネストされたブロック引用 — 5階層までの視覚的インジケーターバー
• 折りたたみリスト — ネストされたリストセクションを矢印インジケーターで折りたたみ/展開
• アンカーリンク — 見出しへのリンクをクリックしてドキュメント内をジャンプ
• HTMLエクスポート — 現在のファイルをスタイル付きの単体HTMLとしてエクスポート
• 検索と置換 — Ctrl+F / Ctrl+H（Macは Cmd+F / Cmd+Alt+F）マッチ数表示付き
• テーマ同期 — VS Codeのダーク/ライトテーマに自動追従
• ファイル再読み込み — ワンクリックでディスクから最新の内容を再読み込み
• 折り返し・可読幅 — コンテンツの最大幅をピクセル単位で設定可能
• IME対応 — 日本語・中国語・韓国語のIME入力に完全対応

インストール

1. VS Codeを開く
2. Ctrl+Shift+X で拡張機能パネルを開く
3. 「FlowMD」 で検索
4. インストール をクリック

VS Code Marketplace からも直接インストールできます。

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

1. flow-md-x.x.x.vsix をダウンロード
2. VS Codeで Ctrl+Shift+P を押してコマンドパレットを開く
3. 「Extensions: Install from VSIX...」を選択
4. ダウンロードしたファイルを指定

使い方

ファイルを開く

FlowMDは .md ファイルのデフォルトエディタとして登録されます。Markdownファイルを開くだけでライブプレビューモードで表示されます。

.md ファイルをエクスプローラーで右クリックし、「Open with FlowMD」 を選択して開くこともできます。

モード切替

エディタのタイトルバーに表示されるアイコンをクリックすると、モードが順に切り替わります。

設定の flowMd.defaultMode でデフォルトモードを変更できます。

テーブルセル選択

ビューアー モードで、テーブルセルをクリック＆ドラッグして矩形範囲を選択できます。選択中の操作:

• Delete または Backspace — 行全体選択時は行削除、列全体選択時は列削除、それ以外はセル内容のクリア
• テーブル外をクリックで選択解除

キーボードショートカット

設定

VS Codeの設定（Ctrl+,）から、FlowMDの動作をカスタマイズできます。

日本語入力サポート (IME対応)

FlowMDは日本語入力（IME）に完全対応しています。

Web技術ベースのエディタでは、IMEとの相性問題が起きやすく、変換中に文字が消えたり重複したりすることがあります。FlowMDではこれらの問題を根本から解決しています。

対策の詳細

• 変換中のデコレーション抑制 — IMEで変換中（composing状態）はライブプレビューのデコレーション再構築を抑制し、未確定文字列が消えたり崩れたりすることを防ぎます。
• 文字の重複防止 — 変換確定時にドキュメント同期が二重に走ることを防止し、「変換確定後に同じ文字が2つ入力される」問題を回避しています。
• 安定した変換候補表示 — 変換中にカーソル位置やテキストが予期せず変更されることがないため、変換候補ウィンドウが安定して表示されます。
• 全角記号・句読点の正確な入力 — 全角スペース、句読点（、。）、括弧（「」）などの全角記号も正しく処理されます。

対応するIME

• Microsoft IME (Windows)
• macOS日本語入力
• Google日本語入力
• IBUS / Fcitx (Linux)
• 中国語・韓国語のIMEにも対応

技術ブログの執筆やドキュメント作成など、日本語を多用する作業でも安心してお使いいただけます。Zenn、Qiita、はてなブログなどの技術記事のMarkdown執筆に最適です。

VS Codeとの統合

FlowMDはVS Codeのネイティブ機能と密接に統合されています。

• エクスプローラーから直接起動 — .md ファイルを右クリックして「Open with FlowMD」で直接開けます。
• テーマ自動追従 — VS Codeのカラーテーマ（ダーク/ライト）を自動検出し、エディタの配色を同期します。
• 他の拡張機能との共存 — 他のVS Code拡張機能（Git、Linter等）と干渉することなく動作します。
• 1ペインで完結 — プレビューパネルを別途開く必要がありません。編集と確認が1つのエディタペインで完了します。

動作要件

• VS Code 1.85.0 以降

技術基盤

CodeMirror 6、KaTeX、Mermaid を基盤として構築されています。

ライセンス

Business Source License 1.1 — 個人利用・商用利用ともに無料。詳細は LICENSE を参照してください。

貢献

バグ報告や機能リクエストは GitHub Issues からお願いします。

Made with care by Hephaestus Workers.