lini 0.22.0

Pretty diagrams, charts, and technical drawings from plain text, with fine-grained control. Compiles to clean, themeable SVG.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// Paint [SPEC 6, 10, 11.3]: gradients (two-stop auto-angle, multi-stop,
// explicit angle, radial, gradient-on-stroke, oklch stops), `gap-fill`
// painting the gutters between children (thickness = gap, per-axis), and the
// built-in light/dark theming — every palette var here flips with the OS or a
// `data-theme` toggle. Pick a fixed palette with --theme:
//   lini samples/paint.lini --theme dark --bake-vars -o dark.svg
//   lini theme dark > my-theme.css      // a starting point for your own
{
  gap: 26; padding: 26; font-size: 13;

  |card::box| { width: 240; height: 70; stroke: none; color: white; }
}

"Paint — gradients, gutters, themes" { font-size: 18; font-weight: bold; }

|row#r1| { gap: 16; } [
  |card| "gradient(--teal, --blue)" { fill: gradient(--teal, --blue); }
  |card| "three stops, auto-angled" { fill: gradient(--rose, --amber, --sky); }
]

|row#r2| { gap: 16; } [
  |card| "linear-gradient(90, …)" {
    fill: linear-gradient(90, --blue, --purple);
  }
  |card| "radial-gradient(…)" { fill: radial-gradient(--purple, --rose); }
]

|row#r3| { gap: 16; } [
  |card| "gradient on stroke" {
    fill: --gray-wash; color: --gray-ink; stroke: gradient(--teal, --purple); stroke-width: 3;
  }
  |card| "oklch stops" {
    fill: gradient(oklch(0.72, 0.16, 25), oklch(0.72, 0.16, 285));
  }
]

|row#bands| { gap: 12; gap-fill: --sky-soft; } [
  |box#a| "one" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
  |box#b| "two" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
  |box#c| "three" { fill: --sky-wash; stroke: --sky-ink; color: --sky-ink; }
]

|grid#week| { columns: 80, 80, 80; gap: 8 0; gap-fill: --teal-ink; } [
  "Mon" "Tue" "Wed"
  "Thu" "Fri" "Sat"
]

|group#service| { gap: 12; } [
  |caption| "Service"
  |box#web| [
    "Web"
    |badge| "v2"
  ]
  |box#api| "API"
  |cyl#db| "Postgres"

  web -> api
  api -> db "query"
]