ReactFlow Diagram Creator

Generate .rfd.json files that encode meaning in shape, position, and connection — consumed by a ReactFlow-based viewer (pma-viewer) with a predefined catalog of custom node types.

Keep this entry file small. Load only the references needed for the current diagram.

Always-On Rules

1. Isomorphism first: node layout and edge topology must mirror the concept's structure. If removing all labels still communicates the idea, the design is right.
2. Use predefined node types only. Pull every node type from references/node-types.md. Never invent new types unless the user asks and the viewer supports them.
3. Use predefined edge types only. Pull every edge type from references/edges.md. Avoid raw default unless no preset fits.
4. Colors come from references/colors.md. Node styling is driven by the preset; override only when semantics require it.
5. Grouping via parent-child, not by drawing a container rectangle. Use parentNode + extent: "parent" on child nodes and a group type parent.
6. Every relationship needs an edge. Proximity alone is not a connection.
7. No local render: the skill emits .rfd.json only. Rendering and export happen in pma-viewer (SPA). Quality must be enforced at JSON level — see references/validation.md.
8. Build large diagrams section-by-section. Append nodes/edges per edit, namespace IDs by section prefix (ingest__, process__, deliver__) to keep cross-section references readable.

Core Workflow