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.
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
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.