the-niresh Storytelling SVG
Most generated diagrams fail the same way: they arrange a list in boxes. The content changes, the rhetoric never does. This skill is the fix.
Before the story, the frame
Story is the hard half, but a batch dies on the easy half first. The frame is fixed and written down once, never decided per image:
- One size per platform. X is 1080x1350, LinkedIn is 1200x1500, both 4:5, both from one authored geometry. A canvas that grows to fit its figure ships a different aspect ratio every time; one real batch shipped 46 of them across 94 images and every single one looked fine on its own.
- One type scale, and the body is not monospace. Mono is for code, paths and the footer. When everything is mono the card reads as terminal output and no amount of good structure rescues it.
- Icons, not spelled-out nouns. Vendor real path data (lucide for concepts, simple-icons for brands). A figure whose only marks are rectangles and words is a table, whatever shape you arranged it in.
- No emoji in the footer. The footer is a signature. Emoji live in the post text, or inside the frame as an actor doing something.
In this repo that lives in social-media-automator/IMAGE-SOP.md. Elsewhere,
write the equivalent down before drawing the second image, not after the
ninety-fourth.
The test, before anything else
Delete every word from your figure. Does the shape still say something?
If the answer is no, you drew a table and called it a diagram. Redraw it.
A second test, cheaper: can the reader be wrong? A figure that nobody could disagree with is decoration. A figure that makes a claim can be argued with, and an argument is the only thing that gets reposted.
The failure to avoid
Symptom: your figure vocabulary collapses into three shapes.
7 fig_stack <- a list, stacked
7 fig_compare <- a list, in two columns
5 fig_flow <- a list, with arrows
5 fig_bars <- a list, with lengths
That was 24 of 32 real figures in one batch. All four are the same rhetorical move: here are some labelled boxes. Not one of them survives the delete-the- words test.
Layout templates are not a visual language. They are a way of avoiding one.
Seven shapes that actually carry a story
Reach for these BEFORE reaching for a stack or a compare.
| Shape | Use when | Why it works |
|---|---|---|
| Unit / isotype | a ratio out of a countable whole | 130 squares with 11 lit is a shape you see before you read. A bar turns it back into a number you have to parse |
| True-area scale | one thing dwarfs another | 400 vs 5 as bar lengths reads "long and stub". As circle areas it reads "eighty times" |
| Three-plus-one | three things you have, one you do not | asymmetry is the story. Three outlined boxes and one filled block argues; four equal tiles does not |
| The break | something worked, then stopped | one line, running, with the exact point of failure annotated. Not two columns of before and after |
| Ghost / absence | the missing piece IS the point | draw it dashed and empty. Negative space carries meaning that a label cannot |
| The annotated moment | one detail decides everything | one big visual, one callout arrow, one sentence. "This line is the whole bug" |
| Turn in three panels | a setup that subverts | panels 1 and 2 establish a pattern, panel 3 breaks it |
Rules
- Asymmetry over symmetry. Equal-sized things read as a set, and a set has no protagonist. Make one element bigger, filled, off-grid, or alone.
- Show scale, do not state it. Any time you would write "80x" or "most" or "hardly any", draw it instead.
- Give it an antagonist. The strongest figures have a culprit: the second client that skipped the limiter, the flag that never resets. Neutral figures are forgettable.
- Repetition is a feeling. 130 squares feels like a lot. The number 130 does not.
- One volume per image, and vary it across a set. If every figure in a batch has the same weight, the batch reads as wallpaper. Some should shout.
- Emoji as actors, not badges. An emoji sitting in a corner is decoration. An emoji inside the frame doing something is a character.
- Never let a label carry the load. If the caption explains the shape, the shape failed.
Reference figures are allowed, and this is the real limit
Not every image should be a narrative. A protocol comparison, a decision table, a list of four settled principles - these are reference figures and forcing a story onto them makes them worse.
The honest rule:
- Flagship post of the day: story figure. Always. This is the one that travels.
- Teach and useful posts: reference figures are fine. Clarity beats drama when someone is going to screenshot it and act on it.
- One-line clash and philosophy posts: usually no image, or one that is almost entirely blank. A short post with a heavy diagram looks like a post that did not trust itself.
So the target is not "every figure is a story". It is: every day has at least one figure a stranger would repost, and no figure is a table pretending.
Coverage
An account with no audience cannot afford text-only posts. Aim for 60-70% of posts carrying an image, weighted to flagship and teach. Below about a third, distribution does the rest of the work for you, and it will not.
Before you ship a figure
- Words deleted: does the shape still mean anything?
- Is there a protagonist, or is everything the same size?
- Did I state a magnitude I could have drawn?
- Would a stranger be able to disagree with it?
- Is this the fourth stack in a row? Pick a different shape.
- Does the note explain the picture? Then fix the picture.
On motion
Video out-reaches static images, and it costs a toolchain: Remotion needs Node, headless Chromium and ffmpeg, and renders take minutes where an SVG takes milliseconds. Animated SVG is not a shortcut - feeds rasterise it.
So: get static to 70% first, it is nearly free. Then trial motion on the flagship post only, one a week, and measure it before spending more. A batch of mediocre videos is worse than a batch of good stills.