@ filekit- studio/ diagram (英语)

声明式图表- as- Code & JSON 图形编译器 @filekit-studio/sketch。 。 。 .

文档 二. 支助 快速启动指南 二. 支助 现场播放

@filekit-studio/diagram 让您直接从React 和 Next.js 中的 JSON 或 Diagram-as-Code 中生成和渲染出美丽的手绘白板、建筑图和流程图.

• 需要零坐标:提供节点,边缘,和集群——决定式DAG布局引擎位置并自动对齐一切.
• 纹理美学: 电源 @filekit-studio/sketch,使有机的手拉式形状,粗糙的填充,以及磁接头箭头.
• 寻找出行障碍和走廊:正弦肘行会自动在外形上绕行而无需通过中间服务.
• 潜入隧道:被曲折的行会自动变成形状下有细微破碎的X射线路径.
• 方向流动: 支持从左到右 ()LR),从上到下(TB页:1RL),和从下到下BT) (中文(简体) ).
• 解析原生: 从 .excalidraw schema文件和元素阵列.
• 100% 客户端:零服务器呼叫,零跟踪,工作全部下线.

安装

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

需要的样式表导入

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

import '@filekit-studio/diagram/styles.css'
// or: import '@filekit-studio/sketch/styles.css'

零 CSS 漏报: 所有样式都严格限定在下面 .fk-sketch-root。导入此样式表永远不会与您的应用程序的全球 CSS 、 字体或 Tailwind 配置相冲突 .

快速启动

1. 声明 <Diagram /> 构成部分

'use client'

import React from 'react'
import { Diagram, type DiagramData } from '@filekit-studio/diagram'
import '@filekit-studio/diagram/styles.css'

const architecture: DiagramData = {
  title: 'Cloud Payment Pipeline',
  direction: 'LR',
  nodes: [
    {
      id: 'client',
      label: 'Client Browser\n(React / Next.js)',
      shape: 'rectangle',
      color: 'indigo',
      badge: 'FRONTEND',
    },
    {
      id: 'gateway',
      label: 'API Gateway',
      description: 'Kong / Cloudflare',
      shape: 'rounded',
      color: 'blue',
    },
    {
      id: 'auth',
      label: 'Auth Service',
      description: 'JWT / OAuth2',
      shape: 'diamond',
      color: 'amber',
    },
    {
      id: 'db',
      label: 'Primary Database\n(PostgreSQL)',
      shape: 'cylinder',
      color: 'emerald',
      badge: 'STORAGE',
    },
  ],
  edges: [
    { from: 'client', to: 'gateway', label: 'HTTPS POST' },
    { from: 'gateway', to: 'auth', label: 'Verify Token' },
    { from: 'auth', to: 'db', label: 'SQL Query' },
  ],
  groups: [
    {
      id: 'backend',
      label: 'Internal VPC Cluster',
      nodeIds: ['gateway', 'auth', 'db'],
      color: 'indigo',
    },
  ],
}

export default function ArchitectureDoc() {
  return (
    <div className="w-full h-[500px] rounded-xl overflow-hidden border">
      {/* Automatically inherits dark/light mode and sets contrast */}
      <Diagram
        data={architecture}
        mode="viewer"
        autoFit={true}
        showCopyButton={true}
        copyFormat="elements" // 'elements' for 1-click Ctrl+V paste into Whiteboard, 'image' for PNG, or 'json'
        showZoomControls={true}
      />
    </div>
  )
}

2. 方案汇编diagramToSketch(中文(简体) )

如果您想要将图表 JSON 编译为 SketchDocument 以保存、变异或导出 :

import { diagramToSketch } from '@filekit-studio/diagram'

const sketchDoc = diagramToSketch(architecture, {
  direction: 'LR',
  nodeSpacing: 80,
  rankSpacing: 220,
})

console.log(sketchDoc.elements) // Array of SketchBoardElement objects

3. 渲染 Excalidraw JSON 文件

import { Diagram } from '@filekit-studio/diagram'
import excalidrawFile from './diagram.excalidraw.json'

export function ExcalidrawViewer() {
  return (
    <div className="w-full h-[600px]">
      <Diagram data={excalidrawFile} mode="viewer" autoFit={true} />
    </div>
  )
}

<Diagram /> 推荐参考

许可证

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