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 example (Draw)
• 👉 Online example (Mind)
• 👉 Online example (GraphViz)
• 👉 Online example (Flow)
• 👉 Documentation

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

• 🔥🔥🔥 PingCode Wiki
• 🔥🔥🔥 Drawnix

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

• 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