Diagram - Spiral, Funnel and Fishbone Layouts

#Usage

Initialize options.specialized with a kind and the required explicit order or relationships below. The option IDs above match the first runnable example below; supply matching saved records or replace them with your graph’s IDs. Expose the selected provider on the component, such as readonly specializedDiagramLayout = specializedDiagramLayout.

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

Use specializedDiagramLayout with explicit specialized mode data. Every visible scope unit needs one role in that data. The provider positions saved units; it does not resize shapes, calculate conversions or infer causes.

Import DiagramLayout and the provider for this family from @primeui/vue-diagram/layout. Place the component inside Diagram.Root, bind options with :diagram-layout and the provider with :provider. Use the layout setup for the component composition. The complete examples below supply the model, options and cleanup.

#Expanding spiral

Supply kind: 'spiral', a complete order and boolean clockwise. Ordered centers follow a continuously expanding Archimedean spiral; this differs from generation rings in a radial tree. Direction rotates the principal axis and Reverse turn changes winding.

Pitch and candidate spacing derive from conservative measured footprints and clearance. Large/rotated bodies can make the arrangement generous. nodeGap controls minimum clearance; rankGap is unsupported. Saved connections can have arbitrary topology, but the explicit order owns progression.

#Construct funnel geometry, then place stages

The complete source calls createDiagramFunnelGeometry to construct saved trapezoid nodes from synthetic nonincreasing counts. It renders the returned polygon and uses the interior label box and entry/exit ports. A separate Run uses specialized: { kind: 'funnel', order: [...] } to position those measured stages. Layout never infers counts from their sizes.

The pure helper returns { ok: true, stages } or { ok: false, message }. Each stage has id, value, page-independent bounds, local polygon, local labelBounds and local entry/exit. Construct or update your node records from these descriptors before running placement. Custom funnel hit bounds remain conservative rectangles in the current editor.

Top widths are minWidth + (maxWidth - minWidth) * value / firstValue. A stage's bottom matches the next top width; the final bottom uses minWidth. Equal values form rectangular stages and trailing zero values retain the label floor. Width is linear with a positive floor; area is not proportional to counts. Conversion percentages and cumulative arithmetic belong to your application.

The demo keeps Down fixed so geometry and placement agree. Changing direction on the layout alone would not reshape existing polygons or ports. A data/shape update is its own transaction; arranging the resulting graph is a separate position-only Undo action.

#Explicit fishbone graph

Supply kind: 'fishbone', tailId, effectId and ordered branches. Each branch names a junctionId, categoryId and direct causes, each with its own id and junctionId. All IDs must be distinct saved scope units.

Author the directed spine Tail → spine-1 → spine-2 → Delay. People connects through joint-training to spine-1, while Training connects to that joint. Process/Approvals follow the same pattern on spine-2. These are real saved connectors and small junction nodes, not decorative bones added by a template. Missing, extra, duplicate or reversed relationships fail.

Categories alternate sides; measured branch blocks reserve space around the collinear spine. The supported profile has one category level with direct causes. Nested cause records and inferred causal meaning are unsupported. Four directions rotate the placement, including Left effect growth; connector routing remains separate.

#Constraints and limits

All modes accept direction (default Down), nodeGap (default 32), exact pinnedIds and expanded-container parentId scope. Funnel/fishbone use default rank gap 64; spiral rejects it. Gap values follow the finite 0–100,000 common range. Pins must agree with one rigid translation of the whole arrangement. Conflicts or insufficient containment fail atomically; order, turn and domain records are not changed to force a fit.

True incremental ordering, componentGap and other families' options are rejected. Compounds remain rigid and pool/lane child positions remain swimlane-owned. Caps are 500 units / 2,000 edges; fishbone has at most 128 branches and 32 direct causes per branch within the total budget. Spiral has bounded candidate/pair work and can return a budget diagnostic before reaching the unit cap.

These are source resource caps, not latency promises. Validation and bounded sorts can keep the host busy before the next cooperative yield. Each demo keeps failures visible, applies no partial layout, and offers Cancel, one-step Undo and Restart with owned-store teardown.

Choose a layout · Venn · Execution

#Related Docs

• Choose a Layout
• Layout Execution
• API