VSCode Markdown Diagram Extension

中文
A VSCode extension for rendering diagrams (flowcharts, sequence diagrams, class diagrams, UML, etc.) in Markdown preview.
Features
- Supports multiple diagram syntaxes: Mermaid/PlantUML/DOT/ditaa
- Diagram rendering powered by markdown-it-diagram
- Lightweight and high-performance Markdown preview enhancement
- Rich control features:
- Zoom, pan, rough rendering
- Copy source code
- Interactive operations:
- Shift + mouse wheel to zoom
- Hold left mouse button to drag
- Integrated modal preview mode
- Configurable options:
- Set maximum diagram height (default: 600px)
- Different Mermaid themes for VSCode dark/light modes
Usage
- Write diagrams using Mermaid or PlantUML syntax in Markdown files
- Open Markdown preview to view rendered diagrams
Example:
## Mermaid
```mermaid
graph TD
A[开始] --> B(处理)
B --> C{条件}
C -->|是| D[结果1]
C -->|否| E[结果2]
```
## PlantUML
```plantuml
@startuml
Alice -> Bob: 你好
Bob --> Alice: 你好吗?
@enduml
```
Preview:

Contributing
Issues and PRs are welcome. Please ensure:
- Code follows ESLint rules
- Run tests with
pnpm test before submitting
- Update relevant documentation
License
MIT License © 2025 skyer
| |