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

Supported Diagram Formats

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