Visualization Standardsv4.3

Standardized visualization conventions and atomic motif catalog for intuitive representation of USG (Universal Semantic Graph)

Lena Code NodeGraph v3.0 text/HTML views

Generation

Summary of Distiller/HTML renderer outputs

Text USG

CHEF_FORCE_EXPLICIT=1 CHEF_IN=javascript CHEF_STAGE=distill \ +USG_SAMPLES=12 USG_FACETS=api,entities,flows,callgraph,state,dataflow,metrics \ +PIPE_WRITE_USG=1 npm run -s verify:pipeline:ts

HTML

npx tsx scripts/usg-html.ts <..._inter.lena> # → ..._usg.graph.html, ...night.html, ...light.html, ...solarized.html, ...mono.html

Interactions & Query

• Click: collapse/expand descendants
• Keyboard: left/right to toggle collapse
• Theme: ?theme=night|solarized|mono|light
• Focus: ?focus=α
• Trace: ?trace=β,δ,ζ

Core Principles

Basic design principles and usage purposes of Core Semantic Kernel visualization standards

Consistency

Consistent notation conventions with Greek letter IDs and structural symbols for intuitive tracking of mappings and reverse mappings

Universality

Same standards applied across various environments including editor panels, reports, terminal mode, and embedded widgets

Extensibility

Themeable color tokens and modular structure to support diverse user environments and accessibility requirements

NodeGraph Text/HTML

Summary of Lena Code's NodeGraph v3.0 spec.

HTML Structure

<div class="nodegraph THEME"> <div class="nodegraph-line" data-id="α" data-kind="branch" data-level="0">⊸ cond ...</div> <div class="nodegraph-line" data-id="β" data-kind="action" data-level="1">⊲ print "ok"</div> </div>

• .nodegraph THEME container
• .nodegraph-line + data-id/kind/level

Themes

• night · light · solarized · mono
• Common font/line-height: monospace, 12px, 1.4
• kind-specific palette defined in renderer CSS

Node ID & Labeling Rules

Systematic conventions for unique identification and representation of USG nodes

ID System

Basic ID: Greek lowercase (α, β, γ, ..., ω)
Extended ID: Using subscripts (α₁, β₁, γ₁, ...)
Nested ID: Derived notation (α.β.γ)
Stability: Hash-based stable ID recommended

Label Structure

Structure:

glyph · canonical label · ports: in|out

Example:

⊸ · branch · ports: cond|t|f

λ · apply · ports: func|args

≔ · let · ports: var|value

Symbol → Kind Mapping

Representative mapping in NodeGraph v3.0

λ → fn ⊕ → seq ⊸ → branch ⟦⟧ → read ⊲ → action ⟳ → loop ⌁ → io ◔ → async ≡ → copy ↵ → ret ≔ → declare ≝ → assign ⊙₊ → arith_add ⊙× → arith_mul ⋈> → cmp ⇢ → send ⇠ → recv ⛁ → resource ※ → generator ≋ → pattern 【 → meta … → text

Accessibility · i18n

• ASCII fallback: accompany every glyph with ASCII labels
• Screen reader: include node/role/ports in aria-label
• Keyboard: arrow navigation, Enter expand/collapse, ? help
• Color-blind friendly palette (contrast ≥ 4.5:1)

Edge Roles & Styles

Meaning and visual representation of edges connecting USG nodes

Role	Meaning	Style	Notes
control	Control Transfer	Solid 2px	Branch line color emphasis
data	Data Dependency	Solid 1px	Port name display
dep	Declaration/Definition Dependency	Dotted 1px	Type·binding reference
effect	I/O·State·Time	Wavy 1px	Region boundary crossing emphasis
exception	Exception Propagation	Dotted 2px(red)	try/catch/finally connection
lifetime	Lifetime·Ownership	Dotted 1px(purple)	Pin/unpin, borrow path

Symbol → Kind Mapping

Excerpt of mappings (see internal renderer for full list)

λ → fn
⊕ → seq
⊸ → branch
⟦⟧ → read
⊲ → action
⟳ → loop
⌁ → io
◔ → async
≡ → copy
↵ → ret

≔ → declare
≝ → assign
⊙₊/⊙× → arith_add/arith_mul
⋈> → cmp
⇢/⇠ → send/recv
⛁ → resource
※ → generator
≋ → pattern
【 → meta

Visual Encoding Tokens

Consistent visual representation through themeable color and shape tokens

Color Tokens

--c-control

--c-data

--c-func

--c-type

--c-exc

--c-conc

--c-mem

--c-io

--c-overlay-A

--c-overlay-B

--c-overlay-C

Shape Tokens

• Branch: Diamond
• Loop: Hexagon
• Function: Rounded Rectangle
• Region: Rounded Box
• I/O: Cylinder
• Type: Octagon

Atomic Motif Catalog

Preview of representative visual atomic motifs (versioned, not fixed)

Control & Flow

⊕SEQ - Sequential

⊸BRANCH - Conditional

⟳LOOP - Loop

∀ITER - Iteration

↵RET - Return

⇄YIELD - Yield

⏸AWAIT - Await

⊡WITH - Resource

Data & State (12개)

≔LET - Declaration

≝SET - Assignment

→GET - Access

⊞NEW - Construction

⟿CAST - Cast

⊕cAGG - Aggregate

≈COPY - Copy

↭MOVE - Move

Function & Abstraction (11개)

λDEF - Definition

⊗APPLY - Application

∘COMPOSE - Composition

℘RECUR - Recursion

※GEN - Generator

⩚CLOSE - Closure

Representative motifs (excerpt).

Layout Modes

Visualization layouts optimized for various purposes and environments

Layered DAG (Sugiyama)

Top-to-bottom layered structure for clear control flow representation. Cross-minimization algorithm applied.

Compact Tree

Left-to-right tree structure optimized for text-based output. ASCII art style support.

Radial

Circular expansion from central function. Suitable for overview and summary views.

Compact Line View Example

TEXT

1α: λmain() → ⊤
2├─ β: x ≔ ℤ
3├─ γ: x ≝ 42
4├─ δ: ⊸ branch(x>0, t, f)
5│  ├─ ε: ⊲ "positive"
6│  └─ ζ: ⊲ "negative"
7└─ η: ↵ ⊤

Text representation optimized for terminal environments and log output

Data Skeleton (gist)

Field meanings are shown below.

JSON

1{
2  "version": "usg-viz-v1",
3  "nodes": [
4    {
5      "id": "α",
6      "kind": "control.branch",
7      "glyph": "⊸",
8      "label": "branch",
9      "ports": { "in": ["cond"], "out": ["t", "f"] },
10      "meta": {
11        "origin": {"id": "src:…", "span": [12, 28]},
12        "typeHints": {"cond": "bool"},
13        "effectClass": null,
14        "regionId": null,
15        "notes": []
16      }
17    }
18  ],
19  "edges": [
20    {"from": "α", "out": "t", "to": "ε", "role": "control"},
21    {"from": "α", "out": "f", "to": "ζ", "role": "control"}
22  ],
23  "regions": [
24    {"id": "R1", "kind": "region.with", "label": "with(resource)", "nodes": ["..."]}
25  ],
26  "overlays": [
27    {"target": "β", "class": "B", "style": "translucent"},
28    {"target": "ζ", "class": "A", "style": "outline"}
29  ]
30}

Policy: This data skeleton is a gist; detailed constraints, engines, and layout rules are maintained internally.

Core Components

Relationship between visualization standards and other core components of Core Semantic Kernel

Universal Semantic Graph →Semantic Abstract Machine →Semantic Atoms →