11# SQL Tooling for Draw.io
22
3- Third-party plugins for SQL tooling in Draw.io. Contributions are welcome!
3+ Third-party plugins that add SQL and NoSQL tooling to Draw.io. Contributions welcome!
4+
5+ ## Table of Contents
6+
7+ - [ Overview] ( #overview )
8+ - [ Download] ( #download )
9+ - [ Option 1: Direct Download] ( #option-1-direct-download )
10+ - [ Option 2: Clone Repository] ( #option-2-clone-repository )
11+ - [ Installation] ( #installation )
12+ - [ VSCode Integration] ( #vscode-integration )
13+ - [ Desktop App Integration] ( #desktop-app-integration )
14+ - [ Features] ( #features )
15+ - [ SQL Plugin (` sql.js ` )] ( #sql-plugin-sqljs )
16+ - [ NoSQL Plugin (` nosql.js ` )] ( #nosql-plugin-nosqljs )
17+ - [ TypeScript Plugin (` nosql-ts.js ` )] ( #typescript-plugin-nosql-tsjs )
18+ - [ Examples] ( #examples )
19+ - [ Development] ( #development )
20+ - [ Prerequisites] ( #prerequisites )
21+ - [ Setup] ( #setup )
22+ - [ Build Commands] ( #build-commands )
23+ - [ Contributing] ( #contributing )
24+ - [ License] ( #license )
25+
26+ ---
427
528## Overview
629
7- This project provides plugins that extend Draw.io with SQL and NoSQL capabilities, allowing you to:
8- - Import/export SQL DDLs
9- - Import/export OpenAPI JSONs
30+ This project provides Draw.io plugins for working with SQL and NoSQL artifacts:
31+
32+ - Import and export SQL DDLs
33+ - Import and export OpenAPI (OpenAPI 3) JSON
1034- Generate TypeScript interfaces
11- - Work with various database schemas
35+ - Visualize and edit database schemas in Draw.io
1236
1337## Download
1438
1539### Option 1: Direct Download
1640
17- Download the plugin files directly from the [ releases page] ( https://github.com/funktechno/sqltooling-drawio/releases ) or use the direct links below :
41+ Get the built plugin files from the releases page or use the raw links:
1842
19- - ** [ sql.js] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/sql.js ) ** - Import/export SQL DDLs
20- - ** [ nosql.js] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql.js ) ** - Import/export OpenAPI JSONs
21- - Alternative: [ nosql.min.js] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql.min.js ) (minified version)
22- - ** [ nosql-ts.js] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql-ts.js ) ** - Import/export TypeScript interfaces and OpenAPI JSONs
23- - Alternative: [ nosql-ts.min.js] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql-ts.min.js ) (minified version)
43+ - [ Releases] ( https://github.com/funktechno/sqltooling-drawio/releases )
44+ - ` dist/sql.js ` — SQL import/export: https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/sql.js
45+ - ` dist/nosql.js ` — OpenAPI import/export: https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql.js
46+ - ` dist/nosql-ts.js ` — TypeScript & OpenAPI: https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/nosql-ts.js
2447 - ⚠️ ** Note** : Not VSCode compatible
2548
49+ > Note: Minified variants (e.g., ` nosql.min.js ` ) are available for production use.
50+
2651### Option 2: Clone Repository
2752
53+ Clone the repo and use the files from ` dist/ ` :
54+
2855``` bash
29- git clone --branch main
[email protected] :funktechno/sqltooling-drawio.git
56+ git clone --branch main https://github.com/funktechno/sqltooling-drawio.git
57+ cd sqltooling-drawio
3058```
3159
32- Then use the files from the ` dist ` folder.
3360
3461## Installation
3562
3663### VSCode Integration
3764
38- For VSCode users with the [ Draw.io Integration] ( https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio ) extension:
39-
40- 1 . Download the plugin files from the [ Download] ( #download ) section above
41- 2 . Add to your ` settings.json ` :
42-
65+ If you use the Draw.io extension for VSCode (hediet.vscode-drawio), add the plugin files to your settings:
66+ * windows
4367``` json
4468{
4569 "hediet.vscode-drawio.plugins" : [
@@ -52,83 +76,84 @@ For VSCode users with the [Draw.io Integration](https://marketplace.visualstudio
5276 ]
5377}
5478```
79+ * mac
80+ ``` json
81+ {
82+ "hediet.vscode-drawio.plugins" : [
83+ { "file" : " path/to/sqltooling-drawio/dist/sql.js" },
84+ { "file" : " path/to/sqltooling-drawio/dist/nosql.js" }
85+ ]
86+ }
87+ ```
5588
5689### Desktop App Integration
5790
58- It's easiest to setup in the Draw.io Desktop to use the plugin. Follow these steps:
59-
60- #### Prerequisites
61- - Download and install [ Node.js] ( https://nodejs.org/ )
62-
63- #### Setup Steps
91+ To run the plugin in the Draw.io Desktop app:
6492
93+ -
65941 . ** Clone or Download Draw.io Desktop**
6695 - ** Option A (Git Clone)** : ` git clone --recursive https://github.com/jgraph/drawio-desktop.git ` (1 GB clone)
6796 - ** Option B (Download ZIP)** : Download from [ dev.zip] ( https://github.com/jgraph/drawio-desktop/archive/refs/heads/dev.zip ) and unzip
6897 - ⚠️ ** Note** : Don't download precompiled from Releases as you can't modify the plugins
69-
70- 2 . ** Install Dependencies**
71- - Open command line (PowerShell, Command Prompt, Bash, Terminal)
72- - Navigate to the drawio-desktop folder: ` cd <path>/drawio-desktop `
73- - Run: ` npm install `
74-
75- 3 . ** Update SQL Plugin**
76- - Update ` drawio/src/main/webapp/plugins/sql.js ` with changes from [ this branch] ( https://raw.githubusercontent.com/funktechno/sqltooling-drawio/main/dist/sql.js )
77-
78- 4 . ** Run Application**
79- - Execute: ` npm start `
80-
81- 5 . ** Add Plugin**
82- - In the running application, go to ** Extras** → ** Plugins** → ** Add**
83- - Select ` sql ` plugin
84- - Close application and reopen
85- - Plugin is now installed and ready to use
98+ 2 . Install dependencies: ` npm install ` in the ` drawio-desktop ` directory.
99+ 3 . Replace ` drawio/src/main/webapp/plugins/sql.js ` with the built ` dist/sql.js ` from this repo.
100+ 4 . Start the app: ` npm start ` .
101+ 5 . Add the plugin via Extras → Plugins → Add, then restart Draw.io.
86102
87103## Features
88104
89105### SQL Plugin (` sql.js ` )
90- - Import SQL DDLs into Draw.io diagrams
91- - Export diagrams as SQL DDLs
92- - Database schema visualization
106+ - Import SQL DDL into Draw.io diagrams
107+ - Export diagrams to SQL DDL
108+ - Visualize database schema relationships
93109
94110### NoSQL Plugin (` nosql.js ` )
95- - Import/ export OpenAPI JSON specifications
96- - Generate classes/interfaces in your preferred language using OpenAPI specs
97- - API documentation visualization
111+ - Import and export OpenAPI (OpenAPI 3) JSON
112+ - Generate language bindings using OpenAPI
113+ - Visualize API models and relationships
98114
99115### TypeScript Plugin (` nosql-ts.js ` )
100116- Import/export TypeScript interfaces
101- - Import/export OpenAPI JSONs
102- - Type-safe development workflows
117+ - Interoperate with OpenAPI generation
103118
104119## Examples
105120
106121### SQL Import/Export
122+
107123![ SQL Import Menu] ( ./assets/menu_from_sql.png )
108124
109125### Export Options
126+
110127![ Export Menu] ( ./assets/menu_export_as_to_sql.png )
111128
129+ ### Usage
130+
131+ Shapes: More Shapes → Entity Relation
132+
133+ ![ Entity Relation Shapes] ( ./assets/entity_relation_shapes.png )
134+
112135## Development
113136
114137### Prerequisites
115- - Node.js
138+ - Node.js 22
116139- npm
117140
118141### Setup
142+
119143``` bash
120144npm install
121145```
122146
123147### Build Commands
124- - ` npm run build:client:sql ` - Update ` dist/sql.js `
125- - ` npm run build:client:nosql ` - Update ` dist/nosql.js `
126- - ` npm run build:client:all ` - Update all files in ` dist/* `
148+
149+ - ` npm run build:client:sql ` — build ` dist/sql.js `
150+ - ` npm run build:client:nosql ` — build ` dist/nosql.js `
151+ - ` npm run build:client:all ` — build all files under ` dist/ `
127152
128153## Contributing
129154
130- Contributions are welcome! Please feel free to submit issues and pull requests .
155+ Contributions are welcome. Please open issues or submit PRs following standard contribution guidelines .
131156
132157## License
133158
134- See [ LICENSE] ( LICENSE ) file for details.
159+ See the - [ LICENSE] ( LICENSE ) file for license details.
0 commit comments