Skip to content

View on a desktop screen for a better experience.

Knap · data → .md

Graphs from a Knap template

Pipe a props object through a graph_* filter; Knap renders Markdown and these filters draw the official fence. No SVG. The Knap CLI does not load custom filters. Wire them in your app.

Template and the frames it produces

Same incident as the Comark landing. Here the source is a Knap template; the rendered side is the React graphs. Toggle to read the template that emitted the fences.

p95 crossed 800ms at 14:02. Rollback at 14:11.

[ NIGHT ]
  1. 14:02p95 crossed 800ms
  2. 14:11rolled back the cache flag
  3. 14:40write the postmortem

Same night, and the two days users felt it.

[ API ]

79%

Aug 14Aug 27

up slow· down

79 percent uptime over 14 days, Aug 14 to Aug 27

How the pieces fit

You own three files: templating stays in Knap, the graphs stay copied via shadcn if you also render React, and the filters are the only new piece.

Data
Pass plain JSON (or any variables Knap can resolve). The filter reads the typed value, not a schema this library invented.
Filter
Pipe the graph props through graph_timeline, graph_meter, and the rest. A string param is the title. Pass comark for a ::graph-* block.
Markdown
Output is the official fenced ASCII, the same drawing as the MDX tab. Obsidian, GitHub, and a README can open it. Graphs with no ASCII emit Comark YAML instead.

Where each format belongs

Knap is a generator. It writes the fence a README can paste, or the ::graph-* block a Comark app can render. It does not draw the React frame itself.

[ HOST ]
JSXASCIIComarkKnap
  • MDX / React
  • App .md file
  • README / GitHub
  • Data in, Markdown out
[ FILTER ]
  • same props as React
  • official fence, not homemade
  • comark param → ::graph-*
  • CLI loads graph filterswire createEngine
3 of 4 done

Install the filters

all.json already includes them; if the graphs are already in the repo, add graph-knap alone. Install knap yourself, then spread graphFilters into createEngine. Full wiring lives on the docs page.

Adapter

Knap