JSON Canvas Viewer
一个前端库，提供可扩展的 JSON Canvas 查看器，能够轻松集成到任何现有框架和范式中。
演示
Interface
Logic
Work: Constructs interactive canvas elements and manages element interactions and rendering.
Interface
Logic
Work: Uses Pointeract to listen to interactions on the viewer and translate to DataManager method calls.
Interface
Logic
Work: Renders all groups, edges and labels that doesn't need interactivity.
Interface
Logic
Work: Initializes the canvas, manages states, and provides canvas control mathods.
Main Interface
Main Logic
Work: Controls lazy loading, provides start and dispose hooks, and manages modules.
Interface
Logic
Logic
Work: Controls main render loop and handles viewer resize
Interface
Logic
Work: Generates applies and caches color palette. Controls viewer theme toggling.
Interface
Central Type Machine
All Available Options and Main Class Augmentations
Received Options and Augmentations
Coordinator
- Start/dispose hooks
- DI container
Learn More
上方展示 JSON Canvas Viewer 架构的插图即为该查看器自身的实例，已加载 Minimap、Controls 和 MistouchPreventer 模块。
简介
Obsidian 提供了一款名为 JSON Canvas 的强大工具，它使我能够以非线性方式思考，非常适合用于复杂状态机或依赖关系图等场景。虽然它在个人使用上已足够，但很难与他人分享，因为目前尚无成熟的方法可在 Obsidian 外部查看这些内容。
JSON Canvas Viewer 正是为解决此问题而生。它是一个基于 TypeScript 的 JSON Canvas 文件查看器，使用户可以直接在浏览器中查看和交互画布，或轻松将查看器嵌入网站。它不依赖任何特定框架构建，因此可轻易集成至任意框架中。
特性
- 在网页浏览器中查看 JSON Canvas 文件（
.canvas） - 可轻松嵌入网站
- 支持交互式的平移与缩放功能
- 能够完整显示 官方规范 中定义的所有画布特性
- 响应式设计，适配移动端与触控板操作
- 支持懒加载
- 原生支持 TypeScript
- 具备现代美学设计，支持亮色与暗色模式
- 提供专为快速试用设计的 chimp 版本
- 🔥 性能优于在 Obsidian 中渲染画布！
- 🧩 由 SynthKernel 架构驱动的开箱即用式可扩展性与摇树优化，当前可选模块包括：
Minimap：便于导航Controls：显示缩放及全屏按钮MistouchPreventer：防止画布干扰页面滚动DebugPanel：显示缩放比例与位置数据
集成
JSON Canvas Viewer 目前可无缝集成以下技术栈 / 技术（包括但不限于）：
- ✅ 原生 JS/TS: 原生支持 -
json-canvas-viewer - ✅ 预渲染:
renderToString-json-canvas-viewer - ✅ Vite: Vite 插件 -
vite-plugin-json-canvas - ✅ Vue: Vue 组件 -
@json-canvas-viewer/vue - ✅ React: React 组件 -
@json-canvas-viewer/react - ✅ Preact: Preact 组件 -
@json-canvas-viewer/preact
了解更多关于 JSON Canvas Viewer 的信息，请访问 GitHub 仓库。
许可证
JSON Canvas Viewer 采用 MIT 许可证 授权。