Data Flow MapPRO

Workflow54: Data Flow Map

An integration map naming every system as a card, inverting the first-party one so it reads as the origin, then listing each crossing on a hairline row with what travels and how often.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/workflow54?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/workflow54?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/workflow54.tsx plus the badge23 and button21 components it uses for the eyebrow and the closing action.

Quick start

The installed file exports workflow54Demo alongside the block: the exact props behind the preview above. Spread it to get a working map in one line.

import { Workflow54, workflow54Demo } from "@/components/beste/block/workflow54";

export default function DataFlowPage() {
  return <Workflow54 {...workflow54Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Workflow54 } from "@/components/beste/block/workflow54";

export default function DataFlowPage() {
  return (
    <Workflow54
      badge={{ label: "What crosses where" }}
      heading="The only four places your data goes, and what goes there"
      description="Drawn out rather than described, because a data flow diagram is what governance asks for."
      nodesTitle="The systems involved"
      nodes={[
        { name: "Sirius", detail: "The workspace itself. Everything else is downstream of this." },
        {
          name: "Payment processor",
          detail: "Card details go here directly and never touch our servers.",
          external: true,
        },
      ]}
      flowsTitle="Every crossing"
      columns={["From", "To", "What crosses", "How often"]}
      flows={[
        {
          from: "Sirius",
          to: "Payment processor",
          payload: "Amount, reference, and a token. No card number.",
          frequency: "Per payment",
        },
      ]}
      closing="No clinical record leaves the workspace on any of these paths."
      button={{ label: "Get the architecture diagram", href: "/security/architecture" }}
    />
  );
}

Props

type Node = {
  name: string;
  detail: string;
  external?: boolean;
};

type Flow = {
  from: string;
  to: string;
  payload: string;
  frequency: string;
};

type ActionLink = {
  label: string;
  href: string;
};

Behavior notes

• external inverts the relationship rather than adding a badge: the first-party node renders on bg-foreground with fixed background text tokens, and every external one on bg-muted. Nothing draws a border, so the distinction is surface alone.
• Marking every node external, or none, removes the distinction entirely, which is the one thing to avoid when adapting this block.
• payload is the field the block exists for. Each crossing states exactly what travels, and the demo uses it to name what does not travel too.
• Flows are not linked to nodes by id. from and to are plain strings, so keeping the names consistent with the cards above is authoring work.
• The crossings table renders the destination twice: once inline with an arrow for the stacked mobile layout, and once in its own column from lg, each hidden at the other breakpoint. That is how the row reads as a sentence on mobile and as a table on desktop.
• The column header row is hidden lg:grid, and the rows container carries mt-4 lg:mt-0 so the spacing is right at both widths.
• The closing row carries no top border, since the last flow row already ends in one.