Sharing & Exporting Diagrams

ArchFlow provides several built-in mechanisms to export, backup, and share your architecture diagrams.

1. Exporting as Image (.png)

Generate a high-resolution, static snapshot of your diagram:

• How it works: Click on the Export options button (upload icon) in the top-right bar and select Export as Image (.png).
• Automatic Sizing: ArchFlow automatically scans all nodes to compute the bounding box. It adds a standard padding margin (+100px), scales the transform matrix to 1:1, and generates a cropped snapshot containing the entire diagram.
• Theme matching: The output image background is colored slate dark (#1e2030) if you are currently in Dark Mode, or slate light (#f8fafc) if you are in Light Mode.

2. Exporting as Animated GIF (.gif)

Capture live flow animations for documents or presentation slides:

• How it works: Select Export as Gif (.gif) from the export dropdown menu in the top bar.
• Recording Process: ArchFlow will initiate a 2-second capture pipeline:
  1. It automatically pauses default CSS transitions.
  2. It captures a series of 20 frames (stepping the connector stroke dash offsets by -3px per frame to simulate seamless motion).
  3. A progress wheel is shown on-screen during recording and compilation.
  4. The frames are compiled using the gifshot encoder into a looping, high-performance GIF file.
  5. Live CSS transitions resume automatically once the download starts.

3. Exporting as DevScribe Document Schema (.ds)

Backup your raw diagram data schema for sharing across files or different DevScribe workspaces:

• How it works: Select Devscribe (.ds) from the export dropdown menu.
• Data Content: This downloads a raw JSON payload containing the complete nodes array, connection edges array, viewport scales, and document version metadata.
• Backup: Keep this file as a backup. You can copy the contents of this file to restore state or import layouts directly into other plugins.