kendrickcheung007/plait

A completely customizable framework for building all-in-one drawing whiteboards

A modern drawing framework for building all-in-one whiteboard tools
such as mind maps, flow charts, hand writing, etc.

Plait is positioned as a drawing framework that provides a plugin mechanism, allowing developers to extend functionality through plugins. It only provides a basic drawing whiteboard at the bottom, which only includes basic functions such as zooming in, zooming out, and moving the canvas. It does not include any business functions. All business functions need to be expanded through plugins to achieve free combination and can be easily implemented independently. Or an all-in-one drawing tool.

中文文档

Plait will also provide some basic functional plugins, which have been implemented so far:

• Mind plugin

• Draw plugin

• Flow plugin

Plait architecture is inspired by the rich text editor framework Slate and is used for web-side interactive drawing business development.

• 👉 Online example (Draw)
• 👉 Online example (Mind)
• 👉 Online example (Flow)
• 👉 Documentation

Features

• Provide basic drawing board capabilities
• Plugin mechanism
• Data model (supports collaboration)
• Component-based development (currently only supports Angular framework)
• Basic drawing tool functions

Packages

Package Name	Description
@plait/core	Core of the framework: 1. Plugin mechanism 2. Provide data model and transform functions 3. Provide basic board components
@plait/common	Some logic reused by different drawing plugins: 1. Basic tool functions 2. Basic plugins 3. Basic rendering logic
@plait/text	Text support, dependent on packages slate and slate-angular
@plait/mind	Mind plugin implementation, based on an independent automatic layout algorithm, currently supports: logical layout, standard layout, indented layout
@plait/draw	Flowchart plugin implementation, including interactive creation and modification of basic graphics, standard flowchart graphics, connections, free pictures and other elements
@plait/flow	Flow plugin, which can be used for visual configuration of process status
@plait/layouts	Mind support library, including automatic layout algorithms

Who is using

• 🔥🔥🔥 PingCode Wiki

Development

npm i

npm run build

npm run start

Usage

Basic usage (integrated @plait/mind plugin)

HTML：

<plait-board [plaitPlugins]="plugins" [plaitValue]="value"
    (plaitBoardInitialized)="plaitBoardInitialized($event)" (plaitChange)="change($event)">
</plait-board>

TS：

// .ts
@Component({
  selector: 'board-basic',
  templateUrl: './board-basic.component.html',
  host: {
    class: 'board-basic-container',
  },
})
export class BasicBoardComponent {
  plugins = [withMind];

  value: PlaitElement[] = demoData;

  board!: PlaitBoard;

  change(event: PlaitBoardChangeEvent) {
    // console.log(event.children);
  }

  plaitBoardInitialized(value: PlaitBoard) {
    this.board = value;
  }
}

For more detailed examples refer to： https://github.com/pubuzhixing8/plait-basic

Thanks

• slate

• slate-angular

• rough

Contributing

Everyone is welcome to contribute to Plait and build a new generation of drawing framework together. Any Issue or PR is acceptable, and we hope to get your ⭐️ support.

LICENSE

MIT License