A modern web-based node editor and visualization tool designed specifically for planning, documenting, and managing CG Pipeline data flows and DCC connection structures.
At its core, a CG Pipeline is about the flow of data. Its primary building blocks are processes with inputs and outputs (e.g., publishing assets in Maya, loading sequences in Nuke).
Plumber Manager provides a dedicated, highly interactive node graph editor configured with CG pipeline concepts:
- Node Graph Editor: Interactive canvas designed with visual standards familiar to CG artists and TD professionals.
- Format-Aware Inputs & Outputs: Integrated data type registers (USD, Alembic, EXR, Maya, etc.) to visualize plugs, sockets, and connection requirements.
- Automatic Compound Layout: Integrated hierarchy routing to automatically align complex node networks, keeping notes adjacent to their processes and nested elements grouped inside backdrops.
- Documentation First: Rich Markdown descriptions with WYSIWYG tools on each node to build a live documentation hub of your pipeline assets.
- Embeddable Widget: Build and bundle the canvas as a self-contained shadow DOM custom element (
<plumber-viewer>) to drop pipeline charts directly into corporate wikis, Nuke panels, or web portals.
- Interactive Canvas & Touch Support: Smooth mouse-wheel centered zooming, panning, marquee box multi-node selection, mini-map navigation, and full touch screen support (1-finger node selecting and dragging, 2-finger pinch-to-zoom).
- Backdrop Group Boxes: Create compound backdrop boxes with dynamic bottom-right resize grabbers. Moving a backdrop automatically moves all nested nodes, and auto-layout organizes them inside the group.
- Rich Markdown Notes: Place yellow sticky notes on the canvas that render formatted markdown elements (headers, bullets, bold text) with dynamic YIQ contrast coloring to ensure legibility.
- Format Type Manager: Custom creation and registry of custom format files with unique color codings and SVG file type icons.
- Format Path Badges: Connection paths dynamically center formatted type badges (e.g.
USD,MA,EXR) in both the canvas editor and exported vectors. - Robust Exports: Export diagrams as high-resolution PNGs, clean vector SVGs (with embedded formats and notes), or multi-page PDF documents.
- 100% Backward Compatible: Parsers support importing legacy PyQt
.gphdiagrams. - Full Undo/Redo History: Command history stack tracks node creations, attribute swaps, drag-resizes, coloring, and markdown descriptions.
The application is built on modern web-native architectures:
- Frontend Framework: React 18
- Build System: Vite
- Layout Engine: dagre
- Styling: Pure CSS variables and custom design system themes
- Rendering: Native HTML5 2D Canvas API
- Node.js (v18+)
- npm (v9+)
Clone the repository and install the project dependencies:
git clone https://github.com/hasielhassan/PlumberManager.git
cd PlumberManager
npm installStart the local development server:
npm run devOpen your browser and navigate to http://localhost:5173.
Build the optimized web application:
npm run buildBuild outputs are generated in the /dist directory.
To compile the standalone embeddable custom element viewer widget:
npm run build:widgetThis generates dist/widget/plumber-viewer.umd.js and dist/widget/plumber-viewer.es.js.
Once built, you can embed Plumber diagrams inside any HTML page, wiki, or pipeline dashboard using the hosted CDN script or local build asset.
An interactive showcase of the widget embedding features, control APIs, and event handling is available in public/embed-example.html. To preview it, start the local development server and navigate to http://localhost:5173/PlumberManager/embed-example.html.
Here is a quick example showing how to embed the widget in any page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pipeline Docs</title>
<!-- Load the Widget Script from CDN -->
<script src="https://www.hasielhassan.com/PlumberManager/widget/plumber-viewer.umd.js"></script>
</head>
<body>
<h1>Asset Publish Flow</h1>
<!-- Embedded Custom Element Viewer -->
<plumber-viewer
src="/path/to/my_pipeline.gph"
style="width: 100%; height: 600px; border: 1px solid #2d3748; display: block;"
></plumber-viewer>
</body>
</html>Plumber Manager was built with love, hands-on CG pipeline engineering experience, and lots of coffee ☕ — developed with the interactive pair-programming assistance of Claude (Anthropic) and Gemini (Google DeepMind).
If you find Plumber Manager helpful for your studio or personal workflows, consider supporting its development:
Note
Looking for the legacy desktop client? The previous Qt/Python desktop application is archived on the v0.0.3.0 tag and available for download on the v0.0.3.0 releases page.
Licensed under the GNU General Public License v3.0.
Copyright © 2019-2026 Hasiel Alvarez.