@flyteng/jsondataview

将任意 JSON 展开为可交互图结构的嵌入式可视化 SDK（React Flow + Graphviz WASM）。

安装

npm install @flyteng/jsondataview

Peer Dependencies

宿主需自行安装：

• react ^18
• react-dom ^18
• reactflow ^11
• antd ^5
• styled-components ^6

快速开始

<div id="jsonview_container" style="width:100%;height:600px;"></div>

import JsonCore from '@flyteng/jsondataview'

const view = new JsonCore({
  containerId: 'jsonview_container',
  defaultTheme: 'light',
  data: {
    name: 'demo',
    items: [{ id: 1 }, { id: 2 }],
  },
  onNodeClick: (node) => console.log(node),
  onError: (err) => console.error(err),
})

// 后续更新数据
await view.setData({ hello: ['world'] })
view.centerView()
view.setTheme('dark')

构造参数 (IJsonCoreOptions)

| 字段 | 类型 | 说明 | |------|------|------| | containerId | string | 挂载 DOM id（必填） | | data | unknown | 初始 JSON | | defaultTheme | 'light' \| 'dark' | 默认主题 | | drawerWidth / dawerWidth | number | 详情抽屉宽度，默认 360（后者为兼容拼写） | | menuList | INodeMenuItem[] | 自定义节点菜单 | | layoutOptions | Partial<ILayoutOptions> | Graphviz 布局参数 | | onMounted | (instance) => void | 画布就绪 | | onNodeClick / onEdgeClick | 回调 | 节点/边点击；未传 onNodeClick 时，点击节点会打开详情抽屉展示节点 JSON | | onDrawerClose | () => void | 详情抽屉关闭时回调 | | onThemeChange | (theme) => void | 主题切换 | | onError | (error: Error) => void | 布局/数据错误 | | 其他 on* | 可选 | 与历史 API 兼容 |

实例方法

| 方法 | 说明 | |------|------| | setData(data) | 设置 JSON 并重新布局（Promise） | | getData() | 获取当前 ReactFlow nodes | | getInstance() | 获取命令式 instance | | formatView() | 格式化视图 | | centerView() | 适应画布 | | setCenterByNode() | 定位到默认中心 | | setTheme('light'\|'dark') | 切换主题 | | openLoading() / closeLoading() | Loading | | destroy() | 卸载（新增） |

扩展

• 自定义节点类型：import { registerNodeType } from '@flyteng/jsondataview'
• 布局参数：通过 layoutOptions 覆盖 rankdir / scale / ranksep 等（默认行为与历史版本一致）

开发

npm start          # Demo
npm test           # 单测
npm run build-sdk  # 产出 dist/

目录结构（源码）

src/
  api/         # 公开类型
  core/        # FlowCanvas / helpers
  layout/      # LayoutEngine（Graphviz WASM）
  transform/   # jsonToGraph
  nodes/       # 节点组件 + 注册表
  ui/          # 工具栏 / Loading / 菜单
  theme/       # 主题 token
  utils/       # 纯函数工具