feat: export canvas as PNG or SVG image

src/Drawd.jsx

@@ -355,8 +355,8 @@ export default function Drawd({ initialRoomCode }) {
     });
 
   // ── Import / export ────────────────────────────────────────────────────────────────
-  const { importConfirm, setImportConfirm, importFileRef, onExport, onExportPrototype, onImport, onImportFileChange, onImportReplace, onImportMerge } =
-    useImportExport({ screens, connections, documents, dataModels, stickyNotes, screenGroups, comments, pan, zoom, featureBrief, taskLink, techStack, replaceAll, mergeAll, setPan, setZoom, setStickyNotes, setScreenGroups, setComments, scopeScreenIds, connectedFileName });
+  const { importConfirm, setImportConfirm, importFileRef, onExport, onExportPrototype, onExportPng, onExportSvg, onImport, onImportFileChange, onImportReplace, onImportMerge } =
+    useImportExport({ screens, connections, documents, dataModels, stickyNotes, screenGroups, comments, pan, zoom, featureBrief, taskLink, techStack, replaceAll, mergeAll, setPan, setZoom, setStickyNotes, setScreenGroups, setComments, scopeScreenIds, connectedFileName, canvasSelection });
 
   // ── Toast notification ─────────────────────────────────────────────────────────────
   const [toast, setToast] = useState(null);
@@ -506,6 +506,8 @@ export default function Drawd({ initialRoomCode }) {
         dataModelCount={dataModels.length}
         onExport={onExport}
         onExportPrototype={onExportPrototype}
+        onExportPng={onExportPng}
+        onExportSvg={onExportSvg}
         onImport={onImport}
         onGenerate={onGenerate}
         onDocuments={() => setShowDocuments(true)}

src/components/TopBar.jsx

@@ -102,7 +102,7 @@ function ShareIcon() {
   );
 }
 
-export function TopBar({ screenCount, connectionCount, onExport, onExportPrototype, onImport, onGenerate, canUndo, canRedo, onUndo, onRedo, connectedFileName, saveStatus, isFileSystemSupported, onNew, onOpen, onSaveAs, onDocuments, documentCount = 0, onDataModels, dataModelCount = 0, collabState, onShare, collabBadge, collabPresence, onToggleParticipants, showParticipants, onTemplates, onCompareFlows, onToggleComments, showComments, unresolvedCommentCount = 0, canComment }) {
+export function TopBar({ screenCount, connectionCount, onExport, onExportPrototype, onExportPng, onExportSvg, onImport, onGenerate, canUndo, canRedo, onUndo, onRedo, connectedFileName, saveStatus, isFileSystemSupported, onNew, onOpen, onSaveAs, onDocuments, documentCount = 0, onDataModels, dataModelCount = 0, collabState, onShare, collabBadge, collabPresence, onToggleParticipants, showParticipants, onTemplates, onCompareFlows, onToggleComments, showComments, unresolvedCommentCount = 0, canComment }) {
   const [fileMenuOpen, setFileMenuOpen] = useState(false);
   const fileMenuRef = useRef(null);
 
@@ -440,6 +440,26 @@ export function TopBar({ screenCount, connectionCount, onExport, onExportPrototy
                 <span>Export Prototype</span>
               </button>
 
+              <button
+                className="ff-menu-item"
+                onClick={() => { if (screenCount > 0) { setFileMenuOpen(false); onExportPng?.(); } }}
+                disabled={screenCount === 0}
+                style={menuItemStyle(screenCount === 0)}
+                title="Export the canvas (or selected items) as a high-resolution PNG image"
+              >
+                <span>Export as PNG</span>
+              </button>
+
+              <button
+                className="ff-menu-item"
+                onClick={() => { if (screenCount > 0) { setFileMenuOpen(false); onExportSvg?.(); } }}
+                disabled={screenCount === 0}
+                style={menuItemStyle(screenCount === 0)}
+                title="Export the canvas (or selected items) as a scalable SVG image"
+              >
+                <span>Export as SVG</span>
+              </button>
+
               {isFileSystemSupported && (
                 <>
                   <div style={{ height: 1, background: COLORS.border, margin: "6px 0" }} />

src/hooks/useImportExport.js

@@ -3,6 +3,7 @@ import { exportFlow } from "../utils/exportFlow";
 import { importFlow } from "../utils/importFlow";
 import { mergeFlow } from "../utils/mergeFlow";
 import { generatePrototype, downloadPrototype } from "../utils/generatePrototype";
+import { exportCanvasAsPng, exportCanvasAsSvg } from "../utils/exportCanvasImage";
 
 export function useImportExport({
   screens,
@@ -26,6 +27,7 @@ export function useImportExport({
   setComments,
   scopeScreenIds,
   connectedFileName,
+  canvasSelection,
 }) {
   const [importConfirm, setImportConfirm] = useState(null);
   const importFileRef = useRef(null);
@@ -90,11 +92,41 @@ export function useImportExport({
     downloadPrototype(html);
   }, [screens, connections, scopeScreenIds, connectedFileName]);
 
+  const buildImageExportOpts = useCallback(() => ({
+    screens,
+    connections,
+    stickyNotes: stickyNotes || [],
+    screenGroups: screenGroups || [],
+    selection: canvasSelection || [],
+    scopeScreenIds,
+    filename: connectedFileName ? connectedFileName.replace(/\.drawd(\.json)?$/i, "") : undefined,
+  }), [screens, connections, stickyNotes, screenGroups, canvasSelection, scopeScreenIds, connectedFileName]);
+
+  const onExportPng = useCallback(async () => {
+    if (screens.length === 0 && (stickyNotes?.length || 0) === 0) return;
+    try {
+      await exportCanvasAsPng(buildImageExportOpts());
+    } catch (err) {
+      alert("PNG export failed: " + err.message);
+    }
+  }, [screens.length, stickyNotes?.length, buildImageExportOpts]);
+
+  const onExportSvg = useCallback(async () => {
+    if (screens.length === 0 && (stickyNotes?.length || 0) === 0) return;
+    try {
+      await exportCanvasAsSvg(buildImageExportOpts());
+    } catch (err) {
+      alert("SVG export failed: " + err.message);
+    }
+  }, [screens.length, stickyNotes?.length, buildImageExportOpts]);
+
   return {
     importConfirm, setImportConfirm,
     importFileRef,
     onExport,
     onExportPrototype,
+    onExportPng,
+    onExportSvg,
     onImport,
     onImportFileChange,
     onImportReplace,

src/pages/docs/userGuide.md

@@ -505,6 +505,45 @@ If a scope root is active (you are viewing a sub-flow), only the screens in that
 > [!TIP]
 > The exported file is entirely self-contained — share it via email, Slack, or any file host. Recipients just open it in a browser to tap through the flow.
 
+## Exporting Canvas Images (PNG / SVG)
+
+Export the visual canvas as a flat image to embed in design docs, Notion pages, Slack threads, JIRA tickets, or PR descriptions.
+
+### How to export
+
+- Open the **File** menu in the top bar and click **Export as PNG** or **Export as SVG**
+- A timestamped image file downloads immediately — no extra dialog
+
+### What gets included
+
+- All screen cards (header bar with name + image content) at their canvas positions
+- Connection bezier curves with arrowheads, color-coded by path (default / api-success / api-error / conditional)
+- Connection labels and conditional branch labels
+- Sticky notes with their content and color
+- Screen-group rectangles (dashed outline + label)
+- Hotspots are drawn as subtle dashed overlays so reviewers can see tap targets
+
+### What gets excluded (by design)
+
+- Editor chrome: top bar, side panels, toolbar, selection handles, hover effects, comment pins, remote cursors
+- Canvas grid dots — the export uses a clean dark background
+
+### Choosing what to export
+
+The exporter picks one of three scopes, in priority order:
+
+1. **Multi-selected items** — if you have screens or sticky notes selected (rubber-band or `Shift+click`), only those are exported. Connections between selected screens are included; connections to non-selected screens are dropped.
+2. **Scope root** — if a scope root is active (you are viewing a sub-flow), only the in-scope screens and their connections are exported.
+3. **Everything** — if nothing is selected and no scope is active, the entire canvas is exported.
+
+### PNG vs SVG
+
+- **PNG** — Raster image at 2x pixel ratio (Retina-quality). Best for chat apps, screenshots, and tickets where you want a fixed image. Very large flows are auto-capped at the browser's canvas-size limit (~16384px) so they render reliably.
+- **SVG** — Scalable vector with screens embedded as data URLs. Best for design tools (Figma, Illustrator), zooming without quality loss, and editing labels after export.
+
+> [!NOTE]
+> SVG files are self-contained — screen images are embedded as data URLs, so the SVG renders correctly on its own with no external dependencies.
+
 ## Keyboard Shortcuts
 
 Press `?` anywhere on the canvas to open the full keyboard shortcuts panel. The shortcuts below are organized by category.