| name | slack-chart |
| description | Draw a comparison or a flow diagram as an image in the Slack thread. |
slack-chart
Slack renders no diagram syntax, so a shape — boxes and arrows, a comparison of magnitudes — ends up as a code block that wraps in a thread pane, and a wrapped diagram stops being a diagram. This uploads it as an image instead.
Tables are NOT here. Slack renders GitHub-flavoured tables natively now, so write rows and columns as a markdown table in the reply. Drawn as an image they came out as overlapping text nobody could read.
bun features/slack/skills/slack-chart/scripts/index.ts '{
"kind": "bars",
"title": "PR queue",
"rows": [
{ "label": "conflicts", "value": 20 },
{ "label": "red CI", "value": 9 },
{ "label": "ready", "value": 5 }
]
}'
bun features/slack/skills/slack-chart/scripts/index.ts '{
"kind": "flow",
"title": "Why the run failed",
"nodes": [
{ "id": "a", "kind": "start", "label": "Turn starts" },
{ "id": "b", "label": "Work reaches green", "detail": "503/503 tests" },
{ "id": "c", "kind": "decision", "label": "Lint gate" },
{ "id": "d", "kind": "error", "label": "Timed out mid-refactor" },
{ "id": "e", "kind": "end", "label": "Commit + PR" }
],
"edges": [
{ "from": "a", "to": "b" },
{ "from": "b", "to": "c" },
{ "from": "c", "to": "d", "label": "blocked" },
{ "from": "c", "to": "e", "label": "passes" }
]
}'
flow lays out top to bottom: a node sits one row below the deepest thing pointing at it, and branches out of the same node sit side by side. kind colours the box — start, step (the default), decision, end, error — so a failure arm reads at a glance.
When it is worth it
Reach for it whenever the answer has a shape — and reach for it without being asked, because a technical answer with a diagram in it is almost always the better answer.
An explanation is a shape. How a request flows through the system, why a run failed, what depends on what, which step ate the time — written out, all of those become a paragraph the reader has to rebuild the diagram from in their head. flow draws the boxes and arrows, which is what a post-mortem or a request path actually is.
A comparison of magnitudes is a shape too: written as a sentence it makes a paragraph of numbers nobody can read, and a code block wraps in a thread pane and loses its columns.
- flow — boxes and arrows, with branches. The one for a technical answer: a post-mortem, a request path, a decision that went two ways.
- bars — comparing more than about four things, where "which is biggest" is the point.
A sentence with six inline code spans in it is a table you have not written yet — a markdown one, in the reply.
Not otherwise. Three numbers belong in the sentence, and a chart of them is slower to read than the sentence. A chart is never the whole reply — say what it shows in a line, and let the image carry the shape.
It costs a file upload, so do not reach for it on a question that a paragraph already answers.
A flow is a shape, not a list
Four boxes to a row. A fan-out from one node to nine is refused: a row is centred across a fixed-width card, so nine siblings overlap into an unreadable smear. If what you have is one parent and many children, that is a markdown table with the parent as its heading — Slack renders those natively.
No HTML in labels. Labels are escaped before they reach the SVG, so <br/> arrives as those four characters rather than a line break. Write shorter labels instead.
