DFD Generator - VS Code Extension

A VS Code extension that generates Data Flow Diagrams (DFD) from project descriptions using Mermaid.

Features

• Generate DFD diagrams from simple text descriptions
• Interactive webview panel to visualize diagrams
• Supports Actors, Processes, and Data Stores
• Automatic connection generation

Usage

1. Press F5 to open a new Extension Development Host window
2. In the new window, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
3. Run the command: "Generate DFD"
4. Enter your project description in the format:

   Actors: User, Admin, Customer
   Processes: Login, Process Order, Generate Report
   Data Stores: User DB, Order DB, Inventory DB
   

5. The DFD diagram will be displayed in a webview panel

Installation

1. Install dependencies:

   npm install
   

2. Build the extension:

   npm run compile
   

3. Press F5 in VS Code to run the extension in a new window

Development

• npm run compile - Compile TypeScript
• npm run watch - Watch mode for development
• npm run copy-mermaid - Copy Mermaid library to media folder

Project Structure

.
├── src/
│   └── extension.ts       # Main extension code
├── media/
│   ├── webview.js         # Webview JavaScript
│   ├── webview.css        # Webview styles
│   └── mermaid.min.js     # Mermaid library (copied during build)
├── package.json           # Extension manifest
└── tsconfig.json          # TypeScript configuration