schema: ai-cjm-component-contract/v1
id: diagram
version: 1.0.0
status: stable
owner: AI CJM Design
purpose: Показывает связи системы, контура или рабочего процесса.
use_when:
- Связи между тремя и более сущностями труднее понять линейно.
evidence:
- id: production-style
  url: https://aicjm.ru/edu/styles.css?v=20260811-edu-canon
  locator: .contour, .contour__diagram, .diagram-frame, .diagram-grid
  supports:
  - anatomy
  - variant:system-map
  - size:default
  - state:default
- id: production-dom
  url: https://aicjm.ru/edu/
  locator: section.contour .contour__diagram .diagram-frame
  supports:
  - approved-example
  - content
anatomy:
- id: title
  required: true
  role: Что показывает схема.
- id: node
  required: true
  role: Именованная сущность.
- id: edge
  required: true
  role: Связь с направлением или подписью.
- id: legend
  required: false
  role: Объяснение кодирования.
- id: text-alternative
  required: true
  role: Линейный эквивалент.
variants:
- id: system-map
  status: stable
  description: Контур сущностей.
  evidence_refs:
  - production-style
- id: process-map
  status: candidate
  description: Поток работы.
- id: decorative
  status: deprecated
  description: Декоративная схема без объясняющей задачи запрещена.
sizes:
- id: default
  status: stable
  description: Размер определяется содержимым и перечисленными semantic/component tokens; raw dimensions запрещены.
  evidence_refs:
  - production-style
states:
  default:
    status: stable
    basis: observed
    description: default is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  hover:
    status: not-applicable
    basis: not-applicable
    description: hover is not owned by diagram.
  focus-visible:
    status: not-applicable
    basis: not-applicable
    description: focus-visible is not owned by diagram.
  active:
    status: not-applicable
    basis: not-applicable
    description: active is not owned by diagram.
  selected:
    status: not-applicable
    basis: not-applicable
    description: selected is not owned by diagram.
  open:
    status: not-applicable
    basis: not-applicable
    description: open is not owned by diagram.
  disabled:
    status: not-applicable
    basis: not-applicable
    description: disabled is not owned by diagram.
  loading:
    status: not-applicable
    basis: not-applicable
    description: loading is not owned by diagram.
  success:
    status: not-applicable
    basis: not-applicable
    description: success is not owned by diagram.
  error:
    status: not-applicable
    basis: not-applicable
    description: error is not owned by diagram.
  empty:
    status: not-applicable
    basis: not-applicable
    description: empty is not owned by diagram.
responsive:
  mode: side-by-side-to-linear-equivalent
  reading_order: DOM order remains authoritative in every mode.
  rules:
  - Keep explanatory copy before diagram in reading order.
  - At narrow mode replace a hidden or clipped diagram with its linear text equivalent.
  - Never scale labels below body-small typography to preserve the whole canvas.
accessibility:
  pattern: labelled-figure-with-text-equivalent
  semantics:
  - Use figure/figcaption and provide an adjacent linear text equivalent for nodes and relationships.
  keyboard:
  - Static diagrams own no keyboard behavior; interactive nodes require a separate approved component.
  focus:
  - Never make decorative nodes focusable.
  motion:
  - Meaning survives without path drawing, parallax or animated connectors.
tokens:
- surface.subtle
- surface.card
- text.primary
- text.secondary
- action.primary
- border.default
- radius.surface
content:
  required:
  - Именованные nodes.
  - Подписанные связи.
  - Text alternative.
  constraints:
  - Цвет не кодирует связь один.
  - Смысл читается без motion.
do:
- Делать схему похожей на рабочий интерфейс.
dont:
- Не использовать AI-мозг, неон или бессмысленные связи.
examples:
  approved:
    status: stable
    description: Компонент diagram в указанном scoped production locator.
    evidence: https://aicjm.ru/edu/
  prohibited:
    description: Не использовать AI-мозг, неон или бессмысленные связи.
acceptance:
- id: diagram-1
  criterion: Все nodes присутствуют в text alternative.
  method: manual
- id: diagram-2
  criterion: Mobile сохраняет связи или заменяет их списком.
  method: manual