Export

yh-flow provides comprehensive export functionality, supporting the export of flowcharts to JSON, PNG, SVG and other formats.

Exporting JSON

Basic Usage

const flowRef = ref<FlowInstance>()

// Export as JSON string
const json = flowRef.value.exportJson()
console.log(json)

Custom Export Data

Use exportFlowData to export complete data including viewport information:

import { exportFlowData } from '@yh-ui/flow'

const data = exportFlowData(nodes.value, edges.value, { x: 0, y: 0, zoom: 1 })
console.log(data) // JSON string

Exporting Images

Export as PNG

const flowRef = ref<FlowInstance>()

// Export as PNG
await flowRef.value.exportImage?.({
  imageType: 'png',
  fileName: 'flow-chart',
  download: true
})

Export as JPEG

await flowRef.value.exportImage?.({
  imageType: 'jpeg',
  imageQuality: 0.9,
  fileName: 'flow-chart',
  download: true
})

Export as SVG

SVG export allows exporting the flowchart as vector graphics:

// Get SVG string
const svgString = await captureFlowAsSvg(flowRef.value.$el)

// Or use plugin method
await flowRef.value.exportImage?.({
  // Future version support
})

Export Options

ScreenshotOptions

Option	Type	Default	Description
mode	'viewport' | 'full'	'viewport'	Export scope
imageType	'png' | 'jpeg' | 'webp'	'png'	Image format
imageQuality	number	1	Image quality (0-1)
pixelRatio	number	2	Device pixel ratio
backgroundColor	string	'#ffffff'	Background color
fileName	string	'flow-chart'	File name
download	boolean	true	Trigger download
copyToClipboard	boolean	false	Copy to clipboard
fullModePadding	number	20	Full mode padding

Export Modes

Mode	Description
viewport	Only export current visible area
full	Export complete flowchart (adjusts viewport automatically)

Complete Example

Start

Process

End

Export Toolbar Demo

Importing Data

Importing Data

Import from JSON

import { importFlowData } from '@yh-ui/flow'

const loadFromJson = (json: string) => {
  const data = importFlowData(json)
  if (data) {
    nodes.value = data.nodes
    edges.value = data.edges as unknown as Edge[]
    if (data.viewport) {
      viewport.value = data.viewport
    }
  }
}

Best Practices

1. Maintain data persistence: Regularly export JSON as backup for data recovery
2. Quality settings: Choose appropriate image quality and format based on use case
3. User feedback: Export operations may take time, consider adding loading state
4. Clipboard functionality: Use copyToClipboard in supported environments for better UX

TIP

Using mode: 'full' exports the complete flowchart even if the current viewport only shows partial content.