https://github.com/scrntprcrz/openapi-sankeylizer
Visualize your OpenAPI specs as Sankey diagrams. Upload, explore request/response flows, and export as PNG.
https://github.com/scrntprcrz/openapi-sankeylizer
api-visualization google-charts openapi react sankey-diagram swagger web-worker
Last synced: about 2 months ago
JSON representation
Visualize your OpenAPI specs as Sankey diagrams. Upload, explore request/response flows, and export as PNG.
- Host: GitHub
- URL: https://github.com/scrntprcrz/openapi-sankeylizer
- Owner: scrntprcrz
- Created: 2025-09-03T10:45:26.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-10-20T01:00:26.000Z (9 months ago)
- Last Synced: 2025-10-27T18:32:31.425Z (8 months ago)
- Topics: api-visualization, google-charts, openapi, react, sankey-diagram, swagger, web-worker
- Language: JavaScript
- Homepage:
- Size: 2.52 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sankeylizer XE
[](./4.png)
### What is it?
Sankeylizer is a web app that turns **OpenAPI (.json)** into **interactive Sankey diagrams** so you can see request/response flows per endpoint at a glance. It resolves schema compositions, maps parameters across layers, builds the flow graph, and lets you explore and export it.
### Key Features
- **OpenAPI → Sankey** (from JSON to a navigable flow graph)
- **Schema compositions**: `$ref`, `allOf`, `oneOf`, `anyOf` (resolution and node linking)
- **Parameters coverage**: `query`, `path`, `header`, `cookie`, `form`, `multipart` (per-endpoint mapping)
- **Path Selector** (cut the spec by paths for focused analysis)
- **Command Palette** (fast search and quick actions on routes/fields)
- **Highlight** (focus without recomputing the whole graph)
- **Theming** (background, selection/dim/text colors; optional title/footer in export)
- **Background processing** (Web Worker to keep the UI responsive)
- **Export**: **PNG** (raw 1:1 or HQ resampling with safe bounds)
- **Responsive canvas** (dynamic height and redraw on window resize)
### Architecture
- UI: **React** + state via **Recoil** atoms/selectors for theme, selection and export settings.
- Visualization: **Google Charts** (**Sankey**). Loader bootstrapped at runtime and chart instantiated with dynamic height and redraw on resize.
- Command palette: **kbar** (portal, positioner, search, matches) wrapped in a provider for action registration.
- Draggable UI: **interactjs** to drag the command palette within viewport bounds.
- Headless UI + Heroicons: **Headless UI** + **Heroicons** for menu/portal/transition primitives and icon set for controls.
- Utility classes: **clsx** for deterministic class composition across components.
- Background worker: **Web Worker** (module) for graph generation and repaint-only updates when structure is unchanged.
- Theme & fonts: global theme atoms and on-demand **Google Fonts** list in the UI footer.
- Export pipeline: custom **SVG/Canvas** exporter with safe caps (max side/area) and 1:1 or HQ resampling.
### Quick Start
```bash
npm install
npm run dev
# → http://localhost:5173
```
## 📸 Screenshots
