DiagramViewer Component

Embed interactive diagrams anywhere in your app using JSON data.

Usage

Import the DiagramViewer component and pass your diagram data as JSON.

import { DiagramViewer } from "@/modules/diagrams"
import type { DiagramData } from "@/modules/diagrams"

// Option 1: Import from JSON file
import flowData from "./my-diagram.json"

// Option 2: Define inline
const data: DiagramData = {
  version: 1,
  canvas: { panX: 0, panY: 0, zoom: 1 },
  elements: [...]
}

// Use in your component
<DiagramViewer data={flowData} height={400} />

Example 1: Inline Data

Define your diagram data directly in the component file. Best for simple, static diagrams.

Example 2: Imported JSON File

Import diagram data from a JSON file. Best for complex diagrams that you want to manage separately. This example loads from auth-flow.json in the same folder.

Props

Tips

• Use the DIAGRAM-PROMPT.md file in modules/diagrams/ai/ to generate JSON with AI
• Store diagram JSON files alongside your page files for easy management
• Set interactive=false for static displays (no user interaction)
• Use fitView=true (default) to auto-fit content on load