Flow diagram

What's included

An animated architecture diagram, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

Three layouts share the same shell. Flow puts a core in the middle, its sources on the left, its outputs on the right, and sends dots travelling along the curves. Decision draws a tree and lights up one path at a time, from the root to the leaf. Latency walks a request through step by step, fills each link, stops on the one that fails and shows the verdict.

Features

• Works without JavaScript — the bottom bar is made of native radio buttons and a checkbox: switching diagram and going from dark to light are written in CSS. Without the script, only the motion is missing.
• Curves that stay on their anchors — each link is an <svg> stretched to its box, with a normalised curve. So it joins its two ends exactly at any size, without any arithmetic.
• Full keyboard support — the arrow keys move through the three diagrams, Space toggles the theme, the focus stays visible. That's the native behaviour of the controls used, not a reimplementation.
• One variable for the scale — every measurement derives from --fd-font-size: cards, corner radii, spacing, stroke weight and control bar all follow together.
• Two themes in two lines — the palette is a single ink shown at various opacities. The light theme changes the ink colour and the background, nothing else.
• It rests when nobody's looking — nothing runs off screen, in a hidden tab, or under prefers-reduced-motion.

Dropping it into a page

Two files to load, then the markup. A node sits on a row, counted from the middle; the link joining it to the core carries the same row and the same side:

<link rel="stylesheet" href="flow-diagram.css">
<script src="flow-diagram.js" defer></script>
<div class="flow-diagram">
  <div class="flow-diagram__stage">
    <div class="flow-diagram__view" data-fd-view="hub">
      <svg class="flow-diagram__wire" data-fd-side="in" data-fd-row="-1"
           viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
        <path d="M 0 0 C 45 0 55 100 100 100" vector-effect="non-scaling-stroke" />
      </svg>
      <article class="flow-diagram__node" data-fd-side="in" data-fd-row="-1">
        <span class="flow-diagram__tile"><!-- an icon --></span>
        <span class="flow-diagram__text">
          <span class="flow-diagram__title">Form</span>
          <span class="flow-diagram__sub">Sign-up page</span>
        </span>
      </article>
      <div class="flow-diagram__core"><!-- the core --></div>
      <div class="flow-diagram__dots" aria-hidden="true"></div>
    </div>
  </div>
</div>

With no control bar, the component shows the single diagram you give it. With one, you need all three views and a radio group — the script invents identifiers for them if you forget, so you can paste the same markup twice onto a page.

What you should know

• The stage follows its container, not just its text. It's a diagram: it fills the room you give it, and the row spacing is worked out from the height. Below 480 px tall, the rows crowd together — the component stops there with a min-height.
• The tree is laid out by hand. A parent sits at the average of its children: that's the whole rule, written into two attributes per node. It could have been worked out in JavaScript, but then the tree would have vanished without the script.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML. It's also why the positions go through attributes rather than through a style attribute: under a strict CSP that one is ignored, and a layout that lives inside it collapses.
• The design comes from elsewhere. The proportions follow those of a commercial Framer component, measured on its rendering at four widths — that's where the row-spacing formula, the control points at 45% and 55%, and the 2857 ms period come from. The code itself is original: nothing was taken from its implementation.