Markweave

日本語版はこちら / Japanese version

A WYSIWYG Markdown editor for VS Code. Edit tables, math, and Mermaid diagrams graphically, and export to HTML, PDF, or PowerPoint.

Key features

• WYSIWYG Markdown editing — Visually edit CommonMark + GFM content with two-way sync to the underlying text document, native VS Code Undo/Redo, and IME support. Includes a toolbar, slash commands, and formatting shortcuts. Math (KaTeX) and Mermaid diagrams render inline, frontmatter is collapsible, and unsupported syntax gracefully falls back to a source view.
• Table editor (Excel-like) — Grid editing in the bottom panel: row/column operations, alignment, column-width adjustment, cell merging (merged tables are saved as HTML tables), and TSV copy/paste (paste directly from Excel).
• Math editor (Word-like) — Symbol and structure palettes, direct LaTeX editing, a live KaTeX preview, and a matrix insertion dialog. Toggle between inline and block display.
• Mermaid editor — A Blender-style node editor (React Flow) for graphical editing of flowcharts, state diagrams, ER diagrams, and more, with two-way sync between text and graph and optional saved layout coordinates. Gantt and pie charts use a table-based fallback editor. All diagram types support text editing with live preview.
• Export — HTML (self-contained or linked), PDF (Chromium-based printing with <!-- pagebreak --> page-break control), and PowerPoint (slides split on page breaks, with math and diagrams rendered as images). Configurable paper size, margins, fonts, and custom CSS.

Getting started

Markweave registers as an optional custom editor for .md files (it does not take over by default).

• Open a file with Markweave: Right-click a .md file in the Explorer and choose Open With… → Markweave (WYSIWYG) (or, from the standard text editor, use the … menu → Reopen Editor With…). You can also run Markweave: Open WYSIWYG Editor from the Command Palette while a .md file is active.
• Make it the default editor for .md: Enable the markweave.openAsDefault setting, or accept the one-time notification shown the first time the extension activates. This writes "*.md": "markweave.wysiwyg" into workbench.editorAssociations; disabling the setting removes only the entry it added.
• Bottom panel: Tables, math, and Mermaid diagrams are edited in a dedicated panel docked to VS Code's bottom area (same region as the terminal). Open it with Markweave: Open Bottom Panel, or simply click into a table/math/Mermaid element in the editor — the panel loads it automatically and stays in sync as you switch between tabs.
• Exporting: Run Markweave: Export to HTML / PDF / PowerPoint from the Command Palette with the target .md file open. PDF and PowerPoint exports render math and diagrams via a Chromium-based browser (Google Chrome or Microsoft Edge is auto-detected); if it isn't found automatically, set markweave.export.chromiumPath to the executable's path.

Settings

Known limitations

• PDF export requires a Chromium-based browser (Google Chrome or Microsoft Edge). Automatic download is not supported; install one or set markweave.export.chromiumPath.
• Remote images are not fetched during export. http/https image references are kept as-is in exported output rather than being downloaded and embedded.
• Only local images inside the document's folder or the open workspace folder are inlined/previewed by default; see markweave.export.allowImagesOutsideWorkspace to widen that scope for export.

License

MIT License (see the bundled LICENSE.txt).

日本語版

English version

VS Code 向けの WYSIWYG Markdown エディタです。テーブル・数式・Mermaid 図をグラフィカルに編集でき、HTML / PDF / PowerPoint へエクスポートできます。

主な機能

• WYSIWYG Markdown 編集 — CommonMark + GFM をビジュアル編集でき、元のテキストドキュメントと双方向同期します。VS Code ネイティブの Undo/Redo、IME 対応。ツールバー・スラッシュコマンド・書式ショートカットを備えます。数式（KaTeX）と Mermaid 図はインライン表示され、フロントマターは折りたたみ可能、未対応の記法は自動的にソース表示へフォールバックします。
• テーブルエディタ（Excel 風） — 下部パネルでのグリッド編集: 行・列操作、整列、列幅調整、セル結合（結合したテーブルは HTML テーブルとして保存）、TSV コピー＆ペースト（Excel から直接貼り付け可能）。
• 数式エディタ（Word 風） — 記号・構造パレット、LaTeX 直接編集、KaTeX ライブプレビュー、行列挿入ダイアログ。インライン / ブロック表示を切り替え可能。
• Mermaid エディタ — フローチャート・状態遷移図・ER 図などを、Blender 風のノードエディタ（React Flow）でグラフィカルに編集できます。テキストとグラフの双方向同期、レイアウト座標の任意保存に対応。ガントチャートと円グラフは表形式の専用エディタで編集します。すべての図の種類でテキスト編集とライブプレビューが利用できます。
• エクスポート — HTML（自己完結型 / リンク型）、PDF（Chromium ベースの印刷、<!-- pagebreak --> による改ページ制御）、PowerPoint（ページ区切りでスライド分割、数式・図は画像として埋め込み）。用紙サイズ・余白・フォント・カスタム CSS を設定可能。

使い方

Markweave は .md ファイル向けのオプションのカスタムエディタとして登録されます（既定では有効になりません）。

• Markweave で開く: エクスプローラで .md ファイルを右クリックし、「アプリケーションから開く…」→「Markweave (WYSIWYG)」 を選択します（標準テキストエディタで開いている場合は、エディタ右上の 「…」→「エディターを別で再度開く…」 からも選択できます）。標準テキストエディタで .md ファイルをアクティブにした状態で、コマンドパレットから 「Markweave: WYSIWYGで開く」 を実行しても開けます。
• 既定エディタにする: 設定 markweave.openAsDefault を有効にするか、拡張機能を初めて有効化した際に表示される一度きりの案内通知で承諾します。これにより workbench.editorAssociations に "*.md": "markweave.wysiwyg" が書き込まれます。設定を無効にすると、この設定が追加したエントリのみが除去されます。
• 下部パネル: テーブル・数式・Mermaid 図は、VS Code の下部エリア（ターミナルと同じ領域）に表示される専用パネルで編集します。コマンドパレットの 「Markweave: 下部パネルを開く」 で開くか、エディタ内でテーブル・数式・Mermaid の要素をクリックすると自動的にロードされ、タブを切り替えてもその内容に追従します。
• エクスポート: 対象の .md ファイルを開いた状態で、コマンドパレットから 「Markweave: HTML / PDF / PowerPoint にエクスポート」 を実行します。PDF・PowerPoint エクスポートでは数式・図の描画に Chromium 系ブラウザ（Google Chrome / Microsoft Edge を自動検出）を使用します。自動検出できない場合は、設定 markweave.export.chromiumPath に実行ファイルのパスを指定してください。

主な設定

既知の制約

• PDF エクスポートには Chromium 系ブラウザ（Google Chrome / Microsoft Edge）が必要です。 自動ダウンロードには対応していないため、インストールするか markweave.export.chromiumPath を設定してください。
• リモート画像はエクスポート時に取得しません。 http/https の画像参照は、ダウンロード・埋め込みされずそのまま出力されます。
• 既定でインライン表示・プレビューされるのは、ドキュメントのフォルダまたは開いているワークスペースフォルダ内のローカル画像のみです。エクスポート時にこの範囲を広げるには markweave.export.allowImagesOutsideWorkspace を参照してください。

ライセンス

MIT License（同梱の LICENSE.txt 参照）。