From f6d974c22c4db01e4eddb889459b86353917af5a Mon Sep 17 00:00:00 2001 From: Andrey Avtomonov Date: Wed, 20 May 2026 10:47:04 +0200 Subject: [PATCH] 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. --- README.md | 3 + docs-site/components/product-mechanics.tsx | 40 ++-- .../images/ingestion-flow-transparent.svg | 217 +++++++++--------- 3 files changed, 131 insertions(+), 129 deletions(-) diff --git a/README.md b/README.md index ec6aecb2..c2f015ad 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs-site/components/product-mechanics.tsx b/docs-site/components/product-mechanics.tsx index 45baaa31..393798d1 100644 --- a/docs-site/components/product-mechanics.tsx +++ b/docs-site/components/product-mechanics.tsx @@ -43,16 +43,16 @@ type OutputNode = Node; 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) { className="overflow-hidden rounded-md border border-fd-border bg-fd-card px-3.5 py-3 shadow-sm" > -

+

{data.title}

-

+

{data.body}

-
+
{data.items.map((item) => ( {item} @@ -275,14 +275,14 @@ function StageNodeView({ data }: NodeProps) { 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]" > - + {data.index}
-

+

{data.title}

-

+

{data.body}

@@ -315,25 +315,25 @@ function OutputNodeView({ data }: NodeProps) { className="!opacity-0" />

{data.path}

-

+

{data.title}

-
+
{data.tags.map((tag) => ( {tag} ))}
-

+

{data.body}

@@ -541,8 +541,8 @@ export function ProductMechanics() {
.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; } @@ -37,65 +37,65 @@ - Databases - Schemas, columns, keys, - row counts, and query - history. - - - PostgreSQL - - Snowflake - - BigQuery - - SQLite + Databases + Schemas, columns, keys, + row counts, and query + history. + + + PostgreSQL + + Snowflake + + BigQuery + + SQLite - BI tools - Dashboards, questions, - explores, usage, and trusted - examples. - - - Metabase - - Looker + BI tools + Dashboards, questions, + explores, usage, and trusted + examples. + + + Metabase + + Looker - Modeling code - Existing metrics, dimensions, - models, joins, and entities. - - - dbt - - LookML - - MetricFlow + Modeling code + Existing metrics, dimensions, + models, joins, and entities. + + + dbt + + LookML + + MetricFlow - Docs and notes - Policies, caveats, team - definitions, and analyst - context. - + Docs and notes + Policies, caveats, team + definitions, and analyst + context. + - Notion - - Any text + Notion + + Any text @@ -105,11 +105,11 @@ - - - - - + + + + + @@ -122,50 +122,49 @@ - - - - + + + + - - - - 1 - Source adapters - Read each configured system in - its native shape. + + + + 1 + Source adapters + Read each configured system in + its native shape. - - - - 2 - Context builder - Turn source evidence into - proposed context updates. + + + + 2 + Context builder + Turn source evidence into + proposed context updates. - - - - 3 - Reconciliation - Merge new evidence with the - context that already exists. + + + + 3 + Reconciliation + Merge new evidence with the + context that already exists. - - - - 4 - Validation - Check references and - semantics before agents rely on - them. + + + + 4 + Validation + Check references and semantics + before agents rely on them. @@ -173,39 +172,39 @@ - wiki/*.md - Wiki - - - free-form - - auto-maintained + wiki/*.md + Wiki + + + free-form + + auto-maintained - Definitions, caveats, policies, analyst notes, and - business language that agents can search. + Definitions, caveats, policies, analyst notes, and + business language that agents can search. - semantic-layer/*.yaml - Semantic layer - - - structured - - executable - - auto-maintained + semantic-layer/*.yaml + Semantic layer + + + structured + + executable + + auto-maintained - Metrics, joins, tables, dimensions, filters, and - segments that KTX can validate and compile into - SQL. + Metrics, joins, tables, dimensions, filters, and + segments that KTX can validate and compile into + SQL. - - - references + + + references