# Master Prompt: UML State Diagram Recreation

Recreate the diagrams from the latest downloaded Visual Paradigm UML state PDF
as editable draw.io XML and rendered SVG.

Use the most recent PDF in `~/Downloads` as source material. Convert the PDF
pages to PNG, inspect the pages that contain diagrams, and recreate the visual
content as closely as possible.

When no source PDF, screenshot, or design reference exists, create a diagram
contract before drawing: purpose, audience, diagram type, node inventory,
container/group inventory, relationship inventory, labels, annotations, expected
reading flow, and planned connector source/target/anchor points.

Pay attention to:

- element spacing and relative position.
- container width and height after real text is placed.
- connector routing, bend points, and post-render adjustment against the source
  reference.
- line avoidance so connectors do not run over important labels or containers.
- arrows terminating at the intended connection edge, not deep inside shapes.
- endpoint distance from source to target, so every connector visibly touches
  both the origin and destination edges.
- source-to-target distance validation: for each connector, confirm the line
  starts at the visual boundary of the source element and ends at the visual
  boundary of the intended target element.
- connector intent validation: if a label such as `Radio`, `CD`, `on`, or `off`
  implies a specific target state, the arrow must reach that state instead of
  stopping at the parent container.
- connector label avoidance: route arrows so they do not cover state labels or
  transition labels unless the source diagram explicitly does so.
- label boundary clearance: after rendering, verify that every label has visual
  clearance from container borders, connector lines, and arrowheads. Labels must
  not sit directly on a shape boundary.
- annotation target clarity: every annotation arrow must have an explicit visual
  target, and annotation text/arrows must not obscure the element, line, or label
  they describe.
- concrete visual regression checklist: convert observed diagram issues into
  explicit examples under the existing endpoint, z-order, label-clearance,
  annotation-target, and layout-simplification rules instead of duplicating the
  concepts.
- element ordering and z-index: draw containers and states before their
  connectors, then draw connectors above the connected elements so arrowheads
  and line endpoints remain visible at the target boundary. A connector must not
  disappear behind the element it is intended to connect.
- connection point aesthetics: choose source and target anchor points that
  minimize unnecessary bends and line travel. Prefer side midpoints or the
  nearest clean boundary point when that produces fewer orthogonal turns than
  starting from the top or bottom edge.
- orthogonal connector aesthetics: avoid diagonal connectors unless the source
  diagram explicitly requires them. Prefer horizontal/vertical segments with
  controlled bend points.
- line crossing treatment: when two lines must cross, use a visible line jump or
  bridge on the line that visually passes over the other line; in draw.io,
  prefer arc-style jumps such as `jumpStyle=arc`.
- layout simplification before bend acceptance: before accepting a connector
  bend, evaluate whether moving the source or target element slightly can remove
  the bend while preserving the diagram's semantic relationship and visual
  balance.
- editable/rendered equivalence: keep the draw.io XML source and rendered SVG
  geometrically equivalent. Any moved element, connector, label, or annotation in
  the SVG must have a corresponding editable cell or edge in the draw.io source.
- source-free quality loop: when no reference exists, validate the first render
  against the pre-declared diagram contract, not intuition.
- text and shape rotation: preserve vertical, horizontal, or diagonal text
  orientation from the source. In draw.io, use explicit degree-based rotation
  styles such as `rotation=270` or `textRotation=-90` when the source resembles
  Lucid-style positive or negative axis rotation.
- fill, border, text, and annotation colors.
- rounded corners, border weight, dashed lines, and region separators.
- typography, label placement, and text wrapping.
- final resizing and visual balance pass after the diagram is assembled and
  rendered.

Produce:

- `docs/diagrams/state-uml-recreated.drawio`
- `docs/diagrams/state-uml-recreated.svg`

Validate:

- XML validity for both draw.io and SVG artifacts.
- SVG render through a browser screenshot.
- Visual endpoint QA for every connector in the rendered screenshot.
- Visual z-order QA for every connector; no arrowhead or connector endpoint may
  be hidden behind the element it connects.
- Visual anchor-point QA for every connector; source and target points should be
  chosen for the shortest readable orthogonal route with the fewest bend points.
- Visual diagonal/crossing QA; connectors should be orthogonal when practical
  and unavoidable line crossings should have a visible jump/bridge.
- Visual layout simplification QA; if a connector bends, check whether a modest
  element repositioning can make the route straighter and clearer.
- Editable-source QA; compare draw.io XML against the SVG so the source artifact
  can reproduce the same geometry after editing.
- Annotation QA; for every red annotation, verify the target element or line is
  clear and the arrowhead visibly lands on it.
- Checklist QA; for known difficult annotations such as Shallow History State,
  Transition, Triggered Action, Exit action, Action in state, and guard labels,
  verify the exact target, clearance, and connector route explicitly.
- Source-free QA; when generated without a reference, verify every rendered node,
  connector, label, annotation, anchor side, and bend count against the diagram
  contract before delivery.
- No whitespace errors in the repository diff.

Current source PDF:

- `/Users/polux/Downloads/Dominar los diagramas de estado en UML_ Una guía completa - Visual Paradigm Guides Spanish.pdf`

Identified source pages:

- Page 6: concurrent state diagram.
- Page 7 top: shallow history state diagram.
- Page 7 bottom: entry/exit action diagram.