ReactFlow Diagram Editor

📋 Project Overview

An interactive diagram creation tool similar to Draw.io, built with React Flow. Create hierarchical diagrams with drag-and-drop simplicity.

✨ Features

• Hierarchical Node System - Create parent-child relationships between nodes
• Drag and Drop Interface - Simple and intuitive diagram building
• Multiple Node Types - Subscription, Resource Group, and VNet nodes
• Node Resizing - Customize node dimensions with the resize handle
• Properties Panel - View and edit node properties in real-time
• Mini Map - Navigate large diagrams with ease

🚀 Installation and Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation Steps

1. Clone the repository

git clone https://github.com/yourusername/test-drawio.git
cd test-drawio

2. Install dependencies

npm install
# or
yarn

3. Start the development server

npm run dev
# or
yarn dev

4. Open in your browser

Navigate to http://localhost:5173 to see the application running.

💻 Usage Guide

Creating Nodes

1. Drag a node type from the left sidebar onto the canvas
2. Nested nodes (Resource Groups, VNets) must be dropped within their parent containers
3. Click on nodes to see and edit their properties in the right sidebar

Node Hierarchy

• Subscription Nodes - Top-level containers
• Resource Group Nodes - Must be placed inside Subscription nodes
• VNet Nodes - Must be placed inside Resource Group nodes

Editing Nodes

• Click any node to see its properties in the right sidebar
• Resize nodes using the handle icon at the bottom-right corner
• Drag nodes to reposition them within their parent containers

🛠️ Project Structure

src/
├── components/         # UI components
│   ├── CustomNodes.tsx # Node type definitions
│   ├── Sidebar.tsx     # Left sidebar with node types
│   └── PropertiesSidebar.tsx # Right sidebar for properties
├── context/
│   └── DnDContext.tsx  # Drag and drop context provider
├── App.tsx            # Main application component
├── DnDFlow.tsx        # Flow diagram logic
└── main.tsx           # Application entry point

🔧 Technologies Used

• React - UI library
• TypeScript - Type safety
• Vite - Build tool
• React Flow - Diagram creation library
• TailwindCSS - Styling

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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

---

Made with ❤️ by Julio Cesar Diaz

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})