Renderer-driven workflow prototype with lanes, anchored nodes, and orthogonal edges
Guided views
Explore this system
Step through curated paths without changing the source diagram.
Beat
Next
ReadyChapter 01 / 01
Guided chapter
Diagram guideExplore this system
Inspecting compiled semantics
E ExportT ThemeS Style0 Reset+ Zoom in- Zoom outEsc Close
Find a node
⌕/
No matching nodes
Semantic passport
Route probeChoose a start node
Pick two semantic nodes on the diagram
Choose the source, then the destination. Direction matters.
Semantic lensCompare system roles
Choose up to two semantic kinds. One reveals its real traffic; two compare only direct authored relationships.
Choose a kind to inspect its nodes and touching relationships.
Semantic radar
Building overview
Click nodeDrag to pan
Renderer Rules
• Lanes and columns determine node placement
• Edges attach to explicit node anchors
• Cross-lane paths use orthogonal routing
• Short adjacent links stay unlabeled
Workflow Semantics
• Approval is a first-class policy step
• Consent gates are visible in the main path
• External calls stay inside the tool lane
• Trace writes are separate from the hot path
Why It Matters
• This is closer to a diagram_type renderer
• The graph can be edited without SVG surgery
• Layout rules can be tested and improved
• A future IR can reuse this shape directly
Workflow diagram • Built with Archify • Create yours ↗ • Hover to trace • R route • Click to focus • +/− zoom • M radar • [/] views • P play story • T theme • E export