Code Drawing

Code Drawing Node
Loading...
Files
components/code-drawing-demo.tsx
'use client';

import * as React from 'react';

import { CodeDrawingPlugin } from '@platejs/code-drawing/react';
import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { codeDrawingValue } from '@/registry/examples/values/code-drawing-value';
import { Editor, EditorContainer } from '@/components/ui/editor';
import { CodeDrawingElement } from '@/components/ui/code-drawing-node';

export default function CodeDrawingDemo() {
  const editor = usePlateEditor({
    plugins: [...EditorKit, CodeDrawingPlugin.withComponent(CodeDrawingElement)],
    value: codeDrawingValue,
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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

'use client';
 
import { CodeDrawingPlugin } from '@platejs/code-drawing/react';
 
import { CodeDrawingElement } from '@/components/ui/code-drawing-node';
 
export const CodeDrawingKit = [
  CodeDrawingPlugin.withComponent(CodeDrawingElement),
];

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,
  ],
});

Manual Usage

Installation

pnpm add @platejs/code-drawing

Add Plugin

Include CodeDrawingPlugin in your Plate plugins array when creating the editor.

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.

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),
  ],
});

Add Toolbar Button

You can add a toolbar button to insert code drawing elements. Add this item to the Insert Toolbar Button:

{
  icon: <Code2Icon />,
  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.

Parameters

    Props for the code drawing element.

    The options for inserting the code drawing node.

Transforms

tf.insert.codeDrawing

Inserts a code drawing element at the current selection.

Parameters

    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.

Parameters

    The code drawing element.

Returns

    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.

Attributes

    The element type. Always KEYS.codeDrawing.

    The data for the code drawing element.

CodeDrawingData

The data structure for code drawing elements.

Attributes

    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.

Returns

    The diagram type.

ViewMode

The view mode for code drawing elements.

Returns

    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.

Parameters

    The type of diagram to render.

    The code content for the diagram.

Returns

    A promise that resolves to the rendered image data URL.

downloadImage

Downloads an image from a data URL.

Parameters

    The image data URL to download.

    The filename for the downloaded image.

    • Default: 'code-drawing.png'