LixScript is the declarative language behind LixSketch's AI-powered diagram generation. It was designed with one goal: make it easy for both humans and LLMs to describe visual layouts.
Why a Custom DSL?
We evaluated existing options:
- ●Mermaid — great for flowcharts but limited in positioning control
- ●PlantUML — powerful but verbose and complex syntax
- ●D2 — modern but requires a separate compiler
None of them gave us what we needed: fine-grained control over every pixel while keeping the syntax readable enough for an LLM to generate reliably.
Design Principles
- 1.Positional — every shape has explicit x,y coordinates and dimensions
- 2.Referential — shapes can reference other shapes' positions (
node1.right + 40) - 3.Minimal — properties have sensible defaults; you only specify what you need
- 4.Token-efficient — the LLM spec is ~2.5k tokens, small enough to fit in any system prompt
The Parser
LixScript parsing happens in three stages:
Stage 1: Tokenize
The source is split into blocks. Each block starts with a shape type keyword (rect, circle, arrow, text, line, freehand, frame) and includes properties in curly braces.
Variables ($name = value) are expanded inline during this stage.
Stage 2: Resolve References
Shapes are processed in declaration order. When a shape references another shape's position (e.g., node1.right + 40), the referenced shape must already be defined. The resolver calculates:
- ●
.x,.y— top-left corner - ●
.right,.bottom— computed edges - ●
.centerX,.centerY— midpoints - ●
.width,.height— dimensions
Stage 3: Render
Each resolved shape is instantiated as a real LixSketch shape object (Rectangle, Circle, Arrow, etc.) and added to the canvas. Arrows auto-attach to their source and target shapes.
LLM Integration
The compact LLM spec fits in a system prompt and teaches any LLM to generate valid LixScript. The key insight: LLMs are great at generating structured text with clear rules, and LixScript's syntax is intentionally close to CSS/JSON in feel.
What's Next
We're working on:
- ●Auto-layout — specify relationships without explicit coordinates
- ●Loops —
repeat 5 { ... }for repetitive structures - ●Templates — reusable shape groups
- ●Import — compose diagrams from multiple files