docs(diagram): enlarge ingestion-flow text and tighten badge widths

Bumps font sizes across the in-app React Flow diagram and the README's
SVG so block titles, stage names, body copy, and chip labels are easier
to read. Widens stage cards and updates the SVG layout so every stage
body wraps to two lines, and resizes every badge rect to fit its text
with even 12px padding on both sides (notably the PostgreSQL chip).

Also includes a pre-existing README addition noting that KTX runs with
the user's own LLM keys or a Claude Pro/Max subscription.
This commit is contained in:
Andrey Avtomonov 2026-05-20 10:47:04 +02:00
parent 2c9a58bb56
commit f6d974c22c
3 changed files with 131 additions and 129 deletions

View file

@ -24,6 +24,9 @@ business knowledge it builds and maintains for you.
Works with PostgreSQL, Snowflake, BigQuery, ClickHouse, MySQL, SQL Server, and
SQLite. Integrates with dbt, MetricFlow, LookML, Looker, Metabase, and Notion.
Runs with your own LLM API keys or a Claude
Pro/Max subscription - no extra usage billing from KTX.
## Why KTX
General-purpose agents struggle on data tasks. They re-explore your warehouse

View file

@ -43,16 +43,16 @@ type OutputNode = Node<OutputNodeData, "output">;
type FlowNode = SourceNode | StageNode | OutputNode;
const SOURCE_W = 210;
const SOURCE_H = 200;
const STAGE_W = 280;
const SOURCE_H = 220;
const STAGE_W = 360;
const STAGE_H = 120;
const OUTPUT_W = 340;
const OUTPUT_H = 232;
const OUTPUT_H = 248;
const ROW_SOURCES_Y = 80;
const ROW_STAGE_START_Y = 360;
const ROW_STAGE_START_Y = 380;
const STAGE_GAP = 30;
const ROW_OUTPUTS_Y = 1000;
const ROW_OUTPUTS_Y = 1030;
const STAGE_CENTER_X = 460;
const STAGE_X = STAGE_CENTER_X - STAGE_W / 2;
@ -207,7 +207,7 @@ const refsEdge = {
labelBgPadding: [6, 3] as [number, number],
labelBgBorderRadius: 4,
labelStyle: {
fontSize: 13,
fontSize: 15,
fontWeight: 500,
fill: "var(--color-fd-muted-foreground)",
},
@ -247,17 +247,17 @@ function SourceNodeView({ data }: NodeProps<SourceNode>) {
className="overflow-hidden rounded-md border border-fd-border bg-fd-card px-3.5 py-3 shadow-sm"
>
<Handle type="target" position={Position.Top} className="!opacity-0" />
<p className="text-[16px] font-semibold leading-6 text-fd-foreground">
<p className="text-[19px] font-semibold leading-7 text-fd-foreground">
{data.title}
</p>
<p className="mt-1 line-clamp-3 text-[13px] leading-5 text-fd-muted-foreground">
<p className="mt-1.5 line-clamp-3 text-[15px] leading-6 text-fd-muted-foreground">
{data.body}
</p>
<div className="mt-2 flex flex-wrap gap-1.5">
<div className="mt-2.5 flex flex-wrap gap-1.5">
{data.items.map((item) => (
<span
key={item}
className="rounded border border-fd-border bg-fd-background px-1.5 py-0.5 text-[12px] leading-5 text-fd-muted-foreground"
className="rounded border border-fd-border bg-fd-background px-2 py-0.5 text-[13px] leading-5 text-fd-muted-foreground"
>
{item}
</span>
@ -275,14 +275,14 @@ function StageNodeView({ data }: NodeProps<StageNode>) {
className="flex items-center gap-3.5 rounded-md border border-cyan-200/20 bg-[#0f1f23] px-4 py-3.5 text-white shadow-sm dark:bg-[#0b181b]"
>
<Handle type="target" position={Position.Top} className="!opacity-0" />
<span className="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-cyan-300/95 font-mono text-sm font-semibold text-[#0b1c20]">
<span className="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-cyan-300/95 font-mono text-base font-semibold text-[#0b1c20]">
{data.index}
</span>
<div className="min-w-0">
<p className="text-[16px] font-semibold leading-6 text-white">
<p className="text-[19px] font-semibold leading-7 text-white">
{data.title}
</p>
<p className="mt-1 line-clamp-3 text-[13px] leading-5 text-cyan-50/75">
<p className="mt-1.5 line-clamp-3 text-[15px] leading-6 text-cyan-50/75">
{data.body}
</p>
</div>
@ -315,25 +315,25 @@ function OutputNodeView({ data }: NodeProps<OutputNode>) {
className="!opacity-0"
/>
<p
className="font-mono text-[13px] font-semibold tracking-tight"
className="font-mono text-[15px] font-semibold tracking-tight"
style={{ color: data.accent }}
>
{data.path}
</p>
<p className="mt-1.5 text-[16px] font-semibold leading-6 text-fd-foreground">
<p className="mt-1.5 text-[19px] font-semibold leading-7 text-fd-foreground">
{data.title}
</p>
<div className="mt-1.5 flex flex-nowrap gap-1">
<div className="mt-2 flex flex-nowrap gap-1">
{data.tags.map((tag) => (
<span
key={tag}
className="whitespace-nowrap rounded border border-fd-border bg-fd-background px-1.5 py-0.5 text-[12px] leading-5 text-fd-muted-foreground"
className="whitespace-nowrap rounded border border-fd-border bg-fd-background px-2 py-0.5 text-[13px] leading-5 text-fd-muted-foreground"
>
{tag}
</span>
))}
</div>
<p className="mt-2 line-clamp-3 text-[13px] leading-5 text-fd-muted-foreground">
<p className="mt-2.5 line-clamp-3 text-[15px] leading-6 text-fd-muted-foreground">
{data.body}
</p>
</div>
@ -541,8 +541,8 @@ export function ProductMechanics() {
<div
className="mechanics-canvas bg-fd-background"
style={{
height: "min(1180px, 165vw)",
minHeight: 680,
height: "min(1240px, 170vw)",
minHeight: 720,
}}
>
<ReactFlow

View file

@ -21,13 +21,13 @@
<style>
.card { fill: #ffffff; stroke: #e2e8f0; stroke-width: 1.4; filter: url(#card-shadow); }
.stage { fill: #0b1f23; stroke: #17343a; stroke-width: 1.2; filter: url(#dark-shadow); }
.title { fill: #24272d; font: 700 20px Inter, Arial, sans-serif; }
.body { fill: #666b73; font: 500 16px Inter, Arial, sans-serif; }
.tag { fill: #6b7280; font: 500 14px Inter, Arial, sans-serif; }
.mono { font: 700 16px "SFMono-Regular", Consolas, monospace; }
.stage-title { fill: #f8fafc; font: 700 20px Inter, Arial, sans-serif; }
.stage-body { fill: #b8c6ca; font: 500 16px Inter, Arial, sans-serif; }
.index { fill: #07313a; font: 700 18px Inter, Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.title { fill: #24272d; font: 700 28px Inter, Arial, sans-serif; }
.body { fill: #666b73; font: 500 18px Inter, Arial, sans-serif; }
.tag { fill: #6b7280; font: 500 16px Inter, Arial, sans-serif; }
.mono { font: 700 20px "SFMono-Regular", Consolas, monospace; }
.stage-title { fill: #f8fafc; font: 700 28px Inter, Arial, sans-serif; }
.stage-body { fill: #b8c6ca; font: 500 20px Inter, Arial, sans-serif; }
.index { fill: #07313a; font: 700 22px Inter, Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.edge { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash { fill: none; stroke: #64748b; stroke-width: 1.8; stroke-dasharray: 5 8; stroke-linecap: round; }
</style>
@ -37,65 +37,65 @@
<g transform="translate(24 39)">
<rect class="card" x="0" y="0" width="298" height="285" rx="4"/>
<rect x="0" y="0" width="298" height="4" rx="2" fill="#3b82f6"/>
<text class="title" x="22" y="45">Databases</text>
<text class="body" x="22" y="82">Schemas, columns, keys,</text>
<text class="body" x="22" y="112">row counts, and query</text>
<text class="body" x="22" y="142">history.</text>
<g transform="translate(22 174)">
<rect x="0" y="0" width="116" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">PostgreSQL</text>
<rect x="124" y="0" width="104" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="136" y="23">Snowflake</text>
<rect x="0" y="46" width="94" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="69">BigQuery</text>
<rect x="102" y="46" width="72" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="114" y="69">SQLite</text>
<text class="title" x="22" y="52">Databases</text>
<text class="body" x="22" y="92">Schemas, columns, keys,</text>
<text class="body" x="22" y="120">row counts, and query</text>
<text class="body" x="22" y="148">history.</text>
<g transform="translate(22 180)">
<rect x="0" y="0" width="112" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="24">PostgreSQL</text>
<rect x="120" y="0" width="100" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="132" y="24">Snowflake</text>
<rect x="0" y="46" width="92" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="70">BigQuery</text>
<rect x="100" y="46" width="74" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="112" y="70">SQLite</text>
</g>
</g>
<g transform="translate(358 39)">
<rect class="card" x="0" y="0" width="298" height="285" rx="4"/>
<rect x="0" y="0" width="298" height="4" rx="2" fill="#f97316"/>
<text class="title" x="22" y="45">BI tools</text>
<text class="body" x="22" y="82">Dashboards, questions,</text>
<text class="body" x="22" y="112">explores, usage, and trusted</text>
<text class="body" x="22" y="142">examples.</text>
<g transform="translate(22 174)">
<rect x="0" y="0" width="99" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">Metabase</text>
<rect x="109" y="0" width="75" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="121" y="23">Looker</text>
<text class="title" x="22" y="52">BI tools</text>
<text class="body" x="22" y="92">Dashboards, questions,</text>
<text class="body" x="22" y="120">explores, usage, and trusted</text>
<text class="body" x="22" y="148">examples.</text>
<g transform="translate(22 180)">
<rect x="0" y="0" width="96" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="24">Metabase</text>
<rect x="104" y="0" width="74" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="116" y="24">Looker</text>
</g>
</g>
<g transform="translate(692 39)">
<rect class="card" x="0" y="0" width="298" height="285" rx="4"/>
<rect x="0" y="0" width="298" height="4" rx="2" fill="#f59e0b"/>
<text class="title" x="22" y="45">Modeling code</text>
<text class="body" x="22" y="82">Existing metrics, dimensions,</text>
<text class="body" x="22" y="112">models, joins, and entities.</text>
<g transform="translate(22 146)">
<rect x="0" y="0" width="47" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">dbt</text>
<rect x="57" y="0" width="83" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="69" y="23">LookML</text>
<rect x="0" y="46" width="109" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="69">MetricFlow</text>
<text class="title" x="22" y="52">Modeling code</text>
<text class="body" x="22" y="92">Existing metrics, dimensions,</text>
<text class="body" x="22" y="120">models, joins, and entities.</text>
<g transform="translate(22 152)">
<rect x="0" y="0" width="48" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="24">dbt</text>
<rect x="56" y="0" width="82" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="68" y="24">LookML</text>
<rect x="0" y="46" width="102" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="70">MetricFlow</text>
</g>
</g>
<g transform="translate(1026 39)">
<rect class="card" x="0" y="0" width="298" height="285" rx="4"/>
<rect x="0" y="0" width="298" height="4" rx="2" fill="#10b981"/>
<text class="title" x="22" y="45">Docs and notes</text>
<text class="body" x="22" y="82">Policies, caveats, team</text>
<text class="body" x="22" y="112">definitions, and analyst</text>
<text class="body" x="22" y="142">context.</text>
<g transform="translate(22 174)">
<text class="title" x="22" y="52">Docs and notes</text>
<text class="body" x="22" y="92">Policies, caveats, team</text>
<text class="body" x="22" y="120">definitions, and analyst</text>
<text class="body" x="22" y="148">context.</text>
<g transform="translate(22 180)">
<rect x="0" y="0" width="72" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">Notion</text>
<rect x="82" y="0" width="87" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="94" y="23">Any text</text>
<text class="tag" x="12" y="24">Notion</text>
<rect x="80" y="0" width="84" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="92" y="24">Any text</text>
</g>
</g>
</g>
@ -105,11 +105,11 @@
<path class="edge" d="M841 324 V380 Q841 394 827 394 H507"/>
<path class="edge" d="M1175 324 V380 Q1175 394 1161 394 H673 Q673 394 673 408 V433" marker-end="url(#arrow)"/>
<path class="edge" d="M507 394 H673"/>
<path class="edge" d="M673 607 V651" marker-end="url(#arrow)"/>
<path class="edge" d="M673 823 V866" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1038 V1081" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1254 V1305 Q673 1322 656 1322 H305 Q291 1322 291 1336 V1364" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1254 V1305 Q673 1322 690 1322 H1043 Q1057 1322 1057 1336 V1364" marker-end="url(#arrow)"/>
<path class="edge" d="M673 618 V651" marker-end="url(#arrow)"/>
<path class="edge" d="M673 833 V866" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1048 V1081" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1262 V1310 Q673 1325 656 1325 H305 Q291 1325 291 1339 V1364" marker-end="url(#arrow)"/>
<path class="edge" d="M673 1262 V1310 Q673 1325 690 1325 H1043 Q1057 1325 1057 1339 V1364" marker-end="url(#arrow)"/>
<path class="dash" d="M546 1523 H800"/>
<path d="M546 1523 l9 -6 v12 z" fill="#64748b"/>
<path d="M800 1523 l-9 -6 v12 z" fill="#64748b"/>
@ -122,50 +122,49 @@
<circle cx="632" cy="394" r="6" fill="#f97316" opacity="0.9"/>
<circle cx="830" cy="394" r="18" fill="#10b981" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="830" cy="394" r="6" fill="#10b981" opacity="0.9"/>
<circle cx="673" cy="625" r="17" fill="#10b981" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="673" cy="625" r="6" fill="#10b981" opacity="0.9"/>
<circle cx="673" cy="1054" r="17" fill="#f59e0b" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="673" cy="1054" r="6" fill="#f59e0b" opacity="0.9"/>
<circle cx="673" cy="635" r="17" fill="#10b981" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="673" cy="635" r="6" fill="#10b981" opacity="0.9"/>
<circle cx="673" cy="1065" r="17" fill="#f59e0b" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="673" cy="1065" r="6" fill="#f59e0b" opacity="0.9"/>
<circle cx="573" cy="1322" r="17" fill="#3b82f6" opacity="0.18" filter="url(#glow-blue)"/>
<circle cx="573" cy="1322" r="6" fill="#3b82f6" opacity="0.9"/>
</g>
<g id="stages">
<g transform="translate(474 438)">
<rect class="stage" x="0" y="0" width="400" height="169" rx="4"/>
<circle cx="48" cy="84" r="23" fill="#55dced"/>
<text class="index" x="48" y="84">1</text>
<text class="stage-title" x="90" y="64">Source adapters</text>
<text class="stage-body" x="90" y="100">Read each configured system in</text>
<text class="stage-body" x="90" y="130">its native shape.</text>
<g transform="translate(464 438)">
<rect class="stage" x="0" y="0" width="420" height="180" rx="4"/>
<circle cx="52" cy="90" r="26" fill="#55dced"/>
<text class="index" x="52" y="90">1</text>
<text class="stage-title" x="98" y="72">Source adapters</text>
<text class="stage-body" x="98" y="110">Read each configured system in</text>
<text class="stage-body" x="98" y="140">its native shape.</text>
</g>
<g transform="translate(474 653)">
<rect class="stage" x="0" y="0" width="400" height="169" rx="4"/>
<circle cx="48" cy="84" r="23" fill="#55dced"/>
<text class="index" x="48" y="84">2</text>
<text class="stage-title" x="90" y="64">Context builder</text>
<text class="stage-body" x="90" y="100">Turn source evidence into</text>
<text class="stage-body" x="90" y="130">proposed context updates.</text>
<g transform="translate(464 653)">
<rect class="stage" x="0" y="0" width="420" height="180" rx="4"/>
<circle cx="52" cy="90" r="26" fill="#55dced"/>
<text class="index" x="52" y="90">2</text>
<text class="stage-title" x="98" y="72">Context builder</text>
<text class="stage-body" x="98" y="110">Turn source evidence into</text>
<text class="stage-body" x="98" y="140">proposed context updates.</text>
</g>
<g transform="translate(474 868)">
<rect class="stage" x="0" y="0" width="400" height="169" rx="4"/>
<circle cx="48" cy="84" r="23" fill="#55dced"/>
<text class="index" x="48" y="84">3</text>
<text class="stage-title" x="90" y="64">Reconciliation</text>
<text class="stage-body" x="90" y="100">Merge new evidence with the</text>
<text class="stage-body" x="90" y="130">context that already exists.</text>
<g transform="translate(464 868)">
<rect class="stage" x="0" y="0" width="420" height="180" rx="4"/>
<circle cx="52" cy="90" r="26" fill="#55dced"/>
<text class="index" x="52" y="90">3</text>
<text class="stage-title" x="98" y="72">Reconciliation</text>
<text class="stage-body" x="98" y="110">Merge new evidence with the</text>
<text class="stage-body" x="98" y="140">context that already exists.</text>
</g>
<g transform="translate(474 1082)">
<rect class="stage" x="0" y="0" width="400" height="172" rx="4"/>
<circle cx="48" cy="86" r="23" fill="#55dced"/>
<text class="index" x="48" y="86">4</text>
<text class="stage-title" x="90" y="63">Validation</text>
<text class="stage-body" x="90" y="99">Check references and</text>
<text class="stage-body" x="90" y="129">semantics before agents rely on</text>
<text class="stage-body" x="90" y="159">them.</text>
<g transform="translate(464 1082)">
<rect class="stage" x="0" y="0" width="420" height="180" rx="4"/>
<circle cx="52" cy="90" r="26" fill="#55dced"/>
<text class="index" x="52" y="90">4</text>
<text class="stage-title" x="98" y="72">Validation</text>
<text class="stage-body" x="98" y="110">Check references and semantics</text>
<text class="stage-body" x="98" y="140">before agents rely on them.</text>
</g>
</g>
@ -173,39 +172,39 @@
<g transform="translate(60 1373)">
<rect class="card" x="0" y="0" width="485" height="329" rx="4"/>
<rect x="0" y="0" width="485" height="4" rx="2" fill="#10b981"/>
<text class="mono" x="24" y="47" fill="#10b981">wiki/*.md</text>
<text class="title" x="24" y="92">Wiki</text>
<g transform="translate(24 116)">
<rect x="0" y="0" width="92" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">free-form</text>
<rect x="102" y="0" width="150" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="114" y="23">auto-maintained</text>
<text class="mono" x="24" y="52" fill="#10b981">wiki/*.md</text>
<text class="title" x="24" y="100">Wiki</text>
<g transform="translate(24 122)">
<rect x="0" y="0" width="90" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="24">free-form</text>
<rect x="98" y="0" width="140" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="110" y="24">auto-maintained</text>
</g>
<text class="body" x="24" y="184">Definitions, caveats, policies, analyst notes, and</text>
<text class="body" x="24" y="214">business language that agents can search.</text>
<text class="body" x="24" y="194">Definitions, caveats, policies, analyst notes, and</text>
<text class="body" x="24" y="222">business language that agents can search.</text>
</g>
<g transform="translate(803 1373)">
<rect class="card" x="0" y="0" width="485" height="329" rx="4"/>
<rect x="0" y="0" width="485" height="4" rx="2" fill="#3b82f6"/>
<text class="mono" x="24" y="47" fill="#3b82f6">semantic-layer/*.yaml</text>
<text class="title" x="24" y="92">Semantic layer</text>
<g transform="translate(24 116)">
<rect x="0" y="0" width="100" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="23">structured</text>
<rect x="110" y="0" width="108" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="122" y="23">executable</text>
<rect x="228" y="0" width="150" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="240" y="23">auto-maintained</text>
<text class="mono" x="24" y="52" fill="#3b82f6">semantic-layer/*.yaml</text>
<text class="title" x="24" y="100">Semantic layer</text>
<g transform="translate(24 122)">
<rect x="0" y="0" width="96" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="12" y="24">structured</text>
<rect x="104" y="0" width="104" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="116" y="24">executable</text>
<rect x="216" y="0" width="140" height="36" rx="4" fill="#fbfaf8" stroke="#e5e1dc"/>
<text class="tag" x="228" y="24">auto-maintained</text>
</g>
<text class="body" x="24" y="184">Metrics, joins, tables, dimensions, filters, and</text>
<text class="body" x="24" y="214">segments that KTX can validate and compile into</text>
<text class="body" x="24" y="244">SQL.</text>
<text class="body" x="24" y="194">Metrics, joins, tables, dimensions, filters, and</text>
<text class="body" x="24" y="222">segments that KTX can validate and compile into</text>
<text class="body" x="24" y="250">SQL.</text>
</g>
<g transform="translate(618 1505)">
<rect x="0" y="0" width="111" height="36" rx="4" fill="#ffffff" stroke="#e5e1dc"/>
<text class="tag" x="15" y="23">references</text>
<g transform="translate(622 1505)">
<rect x="0" y="0" width="102" height="36" rx="4" fill="#ffffff" stroke="#e5e1dc"/>
<text class="tag" x="13" y="24">references</text>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After