4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1e0f,--- title: Code Drawing docs: - route: /docs/components/code-drawing-node title: Code Drawing Node --- ## 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 ## Kit Usage ### Installation The fastest way to add code drawing functionality is with the `CodeDrawingKit`, which includes the pre-configured `CodeDrawingPlugin` with its [Plate UI](/docs/installation/plate-ui) components. - [`CodeDrawingElement`](/docs/components/code-drawing-node): Renders code drawing elements with inline editing and preview. ### Add Kit Add the kit to your plugins: ```tsx import { createPlateEditor } from 'platejs/react'; import { CodeDrawingKit } from '@/components/editor/plugins/code-drawing-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...CodeDrawingKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/code-drawing ``` ### Add Plugin Include `CodeDrawingPlugin` in your Plate plugins array when creating the editor. ```tsx import { CodeDrawingPlugin } from '@platejs/code-drawing/react'; import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, CodeDrawingPlugin, ], }); ``` ### Configure Plugin Configure the code drawing plugin with custom components. ```tsx import { CodeDrawingPlugin } from '@platejs/code-drawing/react'; import { createPlateEditor } from 'platejs/react'; import { CodeDrawingElement } from '@/components/ui/code-drawing-node'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, CodeDrawingPlugin.withComponent(CodeDrawingElement), ], }); ``` - `withComponent`: Assigns [`CodeDrawingElement`](/docs/components/code-drawing-node) to render code drawing elements. ### Add Toolbar Button You can add a toolbar button to insert code drawing elements. Add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button): ```tsx { icon: , label: 'Code Drawing', value: KEYS.codeDrawing, } ``` ## Plugins ### CodeDrawingPlugin Plugin for rendering code drawings (PlantUml, Graphviz, Flowchart, Mermaid) with inline editing and preview capabilities. ## API ### editor.tf.insert.codeDrawing Inserts a code drawing element at the current selection. Props for the code drawing element. The data for the code drawing element. The type of diagram to render. - **Default:** `'Mermaid'` - **Options:** `'PlantUml'`, `'Graphviz'`, `'Flowchart'`, `'Mermaid'` The view mode for the code drawing. - **Default:** `'Both'` - **Options:** `'Both'`, `'Code'`, `'Image'` The code content for the diagram. - **Default:** `''` The options for inserting the code drawing node. ## Transforms ### `tf.insert.codeDrawing` Inserts a code drawing element at the current selection. Props for the code drawing element. The options for inserting the code drawing node. ## Hooks ### `useCodeDrawingElement` A hook for a code drawing element that handles rendering and state management. The code drawing element. Whether the diagram is currently being rendered. The error message if rendering failed, or `null` if there's no error. The rendered image data URL. Function to update the code drawing element's data. Function to remove the code drawing element. ## Types ### `TCodeDrawingElement` The code drawing element type. The element type. Always `KEYS.codeDrawing`. The data for the code drawing element. ### `CodeDrawingData` The data structure for code drawing elements. The type of diagram to render. - **Options:** `'PlantUml'`, `'Graphviz'`, `'Flowchart'`, `'Mermaid'` The view mode for the code drawing. - **Options:** `'Both'`, `'Code'`, `'Image'` The code content for the diagram. ### `CodeDrawingType` The type of diagram supported. The diagram type. ### `ViewMode` The view mode for code drawing elements. The view mode. - `'Both'`: Shows both code editor and preview side by side (horizontal on desktop, vertical on mobile with preview on top) - `'Code'`: Shows only the code editor - `'Image'`: Shows only the rendered preview ## Utilities ### `renderCodeDrawing` Renders a diagram from code based on the drawing type. The type of diagram to render. The code content for the diagram. A promise that resolves to the rendered image data URL. ### `downloadImage` Downloads an image from a data URL. The image data URL to download. The filename for the downloaded image. - **Default:** `'code-drawing.png'` 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(elements)/code-drawing.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(elements)/code-drawing.mdx"}],"className":"h-[70svh] min-h-80"}]]}]