Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Diagrams

Every diagram sits in DiagramFrame; never rebuild the frame. The dashboard grammar diagram hardcodes three brand accents on purpose.

HANDLE
diagrams
LIVES IN
src/components/DiagramFrame.jsx, src/components/dsi/*, src/components/dashboard/*
USED ON
Sourcing, Dashboards
PROPS
DiagramFrame: label · no · title · emphasis · caption · ariaLabel · children (the inline SVG, viewBox-scaled, accent via currentColor)
EXAMPLE
LIVE

As it renders.

BEFORE · THE PATTERN WE SAWDIAGRAM · 01

Every project triggered a fresh RFQ. The same supplier kept getting hit.

PROJECT 01 · JANBOM142 partsRFQ→ Supplier A, B, CPROJECT 02 · FEBBOM98 partsRFQ→ Supplier A, B, DPROJECT 03 · MARBOM211 partsRFQ→ Supplier A, C, ESUPPLIER A3 quote requestsin 90 daysSAME PARTS.EACH TIME.

Result: supplier fatigue. Slower responses. Lower-quality quotes. Buyers spent more time chasing replies than making decisions.

CODE
COPY AND PASTE

How it is called.

JSX
import DiagramFrame, { INK, MONO } from '../components/DiagramFrame.jsx'

<DiagramFrame
  label="THE BOUNDARY · SOURCING AND RFQ"
  no="04"
  title="Not a pipeline."
  emphasis="The answer comes home."
  ariaLabel="Diagram: …"
  caption={<><strong className="font-semibold">Lead-in,</strong> then the rest.</>}
>
  <svg viewBox="0 0 900 340" width="100%" className="block h-auto min-w-[640px]" role="img">
    {/* inline SVG; accent via currentColor, ink hardcoded */}
  </svg>
</DiagramFrame>
RULES

What must stay true.

Every diagram sits in DiagramFrame; never rebuild the frame. The dashboard grammar diagram hardcodes three brand accents on purpose.