Dataverse ERD Generator

A PowerPlatform ToolBox tool for generating Entity Relationship Diagrams (ERD) from Dataverse solutions using React and Vite.

Features

• ✅ React 18 with TypeScript
• ✅ Vite for fast development and building
• ✅ Access to ToolBox API via window.toolboxAPI
• ✅ Dataverse connection and authentication
• ✅ Multiple ERD formats: Mermaid, PlantUML, Graphviz, Draw.io
• ✅ Visual diagram rendering (Mermaid, PlantUML, Draw.io)
• ✅ Configurable output (attributes, relationships, table limits)
• ✅ Export diagrams (download source files or copy to clipboard)
• ✅ Interactive UI with solution selection

Structure

erd-generator/
├── src/
│   ├── App.tsx               # Main React component
│   ├── main.tsx              # Entry point
│   ├── styles.css            # Global styles
│   ├── components/
│   │   └── ERDGenerator.ts   # ERD generation logic
│   ├── models/
│   │   └── interfaces.ts     # TypeScript interfaces
│   └── utils/
│       └── DataverseClient.ts # Dataverse API client
├── index.html                # HTML template
├── vite.config.ts            # Vite configuration
├── package.json
├── tsconfig.json
└── README.md

Installation

Install dependencies:

npm install

Development

Run development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Usage in ToolBox

1. Build the tool:

   npm run build

2. The built files will be in the dist/ directory:

   • index.html - Main entry point
   • index.js - Bundled application
   • index.css - Compiled styles

3. Install the tool in PowerPlatform ToolBox through the UI or programmatically

Key Concepts

ToolBox API Integration

The tool integrates with PowerPlatform ToolBox via window.toolboxAPI:

// Get connection context
const context = await window.toolboxAPI.getToolContext();

// Show notification
await window.toolboxAPI.showNotification({
  title: "Success",
  body: "ERD generated successfully",
  type: "success"
});

// Save file
await window.toolboxAPI.saveFile(fileName, content);

// Copy to clipboard
await window.toolboxAPI.copyToClipboard(text);

Important: The tool must listen for TOOLBOX_CONTEXT via postMessage from the parent window. This provides connection information when the tool is loaded in a webview.

React Hooks

The tool demonstrates:

• useState for managing component state
• useEffect for initialization and side effects
• Type-safe event handling with TypeScript
• Dataverse API integration

ERD Generation

Supports four formats:

1. Mermaid - Visual diagrams with interactive rendering
2. PlantUML - Text-based UML diagrams
3. Graphviz - DOT language for graph visualization
4. Draw.io - XML format for diagrams.net/draw.io

Configuration options:

• Include/exclude attributes
• Include/exclude relationships
• Limit maximum attributes per table

Styling

Uses CSS with modern features:

• CSS Grid for layouts
• Flexbox for alignment
• Gradient backgrounds
• Responsive design
• Clean, professional UI

TypeScript

Full TypeScript support with:

• Type declarations for ToolBox API
• Strict type checking
• Modern ES2020 features
• React JSX types
• Dataverse API types

Building Diagrams

The tool:

1. Connects to Dataverse using provided credentials
2. Lists available solutions
3. Fetches solution metadata (tables, attributes, relationships)
4. Generates diagram in selected format
5. Renders visual preview (Mermaid, PlantUML, Draw.io) or shows source code
6. Allows export via download or clipboard

Configuration Options

The tool provides several configuration options:

• Output Format: Choose between Mermaid, PlantUML, Graphviz, or Draw.io
• Include Attributes: Show/hide table columns in the diagram
• Include Relationships: Show/hide relationships between tables
• Max Attributes: Limit the number of attributes shown per table (0 = show all)

Output Formats

Mermaid

• Modern, declarative diagram syntax
• Visual preview available in the tool
• Great for documentation and GitHub

PlantUML

• Widely supported UML format
• Can be rendered by many tools
• Standard UML notation

Graphviz DOT

• Graph description language
• Powerful layout engines
• Flexible customization options

Draw.io

• Native diagrams.net/draw.io XML format
• Visual preview using embedded draw.io viewer
• Can be opened directly in draw.io web or desktop app
• mxGraph-based format with entity-relationship notation
• Tables displayed with attributes and relationships
• Entities positioned in an organized grid layout

Troubleshooting

Build Issues

If builds fail, try:

# Clean build artifacts
rm -rf dist node_modules
npm install
npm run build

ToolBox Integration Issues

Check:

1. window.toolboxAPI is available
2. Console logs for TOOLBOX_CONTEXT messages
3. Connection context is being received
4. Network requests are successful

Contributing

Contributions are welcome! When contributing:

1. Maintain PPTB integration patterns
2. Keep webview bundle browser-only (no Node.js dependencies)
3. Test in PowerPlatform ToolBox
4. Update documentation as needed
5. Follow existing code style

License

This project is licensed under the GPL-2.0 License - see the LICENSE file for details.

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions