KLIC / BLOCKS

Diagram blocks

Compare working examples for basic paths, routing, parallel joins and state transitions.

Which connection fits?

Situation	Working example	Decision criterion
Simple directional relationship	Straight connection	Compare detours when paths cross.
Routes around cards or restricted zones	Obstacle-aware orthogonal routing	Do not draw through obstacles when routing fails.
Parallel execution and synchronization	Parallel execution and join	Distinguish conditional branches from an all-tasks join.
Guard conditions and state transitions	Guarded state transitions	Describe the active state and transition guards.
Transient inspection, selection and changes	Hover response and recent changes	Do not record hover as a committed change.

Working examples 28

Hover response and recent changes

Inspects relationships on hover or focus and tracks applied changes in one panel.

flow-connector-interaction

Retry and timeout

Labels normal, retry and timeout paths explicitly.

flow-connector-retry

Guarded state transitions

Shows idle, running and complete states with transition guards.

flow-connector-state

Parallel execution and join

Shows parallel tasks between separate fork and join junctions.

flow-connector-parallel

Decision and merge

Separates approved and rejected branches before a shared endpoint.

flow-connector-decision

Directional tapered connection

Emphasizes direction with a filled taper ending in an arrow tip.

flow-connector-taper

Offset relationship labels

Moves labels together with their parallel relationship paths.

flow-connector-labels

Nested feedback lanes

Separates nested return paths into independent lanes outside the main flow.

flow-connector-feedback

Hyperedge junction

Connects multiple inputs and outputs through an explicit shared junction.

flow-connector-hyperedge

Port fanout routing

Fans out distinct source ports to fixed target ports.

flow-connector-ports

Rounded detour lanes

Rounds the corners of parallel detour lanes.

flow-connector-rounded

Bidirectional connection

Separates request and response into individually directed paths.

flow-connector-bidirectional

Dashed connection

Distinguishes a pending or asynchronous relationship with dashes and text.

flow-connector-dashed

Step connection

Connects nodes on different levels using a stepped path.

flow-connector-step

Bezier curve

Uses a curve with controlled endpoint tangents.

flow-connector-curve

Elbow connection

Connects two ports with horizontal and vertical segments.

flow-connector-elbow

Straight connection

Connects two nodes with a direct line and a one-way arrow.

flow-connector-straight

Directed radial exchange ribbons

Allocates node arcs and ribbon intervals from a directed exchange matrix. Target arrowheads show direction, and each relationship exposes its quantity.

flow-connector-radial

Conserved flow ribbons

Distributes 120 sample items per minute among three outputs using integer quantities, with the same width scale at both ends of every ribbon.

flow-connector-ribbons

Detected crossing bridges

Calculates the actual intersection of two adjustable paths and inserts a semicircular bridge into only one path. Crossings remain distinct from connections.

flow-connector-bridges

Broadcast bus backbone

Connects one publisher and selected subscribers through an actual shared backbone and branch junctions, with a separate no-subscriber state.

flow-connector-bus

Compatible-group edge bundling

Interpolates control points within compatible event and command groups. Select an individual relationship to trace its full path.

flow-connector-bundle

Container gateways

Provides aligned perpendicular gateways across two container boundaries and separate internal approach lanes.

flow-connector-containers

Self-loops and feedback lanes

Computes two separate self-loops and an external feedback lane to distinguish polling, retries and compensation.

flow-connector-loops

Multiple relations and return paths

Distinguishes multiple requests and responses between two services through symmetric curves and separate labels. Inspect direction and relationship IDs individually.

flow-connector-multiedge

Metro parallel strands

Separates four relationships in a shared corridor with fixed order and spacing, using 45-degree entry and exit segments.

flow-connector-metro

Obstacle-aware orthogonal routing

Routes around obstacles using an orthogonal visibility graph and a direction-aware shortest path with clearance. Blocked endpoints produce an explicit failure.

flow-connector-obstacle

Service flow diagram

KLIC SVG diagram with node selection, relationship highlighting, failure simulation and zoom controls.

diagram-service-flow

View shared design criteria

Shared design criteria

Policy revision: 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97

Canonical policy: https://design.klic.co.kr/api/v1/design-system.json

Read the same criteria and revision in API, CLI, MCP and WebMCP designSystem responses and the bundled KLIC-DESIGN-SYSTEM.json. Item contracts link through item.design.system.

Dimension	Token responsibility	Structure and behavior responsibility
Size and proportion	Control sizes, icons and content width	Component recipes and the DOM ensure min-height, padding, wrapping and actual hit areas.
Typography	Registered font families, role sizes and weights	Supported recipes define line height, tracking, wrapping and responsive conditions without assuming unregistered token types.
Color and contrast	Role colors for actions, selection, text, borders and status	Labels, icons and state attributes convey meaning; measure actual composited-surface contrast separately.
Layout and alignment	Registered spatial roles, including maximum content and panel widths	DOM reading order, layout transitions, scroll ownership and Portal structure
Spacing and grouping	Internal gaps, padding, group spacing and approved density mappings	Maintain label, fieldset, legend and describedby relationships; window width alone does not change density.
Surface and depth	Surface colors, radii, borders and supported color/dimension material leaves	Blur and shadow recipes, stacking, auxiliary-panel versus modal behavior and opaque fallbacks
Interaction and feedback	Visual roles for focus, selection, progress, success, warnings and errors	Keyboard operation, focus movement, asynchronous transitions, execution blocking, input preservation and recovery

Only Primitive owns literals. Preserve adjacent Brand→Primitive, Semantic→Brand and Component→Semantic references.

Distinguish token definitions, structural conditions in DOM/CSS recipes and compiled final literals.

Keep motion recipes in a read-only catalog separate from component and block installation items, with browser search and details in the existing KLIC Interface Library #motion view. The read API, CLI, MCP and WebMCP use one canonical catalog. The scope is all 884 user-supplied source patterns in 67 categories, grouped within the existing KLIC category/item navigation. Remove the previous simplified 280-item catalog and its dedicated routes and aliases; do not retain them as compatibility entries. Preserve source id + pattern identity, source engine, choreography, timing, paths, layers, SVG/inline/WAAPI alpha, and original notices including Copyright © 2026 acc0mplish. All rights reserved. and the supplied license. Never label this source material KLIC-authored. Adapt appearance through existing four-layer KLIC token paths for color, fonts, surfaces, borders, radius and spacing. Canvas uses the same palette and font tokens; scope demo CSS to each item. Use one owned runtime for previews and JavaScript/React delivery; do not claim CSS alone reproduces Canvas playback. KLIC adaptations use the blue/navy/neutral palette and reduced-motion, replay and cleanup contracts; verify real playback in light/dark and mobile before release. The npm package remains separate from the homepage: describe candidate exports only after checking the published manifest, and do not infer release contents from current source.

Allowed preset scope

A preset combines approved settings of an existing API. It is not a fifth token layer.

Use an explicit allowlist of size, variant, density, layout and other settings supported by the actual component API.

Labels, descriptions and business data
Value, selection, validation and request state
Event handlers, recovery actions and permissions
Raw style values, unregistered CSS variables and arbitrary token overrides

Component defaults → selected preset → permitted explicit settings. Pass business data, state and permissions separately.

Validate allowed keys, enums and combinations; diagnose unknown values. Distinguish type declarations from actual DOM and behavior verification.

Conflict resolution order

Preserve information, operability and accessibility first: Preserve essential information, state meaning, input, focus and operation paths. Dimension numbers do not override other required contracts.
Reflow structure and reading order: Adjust wrapping, columns, action groups and panel arrangement first. Use local scrolling only for areas whose meaning requires two dimensions.
Adjust spacing and surfaces within approved bounds: Respect the selected density and text scale while adjusting spacing and decoration within approved recipes. Limited space alone does not justify automatic compact mode or smaller text.
Record remaining constraints and verification: If defaults cannot resolve a constraint, record scope, alternatives, impact, FR/AT references and actual verification. Do not skip token layers or conceal failed checks with exception approval.

sources/checks identify supporting references, not certification. Record actual product-environment results in the existing FR/AT evidence.

Application and verification

Read the shared criteria, item DESIGN.md and actual source first. Assign token, DOM, CSS recipe and state responsibilities for each rule, then apply the conditions your product needs.

Compare revision in the policy and item contract. release identifies a registry publication; do not combine paginated results from different publications.

Use the latest CLI and local registry and restart stdio sessions. Reload the page to register WebMCP again. source prints raw code. Read DESIGN.md for source bundles or README.md for theme kits together with KLIC-DESIGN-SYSTEM.json.

Selective adoption of references

Treat external documents and drafts as proposals. Check current KLIC problems, implementation and contracts, adopt only necessary rules, and record scope and reasons for deferral or rejection.

Do not present product names, example APIs or references from a draft as facts about KLIC. Connect adopted rules to actual tokens, DOM, CSS recipes, state handling and verification evidence.

Scope to review together when making changes

Use a reported problem to assess impact across related usage paths. Changing only the named screen or tool does not complete that review.

Implementation sources, tokens, components, types and schemas
DOCS, web guides, developer documentation and examples
MCP, CLI, WebMCP and API descriptions, inputs and responses
AI prompts, llms.txt, source exports and theme exports
Regression checks, builds, production publication and actual responses

After changing the canonical policy, regenerate affected guides, examples, tools, prompts and exports together and verify a matching revision. Explain unaffected paths and distinguish observed results from conditions that remain unverified.

designSystem JSON · Full architecture guide · Change and verification guide