1. Project Overview

ERD Online is an open-source, free online data modeling and metadata management platform. It provides easy-to-use metadata design, relationship diagram design, SQL queries, and other features, complemented by version control, import and export, data sources, SQL parsing, auditing, team collaboration, and more, making it easy to manage database metadata quickly and securely.

2. Open Source License

Licensed under AGPL-3.0

3. Screenshots

Feature Overview

Relationship Diagram Design

Metadata Design

Version Management

Import

Export

Online SQL

Execution Plan

4. Feature Overview

Features

• Ready to Use: Focus on data structure design
• 
  
• Team Collaboration: Three-level permission management (Owner, Administrator, and Regular User) with element-level access control
• 
  
• Metadata Design: Quickly copy existing table structures, generate tables from JSON, and configure default table fields and letter casing
• 
  
• Metadata Management: Manage table structures online and supports forward execution to databases
• 
  
• Metadata Parsing: Parse existing database structures into the software for management
• 
  
• Broad Data Source Support: Supports online management of multiple database connections (Mysql, Oracle, DB2, SqlServer, PostGreSql), with metadata structure synchronization across data sources
• 
  
• Version Management: Every requirement and change can generate a version, and differences between versions can be compared
• 
  
• Automatically generate Word, HTML, and Markdown documents for all table structures, making them easy to share offline
• 
  
• Online SQL: Online SQL queries, SQL execution plans, and historical query records
• 
  
• Never Lose Data: Historical metadata operations are recorded with version history (the most recent 9 versions), allowing restoration to any previous version
• 
  
• Data Dictionary: Global data dictionary design to enforce metadata design standards

Development Milestones

What Is ERD Online

ERD is an abbreviation for Entity-Relationship Diagram. It refers to a structural diagram used in database design and is also known as an ERD, ER Diagram, Entity-Relationship Model, Entity-Relationship Schema Diagram, or ER Model. ERD Online provides developers with an all-in-one solution for database structure design, version management, SQL execution, reverse parsing, and document generation.

Our Goal: By managing metadata, we aim to empower big data, low-code development, BI, large-screen applications, and other fields, making data the core engine of enterprise innovation.

Core Capabilities

• Metadata Parsing
• Parse metadata from data sources and manage it online through ERD Online.
• Metadata Management
• This design solves the problem of inefficient metadata management throughout the software development lifecycle.
• Broad Data Source Support (Mysql, Oracle, Sqlserver, Postgresql)
• Supports all data sources that comply with SQL standards, including common databases such as Mysql, Oracle, Sqlserver, and Postgresql.
• Cross-Source Synchronization
• ERD Online provides online synchronization across multiple data sources. This design solves the challenges of adapting a product to multiple data sources and handling inconsistencies in SQL dialects between different data sources.
• Online SQL Export (Full or Incremental)
• By recording metadata changes and creating version checkpoints, the system supports version comparison and generates SQL scripts for various data sources. This design solves the time-consuming and labor-intensive problem of comparing incremental SQL scripts when moving products from development to production.
• Online SQL Execution
• No need to install third-party database management tools or open a Shell window. Execute SQL directly against data sources online. This feature saves enterprises significant costs on purchasing licensed database management software.
• Data Lineage Management
• Manage relationships between metadata online and create clear lineage views at a glance. This design addresses the lack of clarity in traditional data relationships and makes data relationship analysis more efficient.
• Team Collaboration
• Precise permission management assigns different functions to different roles, ensuring data security. Supports real-time online collaboration among multiple users with automatic synchronization.
• Metadata Export (Word, PDF, HTML, Markdown)
• Supports exporting offline documents in Word, PDF, HTML, and Markdown formats for easy offline sharing, communication, and archiving.
• One-Click Import from the Official Marketplace
• The official marketplace provides extensive metadata for various industries, types, devices, and communication protocols. Import it into your own project with one click to quickly build your metadata structure.
• The data structures generated and transmitted by each instrument, software application, and communication process are fixed. Search for and import them from the official marketplace to avoid redundant development.
• Low-Code Platform (Planned)
• BI
• Big screen
• Low-Code Platform

Who We Serve

• Development Engineers
• Parse metadata from existing data sources with one click, manage it online, and generate incremental SQL scripts for production deployment
• Generate project code based on existing metadata structures
• Customize fixed columns for each table
• BI Developers
• Large-Screen Application Developers
• Architects
• Connect all data sources across product lines
• Manage all data sources online and eliminate data silos
• Establish standardized field conventions for data sources
• Audit developers' data source operations
• Database Engineers
• Manage data source metadata online and customize dashboards for all data sources
• Audit SQL scripts before production deployment
• Project Management / Product Management / Development Efficiency Management Personnel
• Understand data structures and how they evolve throughout product development
• Make product development decisions based on data

5. Tech Stack

Business Architecture Overview

ERD Online Technology Stack

• Frontend: React + Ant design + Zustand
• Backend: Java8 + Spring Boot2 + Maven3 + Mysql8

Zustand

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated

In short, Zustand is a frontend state management technology similar to Redux.

ERD Online leverages Zustand's powerful state management capabilities to manipulate large JSON metadata structures across pages while separating page components from JavaScript logic.

How to Use Zustand

In ERD Online, all methods for manipulating large JSON objects have been extracted to src/store, where all operations on large JSON objects in ERD Online are managed. Furthermore, because the page components and JavaScript logic are separated, you can theoretically convert ERD Online from a React project into a Vue project (this is theoretically feasible because Ant Design also has a Vue version).

Zustand in ERD ONLINE

export type ProjectState =
  {
    tables: any[],
    project: any,
    fetch: () => Promise<void>;
    dispatch: IProjectJsonDispatchSlice & IConfigJsonDispatchSlice & IModulesDispatchSlice
      & IDataTypeDomainsDispatchSlice & IDatabaseDomainsDispatchSlice & IProfileDispatchSlice
      & IEntitiesDispatchSlice & IExportDispatchSlice
  }
  & IProjectJsonSlice
  & IConfigJsonSlice
  & IModulesSlice
  & IDataTypeDomainsSlice
  & IDatabaseDomainsSlice
  & IProfileSlice
  & IExportSlice
  & IEntitiesSlice;

// Convert the set method into an Immer proxy
// @ts-ignore
export const immer = config => (set, get, api) => config((partial, replace) => {
  console.log(51, "partial", partial)
  console.log(52, "replace", replace)
  const nextState = typeof partial === 'function'
    ? produce(partial)
    : partial;
  return set(nextState, replace);
}, get, api)

const useProjectStore = create<ProjectState, SetState<ProjectState>, GetState<ProjectState>, StoreApiWithSubscribeWithSelector<ProjectState>>(
  subscribeWithSelector(
    immer(
      (set: SetState<ProjectState>, get: GetState<ProjectState>) => ({
        tables: [],
        project: {},
        fetch: async () => {
          const projectId = cache.getItem(CONSTANT.PROJECT_ID);
          await request.get(`/ncnb/project/info/${projectId}`).then((res: any) => {
            console.log(45, res);
            const data = res?.data;
            if (res?.code === 200 && data) {
              set({project: data});
              get().dispatch.fixProject(data);
              // Calculate all table names
              const tables = _.flatMapDepth(data?.projectJSON?.modules, (m) => {
                console.log(130, m);
                return _.map(m.entities, 'title')
              }, 2);
              set({
                tables
              })
            } else {
              message.error('Failed to retrieve project information');
            }
          });
        },
        dispatch: {
          updateProjectName: (payload: any) => set((state: any) => {
            // @ts-ignore
            state.project.projectName = payload;
          }),
          ...ProjectJsonSlice(set, get),
          ...ConfigJsonSlice(set, get),
        }
      })
    )
  )
);

const globalState = useGlobalStore.getState();
// @ts-ignore
useProjectStore.subscribe(state => state.project, (project, previousProject) => {
  console.log(109, project);
  console.log(110, previousProject);
  globalState.dispatch.setSaved(false);
  Save.saveProject(project);
  globalState.dispatch.setSaved(true);
});

export default useProjectStore;