Blog authoring rule — every post must teach with a visual

The rule: every article in The BaZi Guide MUST include at least one visual example (a real chart, card grid, cycle, timeline, or flow) — not just prose.

The test, applied to every post:

Would a reader understand a BaZi chart — or this concept — better after reading it? If the answer relies only on words, add a visual.

BaZi is inherently visual (cards, pillars, elements, cycles). If we explain the Four Pillars without showing four pillars, or the element cycle without showing the cycle, the post fails this rule. Show the thing.

How to add a visual

Visuals are drawn in code (accurate, on-brand SVG/HTML — not AI images). Drop a token on its own line in the markdown and the build renders the diagram:

<figure class="diagram"><figcaption>An example chart — the eight characters across four pillars</figcaption><div class="chart-grid"><div class="pillar"><span class="pillar-label">Year</span><span class="stem c-wood">甲</span><span class="branch c-water">子</span><span class="pillar-sub">Yang Wood · Rat</span></div><div class="pillar"><span class="pillar-label">Month</span><span class="stem c-fire">丙</span><span class="branch c-wood">寅</span><span class="pillar-sub">Yang Fire · Tiger</span></div><div class="pillar pillar-day"><span class="pillar-tag">Day Master</span><span class="pillar-label">Day</span><span class="stem c-earth">戊</span><span class="branch c-fire">午</span><span class="pillar-sub">Yang Earth · Horse</span></div><div class="pillar"><span class="pillar-label">Hour</span><span class="stem c-water">壬</span><span class="branch c-earth">戌</span><span class="pillar-sub">Yang Water · Dog</span></div></div></figure>

Available diagrams (frontend/lib/guideDiagrams.ts — add more as needed):

Token	Shows
chart-sample	An example Four Pillars chart — the 8 characters, Day Master highlighted
four-pillars-domains	What each pillar governs (roots / career / self / children)
ten-day-masters	The 10 Day Masters — 5 elements × Yang/Yin
five-elements-cycle	Generating (生) + Controlling (克) cycles
reading-steps	The order a chart is read (1→5)

(Need a visual that doesn't exist yet — luck-pillar timeline, Ten Gods wheel, two-chart compatibility, a strength gauge? Add it to guideDiagrams.ts and a matching style block in app/globals.css, then reference its token.)

Feature image ≠ in-content visual

The feature_image (bazi1.jpg…) is a decorative hero. It does NOT satisfy this rule. Every post needs an explanatory visual in the body, at the moment a concept is introduced.

Rollout status

Adding visuals to all 23 in batches of 5, verifying each batch renders before moving on. Batch 1: what-is-bazi, how-to-read, four-pillars, day-master, five-elements.