VS Code Extensions

Tags

#sequence diagram

Mermaid NG — Visual Editor

Mermaid NG — Visual Editor

NGPowerToys

WYSIWYG, drag-and-drop visual editor for AI-friendly Mermaid diagrams — what you see is what you get. For architects and developers — build, edit, and round-trip flowcharts, sequence, class, ER, and state diagrams across .md and .mmd files. Multi-sheet (draw.io style), fully offline (Mermaid 11.15.0

Programming Languages Visualization #markdown
962
Mermaid Preview — 100% Offline

Mermaid Preview — 100% Offline

brainfkt

Offline-first Mermaid diagram preview for VS Code—with professional export, no account, and no required network connection.

Programming Languages Visualization #keybindings
366 5.0
PlantUML Local

PlantUML Local

kkdev92

Render ```plantuml code blocks in the built-in Markdown preview. No Java, no server, no network connection — your diagram source is rendered locally.

Programming Languages Visualization #java
90
VS UML Modeling

VS UML Modeling

YoavFrandzel

UML class, sequence, and state diagram modeling with a shared workspace model.

Visualization #json
64
annotron — Markdown preview, Mermaid diagrams & point-and-click review

annotron — Markdown preview, Mermaid diagrams & point-and-click review

hueanmy

Preview Markdown & HTML with Mermaid diagrams (flowchart, sequence, class, ER, C4, gantt), outline navigation, and point-and-click review. A human-in-the-loop layer for AI coding agents (Claude Code, Cursor): comment on any element or text, auto-apply feedback via the integrated agent loop, sync edi

Visualization Notebooks #html
25 5.0
CodeMap Trace

CodeMap Trace

gns333

Sequence diagrams and spatial code traces for .codemap JSON files. 可视化服务时序图与源码 Trace。

Visualization #visualization
22
DrawIt for VS Code

DrawIt for VS Code

ChamukaLabs

Create and edit DrawIt diagrams with AI generation — directly in VS Code.

Programming Languages Visualization #ai
14
MR Behavior Lens

MR Behavior Lens

sinjmenaruchi

Review GitLab merge requests as before/after behavior sequence diagrams

SCM Providers AI #ai
12
Advanced Mermaid: Visual Diff

Advanced Mermaid: Visual Diff

AkshayDMuley

Visual diff for Mermaid diagrams — compare the rendered picture across any git ref, or merge both versions into one marked-up diagram.

SCM Providers Visualization #git
5
GlitchLens

GlitchLens

Glitch-Sound

Instantly visualize TypeScript and JavaScript function flow as Mermaid sequence diagrams.

Programming Languages #python
3
Forward

Forward

forward

Annotate a shared design canvas from VS Code — document any API (any language/framework), draw infrastructure & sequence-flow diagrams, track tasks, and browse endpoint history. Synced to your team through the Forward server — or automate it from CI via @adc anchors and the Forward MCP server.

Visualization #tasks
2