Dev Graph Exports

Generate exportable assets that match the Dev Graph UI.

Quickstart

• •API-only SVG-parity timeline exports: node skills/dev-graph-exports/scripts/export_timeline_segments_svg_parity.js --api http://localhost:8080
• •Dashboard JSON export: python skills/dev-graph-exports/scripts/export_dashboard_data.py --base-url http://localhost:8080

Requirements

• •Dev Graph API running on http://localhost:8080
• •Node.js 18+ available (for SVG-parity renderer; uses global fetch)
• •Dependencies installed in tools/dev-graph-ui:
  • •npm --prefix tools/dev-graph-ui install jsdom @resvg/resvg-js
• •ffmpeg available on PATH for mp4/gif exports

Exports

Structure SVG (UI export)

• •Script: python skills/dev-graph-exports/scripts/export_structure_svg.py
• •Output default: exports/dev-graph/structure-graph.svg
• •Optional: --url http://localhost:3001/dev-graph/structure --output <path>
• •Filters: --source-type File --target-type Document --relation-type CONTAINS_CHUNK --max-nodes 250

Timeline MP4 + GIF segments (SVG-parity, API only)

• •Script: node skills/dev-graph-exports/scripts/export_timeline_segments_svg_parity.js
• •Output default: mp4 + gif plus per-commit SVG frames under exports/dev-graph/timeline-frames/
• •The SVG frames are the primary artifacts; raster frames are temporary and removed after encoding.
• •Segments: commits 1-70, 70-200, 200+.
• •Key options:
  • •Range: --range-start 0 --range-end 69 (single segment)
  • •Segments: --segments "0-69,69-199,199-" (dash with empty end means "to last")
  • •Sprint window preset: --sprint sprint-11 (uses /api/v1/dev-graph/sprints/<n> start/end)
  • •Single SVG frame (no ffmpeg): --frame-only true --sprint sprint-11 --sprint-frame end --frame-output docs/sprints/sprint-11/_dev_graph_visuals/timeline.svg
  • •Single SVG at commit: --frame-only true --frame-commit abcd123 --frame-output exports/dev-graph/timeline-frame.svg
  • •Graph density: --max-nodes 0 (default, no limit)
  • •Node layout: --show-folder-groups true|false, --focused-view true|false, --size-by-loc true|false
  • •Styling: --color-mode folder|type|commit-flow|activity|none, --highlight-docs true|false, --edge-emphasis 0.0-1.0
  • •Filtering: --active-folders "backend,frontend", --include-patterns "docs,/\\.md$/"
  • •Canvas size: --width 1200 --height 600
  • •Auto-fit (zoom out to see full shape): --auto-fit true (default) and --auto-fit-padding 80
  • •Auto-fit motion (smooth zoom between frames): --auto-fit-motion true (default), --auto-fit-motion-alpha 0.25
  • •Focus around a commit: --focus-commit 120 --focus-window 10 (index) or --focus-commit abcd123 --focus-window 12 (hash prefix)
  • •Relaxation (cinematic settling): --relax-ticks-min 180 --relax-ticks-max 520 --relax-ticks-factor 35
  • •Data volume: --limit 5000 --max-files 0 (0 means no limit; lets backend return full file lists)
  • •Include every file node: --include-all-files true (default)
  • •Downscale on failure: --downscale-on-fail true (default), --downscale-factor 0.85 --downscale-retries 3

Per-commit SVG frames

• •Script: python skills/dev-graph-exports/scripts/export_timeline_svgs.py
• •Output default: exports/dev-graph/timeline-frames/
• •Optional: --start 0 --count 20
• •Note: this script is UI-driven (requires the Dev Graph UI running) and requires Python Playwright.

Dashboard data

• •Script: python skills/dev-graph-exports/scripts/export_dashboard_data.py
• •Output default: exports/dev-graph/dashboard/

Notes

• •Timeline exports must use the SVG timeline renderer, not the GL2 timeline view.
• •The SVG-parity exporter uses the Dev Graph API only; UI is not required.
• •Structure export is taken from the main Structure View canvas and reflects current filters.
• •Dashboard exports pull from /api/v1/dev-graph/stats, /analytics, /quality, and /data-quality/overview.
• •Use sprints.json from dashboard exports to link frames and videos to sprint windows.
• •Defaults aim for full-fidelity output; if a segment fails, it will retry at a smaller canvas size.

Other scripts (optional)

• •UI-driven structure SVG export: python skills/dev-graph-exports/scripts/export_structure_svg.py (requires the UI + Python Playwright)
• •UI-driven MP4 export via the Timeline page: python skills/dev-graph-exports/scripts/export_timeline_mp4.py (requires the UI + Python Playwright)
• •Legacy standalone timeline export (non-parity): python skills/dev-graph-exports/scripts/export_timeline_segments_standalone.py (requires matplotlib + ffmpeg)