1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174<br />
<p align="center">
<a href="#" target="_blank"><img src="./packages/prisma-generate-uml/media/readme/banner.jpg" alt="logo"></a>
<br />
<br />
<b>Prisma Generate UML</b> is a VSCode extension that quickly creates UML diagrams from Prisma schemas with a single click, offering easy visualization.
<br />
<br />
</p>
> _You can download final bundles from the [Releases](https://github.com/AbianS/prisma-generate-uml/releases) section._
      
> [!NOTE]
> 🚧
> **Prisma Generate UML** is currently under development. Stay tuned for more updates!
## 🏗️ Architecture
```mermaid
graph TB
subgraph "Prisma Input"
SCHEMA["📝 schema.prisma<br/>Prisma schema file<br/>Models, Enums, Relations"]
FILE_WATCHER["👁️ File Watcher<br/>Detects .prisma changes"]
end
subgraph "VSCode Environment"
EDITOR["📝 VSCode Editor<br/>Editor interface"]
CMD["⚡ Command Palette<br/>prisma-generate-uml.generateUML"]
ICON["🔗 UML Icon<br/>Toolbar button"]
end
subgraph "Extension Core"
EXT_ENTRY["🚀 extension.ts<br/>Entry point<br/>Command registration"]
PARSER["⚡ DMMF Parser<br/>@prisma/internals<br/>getDMMF() + getSchemaWithPath()"]
RENDER["🎨 Render Engine<br/>transformDmmfToModelsAndConnections()<br/>Generates Models, Connections, Enums"]
PANEL_MGR["📋 PrismaUMLPanel<br/>Manages WebView lifecycle<br/>postMessage() communication"]
end
subgraph "WebView Container"
WEBVIEW["🌐 VSCode WebView<br/>Isolated container<br/>HTML + CSS + JS"]
CSP["🔒 Content Security Policy<br/>WebView security"]
end
subgraph "React Application"
APP["⚛️ App.tsx<br/>Root component<br/>Global state"]
THEME["🎨 Theme Provider<br/>VSCode theme handling"]
VISUALIZER["📊 SchemaVisualizer<br/>Main container"]
FLOW_PROVIDER["🔄 ReactFlowProvider<br/>@xyflow/react context"]
end
subgraph "UML Components"
FLOW["📊 ReactFlow Canvas<br/>Rendering engine<br/>Drag & Drop, Zoom, Pan"]
MODEL_NODE["🏗️ ModelNode<br/>Model component<br/>Fields, Types, Relations"]
ENUM_NODE["📝 EnumNode<br/>Enum component<br/>Enumerated values"]
CONNECTIONS["🔗 Edges/Connections<br/>Model relationships"]
end
subgraph "Output Actions"
SCREENSHOT["📸 Screenshot<br/>Export PNG/SVG"]
DOWNLOAD["💾 Download<br/>Save image"]
end
SCHEMA --> FILE_WATCHER
FILE_WATCHER --> EXT_ENTRY
EDITOR --> CMD
EDITOR --> ICON
CMD --> EXT_ENTRY
ICON --> EXT_ENTRY
EXT_ENTRY --> PARSER
PARSER --> RENDER
RENDER --> PANEL_MGR
PANEL_MGR --> WEBVIEW
WEBVIEW --> CSP
CSP --> APP
APP --> THEME
APP --> VISUALIZER
VISUALIZER --> FLOW_PROVIDER
FLOW_PROVIDER --> FLOW
FLOW --> MODEL_NODE
FLOW --> ENUM_NODE
FLOW --> CONNECTIONS
MODEL_NODE --> SCREENSHOT
ENUM_NODE --> SCREENSHOT
SCREENSHOT --> DOWNLOAD
DOWNLOAD -.-> PANEL_MGR
PANEL_MGR -.-> EXT_ENTRY
```
## 📦 Project Structure
```
prisma-generate-uml/
├── packages/
│ ├── prisma-generate-uml/ # VSCode Extension
│ │ ├── src/
│ │ │ ├── extension.ts # Entry point
│ │ │ ├── panels/ # WebView management
│ │ │ └── core/ # Rendering logic
│ │ └── package.json
│ │
│ ├── webview-ui/ # React Frontend
│ │ ├── src/
│ │ │ ├── App.tsx # Main component
│ │ │ ├── components/ # UML Components
│ │ │ └── lib/ # Utils and types
│ │ └── package.json
│ │
│ └── schema.prisma # Example schema
│
├── turbo.json # Turbo configuration
└── package.json # Root workspace
```
## 🚀 Development
### Prerequisites
- Node.js 18+
- npm
### Installation
```bash
# Clone the repository
git clone https://github.com/AbianS/prisma-generate-uml.git
cd prisma-generate-uml
# Install dependencies
npm install
# Development
npm run dev
```
## ✨ Features
- 🔥 **Instant UML Diagrams**: Generate UML diagrams from Prisma schemas with a single click
- 🖼 **Easy Visualization**: Simplify data architecture visualization in an exciting way
- 🛠 **Seamless Integration**: Works seamlessly within VSCode, no extra configuration required
- 📂 **Multi-file Prisma Schema Support**: Full support for Prisma's `prismaSchemaFolder` feature
- 🔃 **Automatic Updates**: Keep your UML diagrams up-to-date with schema changes
## 🏃♂️ Quick Usage
You must have [the Prisma VSCode extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma)
installed to use this extension.
1. Open a `.prisma` file in VSCode
2. Look for the UML icon in the editor toolbar
3. Click it to generate the diagram instantly
## 🛠️ Technologies
- **Extension**: TypeScript + VSCode Extension API
- **WebView**: React + Vite + Tailwind CSS
- **UML Rendering**: React Flow + Custom Components
- **Prisma Integration**: @prisma/internals DMMF
- **Monorepo**: Turbo + npm workspaces
- **Code Quality**: Biome (ESLint + Prettier alternative)
## 📄 License
MIT License - see [LICENSE](LICENSE) for more details.