PlantUML Markdown Preview

Render PlantUML diagrams inline. Export to self-contained HTML. Secure by design.

Highlights

• Inline PlantUML rendering — diagrams appear directly in your Markdown preview, not in a separate panel
• Self-contained HTML export — SVG diagrams embedded inline, zero external dependencies
• Bidirectional scroll sync — editor and preview scroll together, both ways
• 6 preview themes — GitHub Light/Dark, One Dark, Dracula, Solarized Light/Dark
• Secure — CSP nonce-based policy, no code execution from Markdown content

Table of Contents

• Features
• Quick Start
• Usage
• Configuration
• Keyboard Shortcuts
• FAQ
• Contributing
• License

Features

Inline PlantUML Preview

Open any Markdown file and preview PlantUML code blocks rendered as SVG diagrams, alongside your regular Markdown content.

• Real-time preview updates as you type (two-stage debouncing)
• Auto-refresh on file save
• Auto-follow when switching editor tabs
• Loading indicator during PlantUML rendering
• PlantUML syntax errors displayed inline with line numbers and source context

HTML Export

Export your Markdown document to a self-contained HTML file.

• PlantUML diagrams embedded as inline SVG
• Syntax highlighting CSS included — no external dependencies
• Export and open in browser in one command

Bidirectional Scroll Sync

Editor and preview stay in sync as you scroll either one.

• Anchor-based scroll mapping with binary search and linear interpolation
• Smooth position restoration after re-render

Themes

Preview themes control the overall document appearance:

Switch themes instantly from the title bar icon — no re-render needed (CSS-only swap).

PlantUML themes control diagram styling independently. The extension discovers available themes from your PlantUML installation and presents them in a combined QuickPick alongside preview themes.

Syntax Highlighting

190+ languages supported via highlight.js. Code blocks are styled to match your selected preview theme.

Security

• Content Security Policy with nonce-based script restrictions
• No code execution from Markdown content
• User-authored <script> tags are blocked

Quick Start

Prerequisites

Install

1. Open VS Code
2. Search for PlantUML Markdown Preview in the Extensions view (Ctrl+Shift+X)
3. Click Install

Setup

Add to your VS Code settings (Cmd+, / Ctrl+,):

{
  "plantumlMarkdownPreview.jarPath": "/path/to/plantuml.jar"
}

Note: javaPath and dotPath default to "java" and "dot". Only configure them if these commands are not on your PATH.

Usage

Open Preview

• Keyboard shortcut: Cmd+Alt+V (Mac) / Ctrl+Alt+V (Windows / Linux)
• Context menu: Right-click a .md file → PlantUML Markdown Preview → Open Preview to Side
• Command Palette: PlantUML Markdown Preview: Open Preview to Side

The preview uses its own theming independent of VS Code — default is a white background (GitHub Light).

Export to HTML

Right-click a .md file → PlantUML Markdown Preview → Export as HTML

The HTML file is saved alongside the source .md file. To export and open in your browser in one step, choose Export as HTML & Open in Browser.

Change Theme

Click the theme icon in the preview panel title bar, or use the Command Palette: PlantUML Markdown Preview: Change Preview Theme

PlantUML Syntax

```plantuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
```

@startuml / @enduml wrappers are added automatically if omitted.

Configuration

All settings use the plantumlMarkdownPreview. prefix.

Required

Optional

Keyboard Shortcuts

FAQ

Contributing

See CONTRIBUTING.md for development setup, build instructions, and pull request guidelines.

License

MIT