A VS Code extension that generates a live UML class diagram for any Java file you have open, updating as you type.
- Live diagram — re-renders automatically on every edit, no manual refresh needed
- Full UML relationship support:
- Generalization / Inheritance (
--|>) —class A extends B - Realization (
<|..) —class A implements B - Composition (
*--) — field instantiated withnew X()inline - Aggregation (
o--) — field type injected via constructor parameter - Association (
-->) — field reference to another class - Dependency (
..>) — method parameter, local variable, or return type
- Generalization / Inheritance (
- Correct hierarchy layout — parent classes and interfaces render above their children
- Abstract class and interface annotations —
<<abstract>>and<<interface>>stereotypes - Generic type awareness —
Map<String, Shape>resolves associations to bothMapandShape - Dark / light theme — diagram theme follows your VS Code colour theme
git clone https://github.com/<your-username>/JavaLens.git
cd JavaLens
npm install
npm run compileThen press F5 in VS Code to launch the Extension Development Host.
- Open any
.javafile - Open the Command Palette (
Ctrl+Shift+P) - Run JavaLens: Show Class Diagram
- The diagram panel opens beside your editor and updates as you type
| Layer | Technology |
|---|---|
| Extension host | TypeScript + VS Code Extension API |
| Java parser | web-tree-sitter + tree-sitter-java grammar (WASM) |
| Diagram renderer | Mermaid.js v11 (bundled, no CDN) |
src/
extension.ts — activation, WebView lifecycle, event wiring
parser.ts — tree-sitter Java AST → ClassInfo[]
serializer.ts — ClassInfo[] → Mermaid classDiagram syntax
wasm/
web-tree-sitter.wasm
tree-sitter-java.wasm
media/
mermaid.min.js
- Phase 4 — Performance (debounce, incremental tree-sitter parsing)
- Phase 5 — Multi-file / workspace-level diagram
- Toggle dependency arrows on/off
- Zoom and pan controls