FlowGram.AI
  • English

      • @flowgram.ai/export-plugin

      npm
      npm install @flowgram.ai/export-plugin

      The export plugin provides functionality to export workflows as images (PNG, JPEG, SVG) or data files (JSON, YAML).

      Quick Start

      1. Install
      npm
      yarn
      pnpm
      bun
      deno
      npm install @flowgram.ai/export-plugin
      1. Register the plugin
      import { createDownloadPlugin } from '@flowgram.ai/export-plugin';

const editorProps = useMemo(() => ({
  plugins: () => [createDownloadPlugin({})]
}), []);

return (
  <FreeLayoutEditorProvider {...editorProps}>
    <EditorRenderer />
  </FreeLayoutEditorProvider>
)

      Options

      createDownloadPlugin({
  // Custom export filename
  // Default: `flowgram-${nanoid(5)}.${format}`
  getFilename: (format) => `my-workflow.${format}`,

  // Watermark SVG for exported images
  // The watermark will be displayed at the bottom-right corner
  watermarkSVG: '<svg>...</svg>',
})

      Supported Export Formats

      import { FlowDownloadFormat } from '@flowgram.ai/export-plugin'

// Image formats
FlowDownloadFormat.PNG   // PNG image
FlowDownloadFormat.JPEG  // JPEG image
FlowDownloadFormat.SVG   // SVG vector image

// Data formats
FlowDownloadFormat.JSON  // JSON data
FlowDownloadFormat.YAML  // YAML data

      Using FlowDownloadService

      Use FlowDownloadService in your components to trigger exports:

      import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService, FlowDownloadFormat } from '@flowgram.ai/export-plugin';

export const ExportButton = () => {
  const downloadService = useService(FlowDownloadService);

  const handleExportPNG = async () => {
    await downloadService.download({ format: FlowDownloadFormat.PNG });
  };

  const handleExportJSON = async () => {
    await downloadService.download({ format: FlowDownloadFormat.JSON });
  };

  return (
    <div>
      <button onClick={handleExportPNG} disabled={downloadService.downloading}>
        Export PNG
      </button>
      <button onClick={handleExportJSON} disabled={downloadService.downloading}>
        Export JSON
      </button>
    </div>
  );
};

      Listening to Download Status

      import { useEffect, useState } from 'react';
import { useService } from '@flowgram.ai/free-layout-editor';
import { FlowDownloadService } from '@flowgram.ai/export-plugin';

export const DownloadStatus = () => {
  const downloadService = useService(FlowDownloadService);
  const [downloading, setDownloading] = useState(false);

  useEffect(() => {
    const disposer = downloadService.onDownloadingChange((value) => {
      setDownloading(value);
    });
    return () => disposer.dispose();
  }, [downloadService]);

  return downloading ? <span>Exporting...</span> : null;
};

      Type Definitions

      import { FlowDownloadFormat } from '@flowgram.ai/export-plugin';

interface DownloadServiceOptions {
  // Function to customize export filename
  getFilename?: (format: FlowDownloadFormat) => string;

  // Watermark SVG string for exported images
  watermarkSVG?: string;
}

interface WorkflowDownloadParams {
  // Export format
  format: FlowDownloadFormat;
}

enum FlowDownloadFormat {
  JSON = 'json',
  YAML = 'yaml',
  PNG = 'png',
  JPEG = 'jpeg',
  SVG = 'svg',
}