Introduction

Diagram Designer is a web application that I built to fit my own need, which are:

• Simple: no over-complicated design and components
• Sharing: Share the diagram with ease
• Customizable: Add new components anytime on demand
• Powerful: Fast loading, unlimited diagrams

Tech Stack

• Frontend: Next.js
• Database: Supabase(Remote) | IndexDB(local)
• Core library: React Flow

Design

Application Architecture

• Zustand for lightweight, performant state management
• Context API for dependency injection of stores
• Immer for immutable state updates
• React Flow for specialized diagram state management

The application uses a layered state architecture:

FlowProvider (Context) → FlowStore (Zustand) → React Components

Database Architecture

This project is using Supabase for BaaS that provides:

• Row Level Security (RLS)
• OAuth
• Edge Functions
• Real-time subscriptions

Database Schema Design

The database has a normal relational structure:

diagrams (main container)
├── diagram_nodes (individual nodes)
├── diagram_edges (connections)
├── indicators (custom indicators)
└── user_preferences (UI settings)

Data Persistence Strategy

• Auto-save with debounced updates (every 2 seconds)
• Local-first approach with localStorage fallback
• Conflict resolution through timestamp-based merging

Security Architecture

• Authentication & Authorization
• Supabase Auth with social providers(GCP only in this app)
• Row Level Security (RLS) for data access control
• JWT tokens for stateless authentication
• Share tokens for public diagram access

Features

• 5 Node Types: Database tables, sticky notes, links, groups, code blocks
• Auto-save: Saves every 2 seconds to cloud, immediate save to local storage
• Share Links: Generate secure URLs for public viewing through supabase RLS
• No Login required: only remote feature disabled for non-login user
• Rich indicators: All Lucide icons supported, with customized color
• iframe supported: easy embed with iframe for shared diagram(See below)