/plait

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

Primary LanguageTypeScriptMIT LicenseMIT

Plait logo and name

Total Downloads

A modern drawing framework for building an all-in-one whiteboard tool
for interactive drawing features such as mind maps, flowcharts, and freehand drawing.

Plait is a modern drawing framework that provides a plugin mechanism, allowing developers to extend drawing functionalities through plugins. It is particularly suitable for the development of interactive whiteboard tools.

Plait does not rely on any frontend UI framework at its core, but it provides solutions for integrating with mainstream frontend UI frameworks to ensure a good development experience for upper-layer developers and to reuse mainstream framework components.

中文文档

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

  • Mind plugin

  • Draw plugin

  • GraphViz plugin

  • Flow plugin

online demo screen

Features

  • Independent of UI frameworks
  • Provides basic board capabilities, such as zooming in, zooming out, and moving
  • Plugin mechanism
  • Data model (supports collaboration)
  • Basic drawing utility functions

UI Framework Integration

The implementation of the framework requires components from frontend UI frameworks as carriers. This ensures that the development of drawing functionalities follows mainstream development patterns (data-driven). Currently, integration with Angular and React frameworks is supported.

Text rendering in the plait is based on the Slate framework, enabling rich text rendering and editing on the board. Slate is an excellent rich text editor framework, and Plait was inspired by the Slate framework in its design

Packages

Package Name Description
@plait/core Framework core: plugin mechanism design, providing data models, data transformation functions, zooming, scrolling, etc
@plait/common Common functionalities for interactive drawing, text rendering, and editing
@plait/text-plugins General text extension functionalities, UI framework-independent, relies on the Slate rich text editor framework
@plait/mind Mind map plugin, based on an independent automatic layout algorithm, supports: logical layout, standard layout, indent layout
@plait/draw Flowchart plugin, supports: basic shapes, flowchart shapes, connections, free images, etc
@plait/flow Process orchestration plugin, supports: standard nodes, connections, custom nodes, and connections
@plait/graph-viz graph visualization,supports: force atlas(Knowledge graph)
@plait/layouts Mind map layout algorithms
@plait/angular-text Text rendering component, relies on the Angular framework, Slate rich text editor framework, Angular view layer
@plait/angular-board Whiteboard view layer component, relies on the Angular framework
@plait/react-text Text rendering component, relies on the React framework, Slate rich text editor framework, React view layer
@plait/react-board Whiteboard view layer component, relies on the React framework

React view layer, text rendering component:https://github.com/plait-board/drawnix

Who is using

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)" (onChange)="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: OnChangeData) {
    // 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.

LICENSE

MIT License