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.
01data
jsonprops object
events[]timeline
days[]uptime
titlestring param
02filter
graph_timelinecreateEngine
graph_uptimesame api as react
03emit
fenced asciireadme / github / linear
::graph-*pass comark · no ascii
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.
- 14:02p95 crossed 800ms
- 14:11rolled back the cache flag
- 14:40write the postmortem
same night, and the two days users felt it.
█ up▒ slow· down
79 percent uptime over 14 days, Aug 14 to Aug 27how 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. passcomarkfor 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.
JSXASCIIComarkKnap
- MDX / React✓–✓–
- App .md file––✓✓
- README / GitHub–✓–✓
- Data in, Markdown out–––✓
- same props as react
- official fence, not homemade
- comark param → ::graph-*
- cli loads graph filterswire createEngine