LixScript

Beta

A declarative DSL for programmatically creating diagrams in LixSketch. Define shapes, connections, and layouts with full control over every property.

7 shape types

Auto-attached arrows

Relative positioning

LLM-optimized spec

Open the AI modal > Code tab, write LixScript, and place on canvas.

// A simple flowchart
$blue = #4A90D9
$green = #2ECC71

rect start at 100, 50 size 160x55 {
  stroke: $blue
  label: "Start"
}

rect end at 100, 170 size 160x55 {
  stroke: $green
  label: "End"
}

arrow a1 from start.bottom to end.top {
  stroke: #e0e0e0
}

Tip: All shapes are automatically wrapped in a frame when placed on canvas. Variables ($name = value) let you reuse colors and dimensions.

Shapes

Arrows & Lines

Styling Reference

A compact, token-efficient version of the LixScript specification optimized for LLM system prompts. Paste this into any LLM's system prompt to enable it to generate LixScript diagrams from natural language descriptions.

~2.5k tokens


[INSTRUCTIONS — MUST FOLLOW]
Output ONLY LixScript Syntax. No markdown, no explanation.
Space apart shapes generously, use relative positioning, connect all shapes. Use $color vars. No dark colors.
Nothing should be crumpled or overlapping. Use curves for non-straight arrows. Keep IDs consistent for edits. Return COMPLETE code.

Syntax: rect/circle <id> at <x>, <y> size <w>x<h> {props} | arrow/line <id> from <src> to <tgt> {props} | text <id> at <x>, <y> {content:"t"} | $var = val | //comment

PROPS: stroke fill fillStyle(none|solid|hachure|cross-hatch|dots) roughness(0-3) style(solid|dashed|dotted) label labelColor labelFontSize rotation | Arrow: curve(straight|curved|elbow) curveAmount head headLength
SIDES: .top .bottom .left .right .center | REFS: .x .y .right .bottom .centerX .centerY .width .height

LAYOUT (CRITICAL — shapes MUST NOT overlap):
- Rect min 200x65, circle min 110x110. Scale up ~20px per extra word in label.
- Vertical gap: 150px between shape edges. Horizontal gap: 250px between shape edges.
- Use relative pos: "rect b at a.x, a.bottom + 150 size 200x65"
- Start first shape at (200, 60). Curve backward/diagonal arrows. Dash optional/error flows.
- Bright strokes only (#4A90D9 blue, #2ECC71 green, #E74C3C red, #F39C12 amber, #9B59B6 purple, #1ABC9C teal, #e0e0e0 gray). No dark colors.

EXAMPLE:
$b = #4A90D9
$g = #2ECC71
$r = #E74C3C
$w = #e0e0e0
rect login at 200, 60 size 200x65 {
  stroke: $b
  label: "Login Page"
}
rect validate at login.x, login.bottom + 150 size 260x70 {
  stroke: $b
  label: "Validate Credentials"
}
circle decision at validate.x, validate.bottom + 150 size 110x110 {
  stroke: $r
  label: "Valid?"
}
rect dash at decision.x, decision.bottom + 150 size 200x65 {
  stroke: $g
  label: "Dashboard"
}
rect err at decision.right + 250, decision.y size 200x65 {
  stroke: $r
  label: "Show Error"
}
arrow a1 from login.bottom to validate.top {
  stroke: $w
  label: "Submit"
}
arrow a2 from validate.bottom to decision.top {
  stroke: $w
}
arrow a3 from decision.bottom to dash.top {
  stroke: $g
  label: "Yes"
}
arrow a4 from decision.right to err.left {
  stroke: $r
  curve: curved
  label: "No"
}
arrow a5 from err.top to login.right {
  stroke: $r
  curve: curved
  style: dashed
  label: "Retry"
}

Usage with any LLM

1. Copy the spec above into your LLM system prompt
2. Ask: "Generate a LixScript diagram for [description]"
3. Paste the output into LixSketch AI modal > Code tab
4. Preview and place on canvas

Complete Example

// User authentication flow
$blue = #4A90D9
$green = #2ECC71
$red = #E74C3C
$gray = #e0e0e0

rect login at 200, 50 size 170x55 {
  stroke: $blue
  label: "Login Page"
}

rect validate at 200, 170 size 170x55 {
  stroke: $blue
  label: "Validate Creds"
}

circle check at 200, 310 size 80x80 {
  stroke: $red
  label: "Valid?"
}

rect dashboard at 200, 440 size 170x55 {
  stroke: $green
  label: "Dashboard"
}

rect error at 430, 310 size 140x55 {
  stroke: $red
  label: "Show Error"
}

// Connections
arrow a1 from login.bottom to validate.top {
  stroke: $gray
  label: "Submit"
}

arrow a2 from validate.bottom to check.top {
  stroke: $gray
}

arrow a3 from check.bottom to dashboard.top {
  stroke: $green
  label: "Yes"
}

arrow a4 from check.right to error.left {
  stroke: $red
  label: "No"
}

arrow a5 from error.top to login.right {
  stroke: $red
  curve: curved
  style: dashed
  label: "Retry"
}