@power-maverick/tool-erd-generator 0.1.18 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +14 -5
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +19 -18
  4. package/npm-shrinkwrap.json +6 -6
  5. package/package.json +11 -5
package/README.md CHANGED
@@ -8,8 +8,8 @@ A PowerPlatform ToolBox tool for generating Entity Relationship Diagrams (ERD) f
8
8
  - ✅ Vite for fast development and building
9
9
  - ✅ Access to ToolBox API via `window.toolboxAPI`
10
10
  - ✅ Dataverse connection and authentication
11
- - ✅ Multiple ERD formats: Mermaid, PlantUML, Graphviz
12
- - ✅ Visual Mermaid diagram rendering
11
+ - ✅ Multiple ERD formats: Mermaid, PlantUML, Graphviz, Draw.io
12
+ - ✅ Visual diagram rendering (Mermaid, PlantUML, Draw.io)
13
13
  - ✅ Configurable output (attributes, relationships, table limits)
14
14
  - ✅ Export diagrams (download source files or copy to clipboard)
15
15
  - ✅ Interactive UI with solution selection
@@ -114,11 +114,12 @@ The tool demonstrates:
114
114
 
115
115
  ### ERD Generation
116
116
 
117
- Supports three formats:
117
+ Supports four formats:
118
118
 
119
119
  1. **Mermaid** - Visual diagrams with interactive rendering
120
120
  2. **PlantUML** - Text-based UML diagrams
121
121
  3. **Graphviz** - DOT language for graph visualization
122
+ 4. **Draw.io** - XML format for diagrams.net/draw.io
122
123
 
123
124
  Configuration options:
124
125
  - Include/exclude attributes
@@ -153,14 +154,14 @@ The tool:
153
154
  2. Lists available solutions
154
155
  3. Fetches solution metadata (tables, attributes, relationships)
155
156
  4. Generates diagram in selected format
156
- 5. Renders visual preview (Mermaid) or shows source code
157
+ 5. Renders visual preview (Mermaid, PlantUML, Draw.io) or shows source code
157
158
  6. Allows export via download or clipboard
158
159
 
159
160
  ## Configuration Options
160
161
 
161
162
  The tool provides several configuration options:
162
163
 
163
- - **Output Format**: Choose between Mermaid, PlantUML, or Graphviz
164
+ - **Output Format**: Choose between Mermaid, PlantUML, Graphviz, or Draw.io
164
165
  - **Include Attributes**: Show/hide table columns in the diagram
165
166
  - **Include Relationships**: Show/hide relationships between tables
166
167
  - **Max Attributes**: Limit the number of attributes shown per table (0 = show all)
@@ -182,6 +183,14 @@ The tool provides several configuration options:
182
183
  - Powerful layout engines
183
184
  - Flexible customization options
184
185
 
186
+ ### Draw.io
187
+ - Native diagrams.net/draw.io XML format
188
+ - Visual preview using embedded draw.io viewer
189
+ - Can be opened directly in draw.io web or desktop app
190
+ - mxGraph-based format with entity-relationship notation
191
+ - Tables displayed with attributes and relationships
192
+ - Entities positioned in an organized grid layout
193
+
185
194
  ## Troubleshooting
186
195
 
187
196
  ### Build Issues
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- *{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#0e639c,#0a4f7c);color:#333;line-height:1.6}.container{max-width:1400px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:3rem;color:#fff}.header h1{font-size:2.5rem;margin-bottom:.5rem}.header p{font-size:1.1rem;opacity:.9}.loading{text-align:center;font-size:1.5rem;color:#fff;padding:3rem}.card{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 4px 6px #0000001a;margin-bottom:2rem}.error{background:#fee;border:1px solid #fcc;color:#c33;padding:1rem;border-radius:6px;margin-bottom:1rem}.info-message{background:#e3f2fd;border:1px solid #90caf9;color:#01579b;padding:1rem;border-radius:6px;margin-bottom:1.5rem}.info-message strong{display:block;margin-bottom:.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#0e639c}select{width:100%;padding:.75rem;background:#f9fafb;border:1px solid #d1d5db;border-radius:4px;font-size:1rem;cursor:pointer}select:focus{outline:none;border-color:#0e639c}.generate-section h2{color:#0e639c;margin-bottom:1rem;font-size:1.5rem}.format-selector{display:flex;gap:.75rem;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap}.format-btn{padding:.5rem 1rem;border:2px solid #0e639c;background:#fff;color:#0e639c;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:500}.format-btn:hover{background:#f0f7ff}.format-btn.active{background:#0e639c;color:#fff}.config-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}.config-section h3{color:#0e639c;margin-bottom:1rem}.config-group{margin-bottom:1rem}.config-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.config-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.config-group input[type=number]{width:100px;padding:.5rem;border:1px solid #d1d5db;border-radius:4px}.config-label-group{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.config-help{font-size:.875rem;color:#666;margin-left:28px}.btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary{background:#0e639c;color:#fff;width:100%;margin-top:1rem}.btn-primary:hover{background:#0a4f7c}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#f3f4f6;color:#333;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb}.diagram-controls{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.diagram-container{margin-top:1rem;border:1px solid #e5e7eb;border-radius:8px;padding:1.5rem;background:#f9fafb;overflow:auto;max-height:600px}.diagram-text{background:#1e1e1e;color:#d4d4d4;padding:1.5rem;border-radius:6px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;white-space:pre}.mermaid-container{text-align:center;background:#fff;padding:1rem;border-radius:4px;overflow-x:auto}
1
+ *{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#0e639c,#0a4f7c);color:#333;line-height:1.6}.container{max-width:1400px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:3rem;color:#fff}.header h1{font-size:2.5rem;margin-bottom:.5rem}.header p{font-size:1.1rem;opacity:.9}.loading{text-align:center;font-size:1.5rem;color:#fff;padding:3rem}.loading-mermaid{text-align:center;font-size:1rem;color:#666;padding:2rem;font-style:italic}.card{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 4px 6px #0000001a;margin-bottom:2rem}.error{background:#fee;border:1px solid #fcc;color:#c33;padding:1rem;border-radius:6px;margin-bottom:1rem}.info-message{background:#e3f2fd;border:1px solid #90caf9;color:#01579b;padding:1rem;border-radius:6px;margin-bottom:1.5rem}.info-message strong{display:block;margin-bottom:.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#0e639c}select{width:100%;padding:.75rem;background:#f9fafb;border:1px solid #d1d5db;border-radius:4px;font-size:1rem;cursor:pointer}select:focus{outline:none;border-color:#0e639c}.generate-section h2{color:#0e639c;margin-bottom:1rem;font-size:1.5rem}.format-selector{display:flex;gap:.75rem;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap}.format-btn{padding:.5rem 1rem;border:2px solid #0e639c;background:#fff;color:#0e639c;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:500}.format-btn:hover{background:#f0f7ff}.format-btn.active{background:#0e639c;color:#fff}.config-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}.config-section h3{color:#0e639c;margin-bottom:1rem}.config-group{margin-bottom:1rem}.config-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.config-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.config-group input[type=number]{width:100px;padding:.5rem;border:1px solid #d1d5db;border-radius:4px}.config-label-group{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.config-help{font-size:.875rem;color:#666;margin-left:28px}.btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary{background:#0e639c;color:#fff;width:100%;margin-top:1rem}.btn-primary:hover{background:#0a4f7c}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#f3f4f6;color:#333;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb}.diagram-controls{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.diagram-container{margin-top:1rem;border:1px solid #e5e7eb;border-radius:8px;padding:1.5rem;background:#f9fafb;overflow:auto;max-height:600px}.diagram-text{background:#1e1e1e;color:#d4d4d4;padding:1.5rem;border-radius:6px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;white-space:pre}.diagram-visual{text-align:center;background:#fff;padding:2rem;border-radius:6px;overflow-x:auto;min-height:200px}.diagram-visual svg{max-width:100%;height:auto}.diagram-visual img{max-width:100%;height:auto;border:1px solid #e5e7eb;border-radius:4px}.mermaid-container{text-align:center;background:#fff;padding:1rem;border-radius:4px;overflow-x:auto}