Markdown Editor
A Visual Studio extension that provides a split-pane markdown editor with live preview, syntax highlighting, and diagram rendering via Kroki.
Features
- Live preview — side-by-side editor and rendered HTML preview with bidirectional scroll sync
- Diagram rendering — code fences for 30+ diagram languages are rendered as SVG via Kroki
- Syntax highlighting — code fences display language-aware highlighting (highlight.js) in both the editor and preview
- Configurable — point at any Kroki server (public or self-hosted), per-format enable/disable
- Performance — in-memory LRU cache, async parallel rendering (max 4 concurrent), debounced updates
- Error resilient — failed diagram renders never break the preview; original source is shown with error details
Installation
- Download the
.vsix from the Visual Studio Marketplace or the Releases page.
- Double-click the
.vsix file, or install from Extensions > Manage Extensions > Install from VSIX.
- Restart Visual Studio.
Markdown files (.md) will automatically open in the Markdown Editor.
Configuration
All settings are under Tools > Options > Markdown Editor > General.
| Setting |
Default |
Description |
| Kroki Server URL |
https://kroki.io |
Base URL of the Kroki server |
| Request Timeout |
30 seconds |
Maximum wait time for a render response |
| Sync Scroll |
Enabled |
Bidirectional scroll sync between editor and preview |
| Show Line Numbers |
Enabled |
Display line numbers in the editor pane |
The extension dynamically discovers supported formats from the configured Kroki server. Common types include:
Mermaid, PlantUML, D2, Graphviz (DOT), Ditaa, Nomnoml, Svgbob, ERD, BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag, C4 PlantUML, Vega, Vega-Lite, WaveDrom, Excalidraw, DBML, Pikchr, Structurizr, Bytefield, WireViz, TikZ, UMLet, BPMN, GoAT, and Symbolator.
Use a fenced code block with the diagram language as the info string:
```mermaid
graph LR
A --> B --> C
```
Building from Source
Prerequisites: Visual Studio 2022 (17.0+) with the "Visual Studio extension development" workload.
# Build and test the core library
dotnet build
dotnet test
# Build the VSIX (must be done inside Visual Studio)
# Open MarkdownEditor.slnx and build the MarkdownEditor project
The VSIX output is at MarkdownEditor/bin/Release/MarkdownEditor.vsix.
Project Structure
| Directory |
Purpose |
MarkdownEditor/ |
Main VSIX extension project |
MarkdownEditor.Core/ |
Shared core library (rendering pipeline, Kroki client, tokeniser) |
MarkdownEditor.Tests/ |
Unit and integration tests |
req-arch/ |
Requirements, specs, and architecture documentation |
License
MIT
