@ filekit-studio/ sketch

本地第一,交互式白板和建筑图解 SDK 用于 React and Next.js.

文档 二. 支助 现场播放 二. 支助 技术Stencils目录 二. 支助 文件 Kit 工作室

特征

• 本地第一隐私:零服务器呼叫,零数据库起落架,零遥测. 图表在客户端运行和持续.
• 数据库Schema & ER 建模: 键入了2列数据库表格(tableStyle: 'database')带有PK/FK图标,自动类型取色,动态行加/去除,自动拓宽文本框,并全键盘导航(Enter,Shift+Enter,后空行去除,箭头穿行). 新闻 联合国 用于激活.
• 现场动画数据流连接器:实时粒子脉冲和流模拟跨越曲线,肘,和直磁连接器,具有可配置速度,触发模式,发光颜色.
• 15°角方向抓取显示 移动 并绘制直线或箭头以锁定至15°角增量(0°水平,90°垂直,45°对角,30°/60°同位素)并有浮动度徽章.
• 箭标和调和调色板: 在多行包装下进行双击标签编辑(\n),紧凑自动尺寸,并有暗/淡模式优化的单色调色板.
• 磁连接锁定建议: 实时12点周边锚站在图和数据库表边框上悬浮,用于无功用连接器断接.
• 框架封装和反偷盗复制页:1type: 'frame'用作孤立的滑动甲板或组件边界。 变相或移动一个框架克隆, 并转移所有封闭的形状 原子.
• PNG 导出无新形: 导出带有被充气的矢量场景元数据并嵌入 PNG 内的光栅 PNG tEXt 块数( e)embedScene: true) (中文(简体) ). 重新导入 Sketch 将100%的可编辑向量恢复 .
• 反应 18 & 19 / Next.js 准备: 原生App路由器和Pages路由器支持,零 SSR水合不匹配.
• 675+ 生产Stencils:正版云标和微服务原始相(AWS,GCP,Azure,多克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克.
• 障碍- 逃避路线:Hanan Grid $A^*$正弦和弯曲箭道与Minkowski Sum障碍物通膨,角平板,高速公路道相抵.
• 演示文稿牌模式: 将帆布框转换为演示幻灯片甲板(Alt+P)带有激光指针和聚光焦点工具.
• 无头导出者: 无服务器和无头导出到矢量 PDF(多页自动插页),简洁的PNG,以及独立的SVG.
• 嵌入式查看器: 轻 <SketchViewer /> 在文档和博客中提供交互式或静态图表的组件.
• 统一 .sketch 文件格式:快速,可移植的JSON文件格式由原型-污染和XSS安全净化器保护.

安装

npm install @filekit-studio/sketch
# or
pnpm add @filekit-studio/sketch
# or
bun add @filekit-studio/sketch

同伴依赖关系

• react >= 18.0.0
• react-dom >= 18.0.0

需要的样式表导入

导入根版式中的样式表( E)app/layout.tsx 或者说 pages/_app.tsx:

// Universal modern Tailwind CSS v4 styling (Default)
import '@filekit-studio/sketch/styles.css'

// Or pick an aesthetic variant:
// import '@filekit-studio/sketch/classic.css'     // Classic clean wireframe styling
// import '@filekit-studio/sketch/neumorphic.css'  // Soft extruded 3D neumorphic styling

零 CSS 污染(高度范围隔离)数字 :
所有样式都严格限定在下面 .fk-sketch-root。导入此样式表永远不会与您的应用程序的全球 CSS 、 标记下字体或 Tailwind 配置相冲突 .

快速启动

导入 <SketchEditor /> 客户部分内('use client':

'use client'

import React from 'react'
import { SketchEditor } from '@filekit-studio/sketch'
import '@filekit-studio/sketch/styles.css'

export default function WhiteboardPage() {
  return (
    <main className="w-screen h-screen overflow-hidden">
      <SketchEditor
        boardName="System Architecture"
        storageKey="my_app_whiteboard"
        onChange={(doc) => {
          console.log('Updated:', doc.elements.length, 'elements')
        }}
        onSave={(doc) => {
          console.log('Saved:', doc)
        }}
        showGuideButton={true}
        guideHref="/docs"
      />
    </main>
  )
}

仅读图查看器( E)<SketchViewer />(中文(简体) )

使用 <SketchViewer /> 将图表嵌入文档、博客文章和零编辑器铬的仪表板中:

'use client'

import { SketchViewer } from '@filekit-studio/sketch'
import '@filekit-studio/sketch/styles.css'

export function ArchitectureDiagram({ document }) {
  return (
    <div className="w-full h-[420px] rounded-xl overflow-hidden border">
      <SketchViewer
        value={document}
        theme="system"
        autoFit={true}
        interactive={true}
        showCopyButton={true}
        showZoomControls={true}
      />
    </div>
  )
}

阻碍箭头行走

环绕图表节点的路线无相撞正交或曲线箭头:

import { computeNonCollisionRoute, generateFilletSvgPath } from '@filekit-studio/sketch'

const route = computeNonCollisionRoute(
  { x: 100, y: 150 }, // Start point
  { x: 500, y: 350 }, // End point
  'right',            // Start anchor orientation ('top' | 'right' | 'bottom' | 'left')
  'left',             // End anchor orientation
  obstacles,          // Array of { x, y, width, height }
  {
    margin: 24,       // Minkowski Sum obstacle padding
    bendPenalty: 40,  // Penalize unnecessary turns
    filletRadius: 10, // Rounded 90° arc fillets
    smoothCurves: false,
  }
)

// Generate SVG path string for rendering:
const svgPath = generateFilletSvgPath(route.waypoints, 10)

无头导出公用事业

在不挂起画布组件的情况下导出图表 @filekit-studio/sketch/export数字 :

import {
  exportToPng,
  exportToSvg,
  exportWhiteboardToPdf,
} from '@filekit-studio/sketch/export'
import { extractSceneFromPng } from '@filekit-studio/sketch'

// PNG with optional steganographic lossless scene embedding
const pngDataUrl = await exportToPng(elements, {
  scale: 2,
  backgroundColor: '#ffffff',
  embedScene: true, // Injects compressed scene into PNG tEXt chunk
})

// Extract 100% editable vector scene from a FileKit PNG
const recoveredDoc = await extractSceneFromPng(pngFileBlob)

// Vector SVG string
const svgMarkup = exportToSvg(elements, {
  includeBackground: true,
})

// Multi-page Vector PDF Blob
const pdfBlob = await exportWhiteboardToPdf(elements, {
  title: 'Architecture Specification',
  author: 'FileKit Studio',
})

数据库 Schema & ER 实体表

Render 键入了带有主键,数据类型和自动调色板同步的双列数据库表格 :

import { SketchEditor, type SketchBoardElement } from '@filekit-studio/sketch'

const usersTable: SketchBoardElement = {
  id: 'table_users',
  type: 'table',
  tableStyle: 'database', // Activates Database Entity mode
  x: 100,
  y: 100,
  width: 280,
  height: 180,
  strokeColor: '#3b82f6',
  strokeWidth: 2,
  strokeStyle: 'solid',
  fillColor: '#1e293b',
  fillStyle: 'solid',
  opacity: 1,
  zIndex: 1,
  rows: 4,
  cols: 2,
  colWidths: [150, 130],
  rowHeights: [36, 32, 32, 32],
  hasHeaderRow: true,
  cells: {
    '0,0': { text: 'users', bold: true, align: 'left' },
    '1,0': { text: 'id', align: 'left' },            // Auto-displays yellow PK key icon
    '1,1': { text: 'uuid', align: 'right' },
    '2,0': { text: 'name', align: 'left' },
    '2,1': { text: 'varchar(100)', align: 'right' },
    '3,0': { text: 'email', align: 'left' },
    '3,1': { text: 'varchar(255)', align: 'right' },
  },
}

• 单元格中的键盘导航数字 :
  • 输入: 插入干净的新行而无需移动单元格。 排高动态地扩张.
  • 移动 + 输入 或者说 标签:确认单元格编辑并跳至下行/栏.
  • 后空格 (当行为空): 删除整个空行并自动约定表格高度.
  • ↑ ↓ → ←: 导航在相邻单元格之间.
  • 快捷键: 按 联合国 以激活数据库Schema表格工具.

现场动画数据流连接器

实时模拟跨连接器的数据流:

const animatedStream: SketchBoardElement = {
  id: 'stream_1',
  type: 'arrow',
  arrowType: 'elbow',
  x: 280,
  y: 150,
  width: 140,
  height: 80,
  strokeColor: '#3b82f6',
  strokeWidth: 2,
  strokeStyle: 'solid',
  fillColor: 'transparent',
  fillStyle: 'solid',
  opacity: 1,
  zIndex: 2,
  endArrowhead: 'arrow',
  // Live Connector Simulation:
  flowAnimation: 'packet-pulse', // 'none' | 'marching-ants' | 'packet-pulse' | 'error-backoff'
  flowSpeed: 'normal',           // 'slow' (2.4s) | 'normal' (1.4s) | 'fast' (0.7s)
  flowTrigger: 'continuous',     // 'continuous' | 'hover' | 'click' | 'step'
  flowColor: '#60a5fa',          // Custom packet glow color
}

方案管理员(SketchController(中文(简体) )

附 录a controllerRef 必须控制白板画布:

import React, { useRef } from 'react'
import { SketchEditor, type SketchController } from '@filekit-studio/sketch'

export function ControlledCanvas() {
  const controllerRef = useRef<SketchController | null>(null)

  const handleAddNote = () => {
    controllerRef.current?.addElement({
      type: 'sticky',
      x: 200,
      y: 200,
      width: 180,
      height: 180,
      text: 'Production Note',
      fillColor: '#fef08a',
    })
  }

  return (
    <div className="w-full h-full relative">
      <button onClick={handleAddNote}>+ Add Note</button>
      <SketchEditor controllerRef={controllerRef} />
    </div>
  )
}

主计长方法

组成部分 API 参考

<SketchEditor />

<SketchViewer />

许可证

麻省理工学院 文件 Kit 工作室