1. Project Overview

DDei

Open-Source Graphic Designer

Build a Ready-to-Use Designer Component

DDei is a designer component developed under the Apache2.0 open-source license. It allows users to create and edit graphics through drag-and-drop operations. Developers can embed it anywhere in an application by referencing the component, enabling online drawing capabilities.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

The DDei online designer provides online graphic design tools and extension APIs. Users can create their own pages, add multiple tabs to each page, and draw various types of diagrams within tabs using drag-and-drop operations, including UML diagrams, database design diagrams, and software architecture diagrams. It supports drawing polygons such as circles, rectangles, triangles, and parallelograms; online creation of flowcharts, mind maps, and organizational charts; multi-file and multi-tab editing; copying, pasting, copying styles, and modifying font sizes and colors. Extension APIs are provided to allow external applications to access extended functionality.

Functional characteristics

  DDei is provided as a component, offering powerful functionality and easy integration. Most features can be implemented through initialization configurations and plugin integration without complex coding. The following describes DDei's features.

Canvas Size

  Supports configuring the designer's dimensions.

Background

  Supports blank, image, solid color, and transparency settings.

Paper

  When enabled, paper is displayed on the background. Supports configuring paper sizes (such as A4, A5, or custom sizes) and orientations (landscape or portrait).

Rulers

  When enabled, rulers are displayed around the drawing area, also affecting the dimensions of the alignment grid. Supports units such as millimeters, centimeters, meters, inches, and pixels.

Alignment Guides

  When enabled, alignment guide lines are displayed during drag-and-drop operations.

Alignment Grid

  When enabled, alignment grid lines are drawn on the background to assist with alignment. Supports both dot-matrix and grid types.

Watermarks

  When enabled, a watermark is displayed above the graphics. Supports text and image watermarks, with configurable fonts, text, images, direction, color, and transparency.

Infinite Canvas

  When enabled, the canvas automatically expands when operations exceed its current dimensions. The expansion direction can be restricted to horizontal or vertical.

Permission Control

  Operation permissions can be configured. Supports global read-only settings or instance-level permissions for creating, modifying, selecting, deleting, and connecting graphics. Multi-File

  Multi-file editing can be implemented through plugin configuration.

Multi-Tab

  Multi-tab editing can be implemented through plugin configuration.

Multiple Layers

  When enabled, multiple layers can be created, switched between, locked, or deleted.

Data-Driven

  DDei uses a data-driven architecture, binding graphic rendering to JSON models. Graphic operations and model data are synchronized with each other. You can retrieve graphic JSON data through APIs or load the canvas using existing JSON data.

Plugin Mechanism   DDei provides a plugin mechanism that allows users to load or unload designer functionality through extension plugins. Custom plugins can also be used to extend personalized features and meet specific requirements.

5. Tech Stack

Architecture

Quick Start Guide

  Built with Vue3 + Vite, this guide demonstrates the complete process, from creating a project to using the DDei designer.

  If you want to integrate DDei into an existing project, you can skip directly to Part 2.

Create a project

Use Vite to create a Vue3 project and select Vue and TypeScript (optional).

npm create vite

Enter the project directory, install the initial dependencies using the command, and start the project.

cd ddei-demos
npm install
npm run dev

Port 5173 is automatically assigned when starting the project.

Open your browser to view the Vite welcome page.

https://localhost:5173