Pipeline flow, horizontal hex-prism string

How it works

From your data to your users, in one pipeline.

Drop your existing data in. Nextcloud handles auth and storage. Four ConNext apps shape it into a service. Your users see a portal, an API, or both.

OpenConnector Pulls schemas, REST, SOAP, files. One adapter per source, point it, name it, ship.

OpenRegister Validates against schema, stores typed records. Versioned, audit-logged, queryable.

OpenCatalogi Publishes datasets with metadata. WOO-ready, OData-shaped, public or scoped.

MyDash Renders the consumer view. Per-tenant theming, open source, embeddable.

React / MDX usage

Mount in MDX as `<Pipeline/>`

Layout-grid version of this pattern. A horizontal row of hex-numbered step cards with chevron flow lines between them, plus optional source / consumer end-boxes on each side. The pixel-exact SVG version on this kit page stays for hero diagrams; <Pipeline/> is for the recurring "How it works" pattern that scales cleanly across page widths.

Import & example

import {Pipeline} from '@conduction/docusaurus-preset/components';

<Pipeline
  start={{label: 'Sources', items: ['Spreadsheets', 'Databases', 'REST / SOAP', 'Legacy']}}
  steps={[
    {number: '01', kicker: 'Ingest',   name: 'OpenConnector', caption: 'Pull data in from existing systems.'},
    {number: '02', kicker: 'Validate', name: 'OpenRegister',  caption: 'Schema-validated, citation-stable storage.'},
    {number: '03', kicker: 'Surface',  name: 'OpenCatalogi',  caption: 'Federated public catalogue. WOO-ready.'},
    {number: '04', kicker: 'Render',   name: 'MyDash',        caption: 'Dashboards, reports, public-facing UI.'},
  ]}
  end={{label: 'Consumers', items: ['Citizens', 'Analysts', 'API clients', 'Partners']}}
/>

Props

start {label, items} left-side end-box
end {label, items} right-side end-box
steps array of {number, kicker, name, caption, icon}
PipelineStep exported for direct composition

Auto-stacks vertically below 1100px; chevron rotates to a downward arrow.

Pipeline flow (horizontal hex-prism)