# Dev Graph Exports

> Export Dev Graph UI assets and dashboard data. Use when the user asks for structure SVG exports, timeline SVG/MP4 exports, per-commit SVGs, sprint-linked visuals, or dashboard/analytics JSON from the Dev Graph API.

- Skill: `rm2thaddeus/dev-graph-exports` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add rm2thaddeus/dev-graph-exports`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rm2thaddeus/dev-graph-exports/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: rm2thaddeus (https://skillmd.com/u/rm2thaddeus)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rm2thaddeus/dev-graph-exports

---


# 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)