Skip to content
Get started
← KLICKLIC / DIAGRAMS

Start with the meaning of a connection

Understand a workflow and its state changes. Compare connections with inspection, conditions and change history.

Build a brief for this screen ↗

Working examples and design guidance · not an integrated backend product.

Workflows & diagrams · static capture of an actual example
Static capture of an actual block · sample data
START WITH WORKING EXAMPLES

Start with these building blocks.

03

Lead routing flow ↗

A Korean React Flow canvas with a demo.request webhook, a company-size branch for more than 200 employees, Clearbit lookup and HubSpot deal nodes, animated SVG data packets, a bottom-right minimap, and an 81% zoom bar.

DESIGN.md ↓Source plan ↗

Design with these principles.

  • Explain a relationship with direction and a label.
  • Distinguish hover highlighting from a committed change.
  • Make branch conditions and active state inspectable with a keyboard.

Keep these boundaries clear.

  • Do not rely on color or motion alone for faults, selection or state.
  • Service names on example nodes are not proof of a real integration.

Production data and external connections require separate work.

YOUR NEXT STEP

Found your screen?
Make the brief your own.

Open your AI design brief ↗

Explore other starting points.