feat: add code-drawing node

[electroluxcode]

Checklist

• yarn typecheck
• yarn lint:fix
• yarn test
• yarn brl
• yarn changeset
• ui changelog

Design

Refer to the text drawing nodes in Feishu documents, but they include more library renderings than those.such as PlantUML , Graphviz, and Flowchart

Core Features

1. Multiple Drawing Types: Supports four diagram types
   • Mermaid: Flowcharts, sequence diagrams, Gantt charts, and more
   • PlantUML: UML diagrams, sequence diagrams, and other structured diagrams
   • Graphviz: Graph visualization using DOT language
   • Flowchart: Flowchart diagrams
2. Inline Editing Experience: Code editing area and preview area are displayed side-by-side (horizontal layout on desktop, vertical on mobile), allowing real-time preview without popups or dialogs
3. Multiple View Modes: Supports three view mode switches for flexible display
   • Both: Display both code editor and preview simultaneously
   • Code: Display only the code editor
   • Image: Display only the rendered diagram result
4. Real-time Preview: Uses debouncing (500ms) to optimize rendering performance and avoid frequent API requests
5. Unified Data Structure: Stores drawingType, drawingMode, and code uniformly in element.data for consistent data management

ui

data example

{
    "children": [
        {
            "text": ""
        }
    ],
    data:{
        "drawingMode": "Both",
        "drawingType": "Mermaid",
        "code": `classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
        -int sizeInFeet
        -canEat()
      }
      class Zebra{
        +bool is_wild
        +run()
      } 
      `
      },
      "type": "code_drawing",
      
  },  

Reference

The design is primarily inspired by Feishu (Lark) Document's text drawing component:

• Inline editing without popups
• Code and preview displayed side-by-side
• Support for switching between multiple diagram types
• Real-time preview updates

Technical Implementation

• Uses lodash/debounce for debounced rendering
• Reuses code-block's pre + code wrapper structure to maintain visual consistency with code editors
• Toolbar appears on hover to reduce UI clutter
• Supports SSR with static rendering component to avoid hydration mismatches

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 7dca8db

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@platejs/code-drawing	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
plate	Ignored	Preview	Jan 28, 2026 0:16am

[zbeyens]

Awesome PR! Left a few comments.

[felixfeng33]

Nice working!

[zbeyens]

Thanks for the update! Left my last comments