Features
- Support for multiple diagram types: PlantUml, Graphviz, Flowchart, and Mermaid
- Inline code editing with code-block-like styling
- Real-time preview with debounced rendering (500ms)
- Multiple view modes: Both (code and preview), Code only, Image only
- Responsive layout: horizontal on desktop (code left, preview right), vertical on mobile (preview top, code bottom)
- Border separator between code editor and preview in Both mode
- Toolbar controls: language selector and view mode selector (always visible on mobile, hover to show on desktop)
- Download rendered diagrams as images
- Floating toolbar with delete and download actions
Usage
Installation
The fastest way to add code drawing functionality is with the CodeDrawingKit, which includes the pre-configured CodeDrawingPlugin with its Plate UI components.
CodeDrawingElement: Renders code drawing elements with inline editing and preview.
Add Kit
Add the kit to your plugins:
import { createPlateEditor } from "platejs/react";
import { CodeDrawingKit } from "@/components/editor/plugins/code-drawing-kit";
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...CodeDrawingKit,
],
});
