跳到正文
misoto22 design

图示

DataflowFigure 数据流图

一条管线:数据从哪来、经过了什么、最后落到谁手里。

来自@misoto22/design/diagrams

什么时候用它

结构上跟架构图很像,读的却是另一个问题。classification 单独占一个标签,因为做治理审查的人找的正是那一项。

示例

default

Event pipeline

What is in the arrow matters more than the arrow.
Event pipeline4 elements and 3 relationships. What is in the arrow matters more than the arrow.eventsWeb SDKbrowsereventsMobileiOS / AndroidPII guardConsent gatepolicy filtercuratedWarehouseanalytics tables

4 elements and 3 relationships. What is in the arrow matters more than the arrow.

  • Web SDK (frontend) — browser
  • Mobile (frontend) — iOS / Android
  • Consent gate (security) — policy filter
  • Warehouse (database) — analytics tables
  • Web SDKConsent gate: clickstream — user events
  • MobileConsent gate: app events — device events
  • Consent gateWarehouse: accepted — no PII
Key
  • CLIENT
  • POLICY
  • DATA

说明

一条管线:数据从哪来、经过了什么、最后落到谁手里。

结构上跟架构图很像,读的却完全是另一个问题——所以它是一个独立的渲染器而不是一个预设。架构图读的是「谁跟谁说话」。数据流图读的是「这根箭头装的是什么」——正是这个问题,让 classification 在标签下面单独拿到一枚等宽小标,而不是被揉进措辞里。clickstream / PII touchclickstream 是两个不同的事实,而做治理审查的人找的是后面那个。

阶段印成顶部一条线上的列标题。它们是这张图的坐标轴:一个节点的 stage 就是它在管线上的位置,读者应该靠往上看、而不是靠追箭头,来回答「这走到哪一步了」。

属性

DataflowFigure props
属性类型默认值说明
spec必填DataflowSpec

同时接受 FigureChrome 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 一条流的 classification 会并进它的摘要行,所以「clickstream — PII touch」能传达给看不到那枚标签的人。