diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk
index d3a0372a73..edcb7c0171 100644
--- a/src/_includes/layouts/use-case.njk
+++ b/src/_includes/layouts/use-case.njk
@@ -9,10 +9,33 @@ sitemapPriority: 0.7
problem hero sub-headline (the pain in one line)
customerPain { heading, intro[], cards[ {icon,title,detail} ] }
outcomeFirst { heading, intro, dimensions[ {label,title,detail} ] }
+ howItWorks { heading, intro, designPattern{}, diagram{}, pieces[], architecture, docsCta{} }
whyItMatters { heading, intro, points[ {title,detail} ] }
competition { heading, intro, traps[ {label,title,detail} ] }
comparison { without[ {title,detail} ], with[ {title,detail} ] }
+ howItWorks answers "how does FlowFuse build this", which the pain, outcome
+ and comparison blocks deliberately do not. It is the bridge from the
+ marketing narrative into the product docs, so keep it high level here and
+ push every detail into a docs link.
+
+ designPattern { kind, name, detail, docsUrl }
+ kind is the pattern family, e.g. "Hardware pattern" or
+ "Software pattern". name is the specific pattern chosen
+ for this use case.
+ diagram { src, alt, caption, width, height, placeholder }
+ End-to-end architecture drawing. src may be a placeholder
+ while the real diagram is commissioned; set
+ diagram.placeholder to true to render the placeholder
+ treatment and keep it visibly unfinished. width/height
+ default to 1200x630 and only exist to reserve the box, so
+ override them when the real asset is a different shape.
+ pieces [ {icon, title, detail, docsUrl} ]
+ The problem broken into the individual components that get
+ built. Order them the way you would build them.
+ architecture slug of a /use-cases/ architecture page this sits on
+ docsCta { label, url }
+
Legacy fall-back front-matter (simple skeleton, still supported):
gap[], workflow[], outcomes[]
@@ -23,11 +46,17 @@ sitemapPriority: 0.7
{% set nav = [] %}
{% if customerPain %}{% set nav = nav.concat([{ id: "customer-pain", label: "Customer Pain" }]) %}{% endif %}
{% if outcomeFirst %}{% set nav = nav.concat([{ id: "outcome-first", label: "Outcome First" }]) %}{% endif %}
+{% if howItWorks %}{% set nav = nav.concat([{ id: "how-it-works", label: "How It Works" }]) %}{% endif %}
{% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %}
{% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %}
{% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %}
{% if aiBuildLayer %}{% set nav = nav.concat([{ id: "ai-build-layer", label: "Build It With AI" }]) %}{% endif %}
+{# --- section eyebrow numbers, derived from nav so they cannot drift ---
+ Pages omit blocks freely, so a hardcoded "03" desyncs from the nav as soon
+ as an earlier block is missing. Look the number up instead. #}
+{% macro secNum(id) %}{%- for item in nav -%}{%- if item.id == id -%}{%- if loop.index < 10 -%}0{%- endif -%}{{ loop.index }}{%- endif -%}{%- endfor -%}{% endmacro %}
+
-
01 · Customer pain
+
{{ secNum("customer-pain") }} · Customer pain
{{ customerPain.heading }}
{% for paragraph in customerPain.intro %}
@@ -94,11 +123,11 @@ sitemapPriority: 0.7
{% if outcomeFirst %}
-
02 · Outcome first
+
{{ secNum("outcome-first") }} · Outcome first
{{ outcomeFirst.heading }}
{{ outcomeFirst.intro }}
@@ -114,13 +143,103 @@ sitemapPriority: 0.7
{% endif %}
+ {% if howItWorks %}
+
+
+
+
{{ secNum("how-it-works") }} · How it works
+
{{ howItWorks.heading or "How FlowFuse builds this" }}
+ {# width/height are here to reserve the box before the image
+ arrives; without them "h-auto" collapses the figure to
+ zero and the whole section below it jumps on load. #}
+
+
+ {% if howItWorks.diagram.caption or howItWorks.diagram.placeholder %}
+ {% if howItWorks.diagram.placeholder %}Placeholder diagram, pending art request. {% endif %}{{ howItWorks.diagram.caption }}
+ {% endif %}
+
+ {% endif %}
+
+ {% if howItWorks.pieces %}
+
{{ howItWorks.piecesHeading or "The individual pieces" }}
+
+ {% for piece in howItWorks.pieces %}
+
+
+
+ {% include "components/icons/" + piece.icon + ".svg" %}
+
{{ secNum("why-it-matters") }} · Why this is important
{{ whyItMatters.heading }}
{{ whyItMatters.intro }}
@@ -140,11 +259,11 @@ sitemapPriority: 0.7
{% if competition %}
-
04 · Why off-the-shelf doesn't work
+
{{ secNum("competition") }} · Why off-the-shelf doesn't work
{{ competition.heading }}
{{ competition.intro }}
@@ -165,11 +284,11 @@ sitemapPriority: 0.7
{% if comparison %}
-
05 · With / without FlowFuse
+
{{ secNum("with-without") }} · With / without FlowFuse
Without FlowFuse
@@ -206,11 +325,11 @@ sitemapPriority: 0.7
{% if aiBuildLayer %}
-
06 · Build it with AI
+
{{ secNum("ai-build-layer") }} · Build it with AI
{{ aiBuildLayer.heading or "From described to deployed, with the FlowFuse Expert" }}
{{ aiBuildLayer.intro }}
diff --git a/src/index.njk b/src/index.njk
index b7f03ee6c6..868f5601b7 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -86,6 +86,7 @@ operationalSystem:
- name: "Equipment Monitoring"
description: "PLC and device health monitoring across controller types."
- name: "Operational Data Pipelines"
+ url: "/use-cases/operational-data-pipelines/"
description: "Structured controller data flows, diagnostics, and routing."
- name: "System Diagnostics"
description: "Error tracking and root cause analysis across deployed applications."
diff --git a/src/use-cases/operational-data-pipelines.njk b/src/use-cases/operational-data-pipelines.njk
new file mode 100644
index 0000000000..d2ec18ba2a
--- /dev/null
+++ b/src/use-cases/operational-data-pipelines.njk
@@ -0,0 +1,139 @@
+---
+title: "Operational Data Pipelines"
+meta:
+ title: "Operational Data Pipelines | Use Cases | FlowFuse"
+ description: "Move plant data where it needs to go, governed and at fleet scale. OPC UA, MQTT, SQL, historians and cloud, built on Node-RED, managed with FlowFuse."
+problem: "Every system on your plant floor speaks a different language, and every integration you build by hand becomes something nobody dares to touch."
+industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "renewables", "semiconductors", "electronics-appliances"]
+values: ["ai-readiness-data-foundation"]
+
+howItWorks:
+ heading: "How FlowFuse builds operational data pipelines."
+ intro: "A pipeline is a protocol on one end, a shared payload shape in the middle, and consumers on the other. This is how it breaks down and which FlowFuse pattern keeps it from becoming untouchable."
+ designPattern:
+ kind: "Hardware pattern"
+ name: "Edge building blocks"
+ detail: "Each protocol becomes a versioned subflow published as a package, not a bespoke integration. Sites assemble their own pipeline from blocks the platform team maintains, and a fix to a block propagates by version bump."
+ docsUrl: "/docs/user/custom-npm-packages/"
+ diagram:
+ placeholder: true
+ src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Operational+Data+Pipelines+Architecture"
+ alt: "End-to-end architecture for operational data pipelines: reusable per-protocol blocks at the edge normalizing into one payload shape, published to a broker on a modelled topic structure, routed to storage and enterprise consumers."
+ caption: "Reusable per-protocol blocks at the edge, normalized into one payload shape, published on a modelled topic structure, and routed to storage and enterprise consumers."
+ pieces:
+ - icon: "puzzle-piece"
+ title: "One reusable block per protocol"
+ detail: "OPC-UA, Modbus, S7 and serial each become a maintained subflow package rather than a hand-built integration nobody dares touch."
+ docsUrl: "/docs/user/custom-npm-packages/"
+ - icon: "data-block"
+ title: "Normalize to one payload shape"
+ detail: "Every source produces the same envelope: identity, value, unit, quality and timestamp. Consumers stop caring what spoke first."
+ - icon: "map"
+ title: "Model the topic structure"
+ detail: "A namespace that reflects site, area, line and asset, decided once so producers and consumers agree without coordinating."
+ - icon: "wifi"
+ title: "Publish to a broker"
+ detail: "The Team Broker means adopting a namespace does not start with procuring and hardening infrastructure."
+ docsUrl: "/docs/user/teambroker/"
+ - icon: "arrows-right-left"
+ title: "Route to consumers"
+ detail: "Historian, database, MES, ERP and cloud each subscribe to what they need instead of being wired point to point."
+ - icon: "rectangle-stack"
+ title: "Version the blocks, not the copies"
+ detail: "Shared library and packages mean an improvement lands everywhere by upgrade rather than by hunting down duplicates."
+ docsUrl: "/docs/user/shared-library/"
+ architecture: "uns"
+ docsCta:
+ label: "Read the packages docs"
+ url: "/docs/user/custom-npm-packages/"
+
+customerPain:
+ heading: "Point-to-point integrations do not scale."
+ intro:
+ - "Machine data lives in PLCs, historians, SCADA and MES; business context lives in ERP and quality systems. Getting one to talk to the other means custom scripts, vendor gateways, and undocumented middleware."
+ - "It works, once, on one line. Then the estate grows to dozens of machines across multiple sites, and the integration layer becomes the riskiest, least visible part of the operation."
+ cards:
+ - icon: "link-slash"
+ title: "Protocol sprawl"
+ detail: "OPC UA here, Modbus there, S7 on the old line, CSV exports from the lab. Every connection is a one-off project with its own failure modes."
+ - icon: "server-stack"
+ title: "Unmanaged edge scripts"
+ detail: "Data movers live on plant PCs nobody owns, with no version control, no deployment process, and no answer to 'what runs where?'"
+ - icon: "lock-closed"
+ title: "Vendor-locked connectivity"
+ detail: "Proprietary connectivity platforms meter every tag and every target, and take the integration knowledge with them when the contract ends."
+ - icon: "sparkles"
+ title: "Data that AI cannot use"
+ detail: "Raw tag streams without context, units, or structure. Every analytics and AI initiative starts with the same expensive clean-up."
+ #placeholder: template copy for review, refine per Showcase
+
+outcomeFirst:
+ heading: "One governed pipeline layer, from edge to everywhere."
+ intro: "FlowFuse turns data movement into managed, visual flows: built in Node-RED, versioned, deployed to fleets of edge instances, and observable from one place. The pipeline becomes an asset you own instead of a risk you inherit."
+ dimensions:
+ - label: "Operational"
+ title: "Connect anything to anything, visibly"
+ detail: "OPC UA, MQTT, Modbus, S7, REST, SQL and historians wired in visual flows anyone on the team can read and change."
+ - label: "Scale"
+ title: "Deploy to hundreds of edge instances"
+ detail: "DevOps pipelines, snapshots and remote deployment roll the same governed flow out across lines and sites, with rollback."
+ - label: "Strategic"
+ title: "AI-ready data by construction"
+ detail: "Contextualized, structured data landing in your Unified Namespace, Tables and historians, ready for analytics and AI agents on your terms."
+
+whyItMatters:
+ heading: "The integration layer decides how fast everything else moves."
+ intro: "Every initiative that matters, from OEE to AI, arrives at the same bottleneck: can the data get there, with context, reliably?"
+ points:
+ - title: "Time-to-value is the buying criterion"
+ detail: "Connectivity programs are judged in weeks, not quarters. A pipeline you can stand up in days changes what the business is willing to attempt."
+ - title: "Unmanaged glue code is operational debt"
+ detail: "Every undocumented script is a future outage with a name nobody remembers. Governance is not bureaucracy here; it is uptime."
+ - title: "AI readiness is a data property"
+ detail: "Agents and analytics are only as good as the contextualized data they can reach. The pipeline layer is where readiness is actually built."
+
+competition:
+ heading: "Why the usual approaches stall."
+ intro: "Teams typically arrive here from one of three directions, each with the same ceiling."
+ traps:
+ - label: "Proprietary platforms"
+ title: "Per-tag pricing, closed tooling"
+ detail: "Licensed connectivity suites meter growth and lock integration logic into a vendor's black box."
+ - label: "Custom code"
+ title: "Scripts that become legacy on day one"
+ detail: "Python on a plant PC moves data until its author changes roles. Then it is archaeology."
+ - label: "Cloud-first iPaaS"
+ title: "Built for SaaS APIs, not the plant floor"
+ detail: "Generic integration platforms have no OT protocol depth and no answer for edge, offline, or on-prem constraints."
+
+comparison:
+ without:
+ - title: "Every integration is a project"
+ detail: "New machine, new script, new risk. Knowledge lives in individuals."
+ - title: "No view of what runs where"
+ detail: "Data movers scattered across plant PCs with no inventory, versioning, or rollback."
+ - title: "Data arrives raw"
+ detail: "Consumers each re-clean the same streams; AI initiatives stall at the data step."
+ with:
+ - title: "Integration is a managed capability"
+ detail: "Visual flows, shared patterns, one library of connections the whole team can maintain."
+ - title: "Fleet-scale deployment with rollback"
+ detail: "Pipelines, snapshots and device groups push governed changes to every edge instance."
+ - title: "A data foundation you own"
+ detail: "Structured, contextualized data in your UNS and Tables, feeding dashboards, MES, and AI."
+
+aiBuildLayer:
+ intro: "The FlowFuse Expert works on this use case with you: describe the pipeline you need and get a working starting flow, then refine it with AI assistance and keep full ownership of the result."
+ steps:
+ - title: "Describe it, get a starting flow"
+ detail: "Tell the Expert what should move from where to where. It assembles tabs, nodes and wiring for a working pipeline starting point. Currently in open beta on FlowFuse Cloud."
+ - title: "Refine with in-editor assistance"
+ detail: "Function Builder and inline code completions help with payload transforms and SQL; the flow explainer documents what any part does."
+ - title: "Make it AI-ready"
+ detail: "Expose pipeline data as MCP tools with the MCP nodes, and use the certified LLM nodes (OpenAI, Anthropic, Gemini, or local models via Ollama) inside flows where language models add value."
+ note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing. Placeholder template copy for internal review."
+
+closingCta:
+ heading: "See your data estate in one governed layer"
+ description: "Talk to an expert about replacing point-to-point integrations with managed pipelines, or start building today."
+---
diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk
index 5086a4a875..8dfbc56b0e 100644
--- a/src/use-cases/production-monitoring.njk
+++ b/src/use-cases/production-monitoring.njk
@@ -7,6 +7,44 @@ problem: "Your operation is running. You just can't see it clearly enough, until
industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "renewables", "semiconductors", "electronics-appliances"]
values: ["production-performance"]
+howItWorks:
+ heading: "How FlowFuse builds production monitoring."
+ intro: "Production monitoring is not one app you install. It is a handful of pieces you define once and then replicate. This is how the problem breaks down, and which FlowFuse pattern carries it across every line and site."
+ designPattern:
+ kind: "Hardware pattern"
+ name: "Pipeline plus environment variables"
+ detail: "The monitoring application is built once and distributed to every line by a DevOps pipeline. Everything site-specific, tag addresses, line names, shift boundaries, lives in environment variables instead of inside the flows, so the same snapshot runs everywhere without an edit."
+ docsUrl: "/docs/user/devops-pipelines/"
+ diagram:
+ placeholder: true
+ src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Production+Monitoring+Architecture"
+ alt: "End-to-end architecture for production monitoring: PLCs and machines feeding edge instances, publishing to a broker and historian, with role-specific dashboards on top and a pipeline distributing the application across sites."
+ caption: "Machines and PLCs into edge instances, out over MQTT into your historian, role-specific dashboards on top, and one pipeline distributing the whole application across every line."
+ pieces:
+ - icon: "queue-list"
+ title: "Define the data model"
+ detail: "Name the equipment hierarchy and tag structure first: site, line, cell, signal. Every later piece depends on it, and this is exactly the part an off-the-shelf tool decides for you."
+ - icon: "chart"
+ title: "Derive the metrics"
+ detail: "Counts, cycle times, downtime reasons and OEE are calculated from the model rather than read off a machine. The logic sits in Node-RED flows your own team can read and change."
+ - icon: "device-agent"
+ title: "Collect at the edge"
+ detail: "The Device Agent runs an instance on existing edge hardware and speaks OPC-UA, Modbus, S7 or MQTT to whatever is already on the floor."
+ docsUrl: "/docs/device-agent/introduction/"
+ - icon: "arrows-right-left"
+ title: "Publish and store"
+ detail: "Contextualized data leaves the edge on a stable topic structure and lands in your historian or database. The schema and the storage stay yours."
+ - icon: "dashboard"
+ title: "Visualize per role"
+ detail: "A line view for the supervisor, trend detail for the maintenance engineer, a roll-up for the plant manager. FlowFuse Dashboard builds all three from the same data."
+ - icon: "rectangle-stack"
+ title: "Replicate across sites"
+ detail: "Snapshot the working application and let the pipeline push it to every other line, with each site's specifics supplied by environment variables."
+ docsUrl: "/docs/user/envvar/"
+ docsCta:
+ label: "Read the pipeline docs"
+ url: "/docs/user/devops-pipelines/"
+
aiBuildLayer:
intro: "The FlowFuse Expert works on this use case with you: describe the monitoring you need and get a working starting flow, then query what it captures in plain language."
steps:
diff --git a/src/use-cases/shop-floor-communication.njk b/src/use-cases/shop-floor-communication.njk
index 070eede175..a1a8645826 100644
--- a/src/use-cases/shop-floor-communication.njk
+++ b/src/use-cases/shop-floor-communication.njk
@@ -6,7 +6,44 @@ meta:
problem: "The line stopped four minutes ago. The person who can fix it will find out when someone walks over."
industries: ["automotive", "food-beverage", "aviation-aerospace", "electronics-appliances"]
values: ["labor-operational-efficiency"]
-architecture: "edge-connectivity"
+howItWorks:
+ heading: "How FlowFuse builds connected andon."
+ intro: "Getting an event to the right person is a small number of pieces, not a product. The routing logic is identical at every site; only the people, channels and shift patterns differ, and that is what decides the pattern."
+ designPattern:
+ kind: "Hardware pattern"
+ name: "Pipeline plus external configuration"
+ detail: "The routing and escalation flows are built once and distributed by pipeline. Who responds, on which channel, during which shift is read at runtime from a central configuration source, so a rota change or a new contact never requires a redeploy."
+ docsUrl: "/docs/user/devops-pipelines/"
+ diagram:
+ placeholder: true
+ src: "https://placehold.co/1200x630/eef2ff/4338ca?text=Shop+Floor+Communication+Architecture"
+ alt: "End-to-end architecture for connected andon: machine signals and operator call buttons into edge instances, routed against a central directory of roles and shifts, delivered to displays, team channels and phones, with acknowledgment timing recorded."
+ caption: "Machine signals and call buttons into edge instances, routed against a central directory of roles and shifts, out to displays, team channels and phones, with every acknowledgment timed."
+ pieces:
+ - icon: "bell-alert"
+ title: "Capture the event"
+ detail: "Machine signals, alarm bits and operator call buttons all become the same kind of event, collected by an edge instance next to the equipment."
+ docsUrl: "/docs/device-agent/introduction/"
+ - icon: "queue-list"
+ title: "Model the event"
+ detail: "Each event carries type, area, severity and the role that should respond. Routing decisions are made against that shape, not against a machine address."
+ - icon: "users"
+ title: "Keep the directory outside the flow"
+ detail: "Roles, contacts, channels and the shift calendar live in configuration rather than inside the flows, so the floor can change who responds without touching the application."
+ docsUrl: "/docs/user/envvar/"
+ - icon: "share"
+ title: "Deliver where people look"
+ detail: "The same event fans out to andon displays, team channels and phones, each with the context the recipient needs to act on it."
+ - icon: "clock"
+ title: "Acknowledge and escalate"
+ detail: "An unacknowledged event climbs the chain on a timer. Nothing waits on someone happening to be free."
+ - icon: "circle-stack"
+ title: "Record the timing"
+ detail: "Event, notification and acknowledgment timestamps land in your database, which is what turns response time into a metric you can manage."
+ architecture: "edge-connectivity"
+ docsCta:
+ label: "Read the pipeline docs"
+ url: "/docs/user/devops-pipelines/"
customerPain:
heading: "Events travel at walking speed."
+