vMarkd — Visual Markdown Editor for VS Code

Write like it is a document. Keep it as Markdown.

vMarkd turns a .md file into a focused, formatted editing surface inside VS Code. Write in WYSIWYG, reveal the Markdown around your cursor, work with source and preview side by side, or simply read the finished document. Every view stays connected to the same plain-text file on disk.

You get the comfort of a document editor without moving your work into another app or another file format.

Markdown stays the source of truth

Visual editing is most useful when it does not take ownership of your content. With vMarkd, the document remains ordinary Markdown: portable, searchable, version-controlled, and readable by the rest of your toolchain.

Open the visual editor only when you want it. Jump to the corresponding source line when exact syntax matters, open source beside the formatted document, and return to VS Code's text editor with one command. vMarkd does not replace the Markdown workflow you already have; it gives that workflow a better writing surface.

One editor, different kinds of work

Write documents instead of punctuation

For notes, guides, project plans, READMEs, and long-form documentation, raw markers can interrupt the thought you are trying to capture. vMarkd keeps headings, lists, tables, links, images, callouts, and code visually legible while you edit them. An outline, document search, word count, and reading-time estimate help you stay oriented as the file grows.

The result is still a .md file that works on GitHub, in a static-site pipeline, or anywhere else Markdown is expected.

Make AI-authored Markdown easier to review

Prompts, agent instructions, context files, generated reports, and AI-assisted documentation are often Markdown too. vMarkd makes those files easier for a person to read and refine without changing the format that assistants and automation consume.

Review generated structure as a document, inspect exact syntax in source or split view, and use Git change bars to see what changed. There is no proprietary document model between you and the assistant: the shared contract remains plain text. vMarkd is not an AI generator; it is a practical editing layer for the Markdown that AI workflows already produce and depend on.

Keep architecture close to the explanation

Technical documents rarely contain prose alone. vMarkd renders code, math, charts, maps, and diagram languages directly in the editor, so an ADR, system design, runbook, or API guide can explain both the decision and the model behind it. Mermaid, D2, PlantUML, Graphviz, ECharts, Vega, and other engines are available without sending the document to an external editor.

Because diagrams remain fenced text, they are reviewable in Git, editable by people or assistants, and versioned with the architecture they describe. Wiki-style links and two outline views help a folder of Markdown grow into connected project knowledge rather than a pile of isolated files.

Why vMarkd?

A source editor gives you precision. A preview gives you readability. A standalone Markdown app can give you a polished writing surface, but takes you away from the files, terminals, source control, and project context already open in VS Code.

vMarkd brings those strengths together:

• Visual when you want it, source when you need it. Choose WYSIWYG, instant-render, split, or preview mode per document or path.
• No migration and no lock-in. Your file remains Markdown on disk and stays in two-way sync with the editor.
• Built for repository work. Git change bars, source reveal, workspace-aware links, rename tracking, and tab-group behavior fit the VS Code workflow.
• More than prose. A broad, offline-first renderer set keeps diagrams, data, formulas, and specialist notation beside the text that explains them.
• Opt-in by design. vMarkd never takes over all .md files; use it for the documents that benefit from a visual surface.

Work in the view that fits the moment

• Instant Rendering shows formatted Markdown while revealing markers around the cursor.
• Split places Markdown source and live preview side by side.

Set a default mode globally, remember the last mode, or choose modes by glob — for example, open docs/** in Preview and notes/** in IR. Very large files automatically use the responsive instant-render path.

Built for real Markdown work

Edit without breaking your flow

• Responsive tables with visual editing controls, plus automatic conversion of pasted spreadsheet cells into Markdown tables.
• Paste a URL over selected text to create a link; paste plain text with Ctrl/Cmd+Shift+V when formatting should be discarded.
• Paste, drop, or upload images into a configurable workspace folder. Optional WebP conversion and maximum-width downscaling keep repository assets smaller.
• Configurable click behavior for links and a one-command jump to the matching location in the text editor.

Navigate a document or a knowledge base

• A built-in outline panel and a Markdown Outline tree in the Explorer sidebar.
• Wiki-style [[links]] with completion, navigation, ambiguity handling, and one-click creation of missing pages.
• Document search with Ctrl/Cmd+F, heading highlights, and optional heading-level markers.
• Live word count, estimated reading time, current mode, and large-file status.

Feel at home in VS Code

• The default theme follows VS Code and updates live. Fixed GitHub Light/Dark, Material Dark, and VS Code Light/Dark 2026 content themes are also available.
• Code highlighting follows the content theme or uses any of 73 highlight.js styles. Line numbers are optional.
• Mermaid, D2, and ECharts have their own coordinated palettes; diagrams update when the active theme changes.
• Custom inline CSS and external stylesheets with live reload let a workspace define its own reading experience.
• Settings apply live and can be scoped per folder in a multi-root workspace.

Stay responsive and private

• An instant read-only paint makes content visible while the live editor starts.
• Large documents use incremental updates, off-screen rendering optimizations, and progressive loading to remain responsive.
• The editor runs in a hardened, sandboxed webview. Remote images are disabled by default so opening a document does not silently disclose your IP to image hosts.

Diagrams, data, math, and more

vMarkd recognizes 18 rendered fenced-code formats. The rendering engines and their core assets are bundled for an offline-first workflow; optional remote images and map tiles remain behind the remote-content setting.

Mermaid also covers planning-friendly formats such as Gantt charts, timelines, static kanban boards, user journeys, quadrant charts, pie charts, and Sankey diagrams. D2 supports multiple layout engines, coordinated themes, and an optional hand-drawn style, including Markdown inside diagram labels. PlantUML runs locally through its bundled TeaVM engine. Rendering errors appear beside the source instead of silently producing a blank block.

For example, this remains ordinary, diff-friendly Markdown:

## Request flow

```mermaid
sequenceDiagram
    User->>Assistant: Ask a question
    Assistant->>Knowledge Base: Retrieve context
    Knowledge Base-->>Assistant: Return Markdown
    Assistant-->>User: Produce an answer
```

See the changelog for the full history of features and fixes.

Get started

Install

1. Open the Extensions view in VS Code (Ctrl/Cmd+Shift+X).
2. Search for vMarkd — Visual Markdown Editor.
3. Select Install.

From a terminal with the VS Code CLI available, you can also run:

code --install-extension spiochacz.vmarkd

Open a Markdown file

• In the Explorer, right-click a .md or .markdown file and choose Open with vMarkd.
• From an open Markdown tab, choose Open With… → vMarkd.
• Use Open with vMarkd to the side when you want the visual document beside another editor group.

vMarkd is an optional custom editor, so installing it does not change the default editor for every Markdown file.

Return to source

• Choose Edit in Text Editor or Open source to the side from the editor toolbar.
• Run vMarkd: Edit in Text Editor from the Command Palette.
• Press Ctrl+Alt+E on Windows/Linux or Cmd+Ctrl+E on macOS.
• Switch to Source from the mode control in the bottom status bar.

Handy shortcuts

Formatting commands for headings, lists, checklists, quotes, code blocks, and inline code are also available from the toolbar and VS Code keybindings.

Requirements and workspace support

• Desktop VS Code 1.110 or newer.
• Local, untitled, and virtual .md / .markdown documents can be edited.
• In untrusted workspaces, editing remains available, but vMarkd waits for trust before writing uploaded images or creating wiki pages.
• In virtual workspaces, features that require a local filesystem — including image upload, wiki-page creation, and local asset resolution — are unavailable.

Configuration

Open VS Code Settings and search for vMarkd. Settings cover editing modes, themes, diagram layouts and palettes, outlines, image handling, wiki roots, custom CSS, and large-document performance. Most document-facing settings are resource-scoped, so different folders can use different workflows.

Security and remote content

Markdown can reference content on the network. vMarkd blocks remote images by default because fetching them can reveal your IP address and the fact that you opened a file. Enable vMarkd › Image: Allow Remote only for documents and workspaces you trust. GeoJSON and TopoJSON can render without a basemap; remote basemap tiles use the same permission.

Core editor and renderer assets are loaded locally inside VS Code's sandboxed webview.

Project

• Read the changelog for release details.
• Report a bug or suggest an improvement in GitHub Issues.
• vMarkd is open source under the MIT license.

Acknowledgements

Every library whose bytes ship inside the extension carries its license text next to its code, under media/vditor/dist/ — one file per library, beside the bundle it covers.

Foundation

• Vditor (MIT) — the Markdown editor component
• Lute (Mulan PSL v2) — the Markdown engine (vendored and pinned)

Shipped with the Vditor package

• highlight.js (BSD-3-Clause) — code highlighting
• KaTeX (MIT) — math typesetting
• flowchart.js (MIT) — ```flowchart diagrams
• plantuml-encoder (MIT) — PlantUML source encoding

Renderers vendored and pinned by vMarkd — each one is loaded from disk, so every diagram renders offline

• Mermaid (MIT) and @mermaid-js/layout-elk (MIT) — flowcharts, sequence, class, state, ER, and the optional ELK layout
• PlantUML — the offline engine is PlantUML's own JavaScript (TeaVM) build, MIT-licensed (plantuml/plantuml-mit), with the icon libraries below
• D2 by Terrastruct (MPL-2.0) — compiled to WebAssembly, with the Go runtime shim (BSD-3-Clause)
• elkjs / Eclipse Layout Kernel (EPL-2.0) — the layout engine shared by D2 and Mermaid's ELK mode
• Graphviz / Viz.js (MIT) — DOT diagrams, and PlantUML's layout backend
• ECharts (Apache-2.0) — charts and mindmaps
• Vega and Vega-Lite (BSD-3-Clause, UW Interactive Data Lab) — grammar-of-graphics charts
• markmap (MIT) — mindmaps from Markdown outlines
• nomnoml (MIT) — UML sketches
• WaveDrom (MIT) — digital timing diagrams
• Leaflet (BSD-2-Clause) and topojson-client (ISC) — GeoJSON / TopoJSON maps
• three.js (MIT) — STL 3D models
• abc.js (MIT) — music notation
• smiles-drawer (MIT) — chemical structures
• Rough.js (MIT) and dagre (MIT) — the D2 sketch look and graph layout, bundled into the webview build

PlantUML icon libraries (loaded on demand, only for a diagram that includes them)

• C4-PlantUML (MIT) and Azure-PlantUML (MIT) by Ricardo Niepel and contributors
• aws-icons-for-plantuml by AWS — macros MIT, icon assets CC BY-ND 2.0
• From plantuml/plantuml-stdlib: k8s (MIT, Diego Casati), kubernetes (Apache-2.0), eip (MIT, Andreas Heil), edgy (MIT), DomainStory (MIT, Johannes Thorn), cloudogu (MIT, Cloudogu GmbH), cloudinsight (MIT), and the Pictogrammers Material icons (Pictogrammers Free License)

Fonts, themes and map tiles

• Source Sans 3 by Adobe (SIL Open Font License 1.1) — bundled so D2 labels are measured and drawn in the same font the d2 binary uses; the license ships as media/fonts/OFL.txt
• Map tiles from OpenStreetMap contributors and CARTO, used only when remote images are enabled, with their attribution shown on the map
• github-markdown-css by Sindre Sorhus (MIT) — the GitHub light/dark markdown-rendering themes (vmarkd.theme.content), vendored under media/markdown-themes/ (upstream verbatim, plus a small marked override block re-asserting the inline-code background on the editor surface)
• vscode-markdown-style by raycon (MIT) — the Material Dark (One Dark) rendering theme (vmarkd.theme.content), adapted under media/markdown-themes/
• Beautiful Mermaid by Craft Docs (MIT) — the 15 Mermaid diagram palettes (vmarkd.diagram.mermaid.theme); only the colour values are vendored (in src/mermaid-palettes.ts, translated to mermaid themeVariables), not the renderer
• microsoft/vscode (MIT) — the vscode-light-2026 / vscode-dark-2026 rendering themes use the built-in Light 2026 / Dark 2026 palettes (the VS Code 1.123+ defaults — extensions/theme-defaults/themes) + the markdown preview layout (extensions/markdown-language-features/media/markdown.css)

License

MIT