CTO Field Notes Diagrams

Create branded diagrams for CTO Field Notes blog posts using a fixed HTML/SVG template with swappable content.

Template Location

Base template: wiki/produce/hermes/blogs/drafts/templates/ctofn-diagram-base.html

Fixed Elements (never change)

These stay identical across all CTOFN diagrams:

• Paper background: cream (#faf8f4) with ruled lines and paper texture filter
• Spiral binding: 11 circles on the left edge
• Red margin line at x=80
• Header: "CTO FIELD NOTES" in a box, "observe • wonder • grow" tagline in blue
• Footer: ctofieldnotes.com (bottom right, blue)
• Fonts: Patrick Hand (labels), Caveat (quotes, subtitles)

Swappable Elements

1. Title (HTML title tag)

Replace {{TITLE}} with the post title.

2. Content (SVG between markers)

Replace {{CONTENT}} with your diagram SVG. Content area: x=80 to x=1180, y=100 to y=580.

3. Quote (bottom)

Replace {{QUOTE}} with the post's key quote. Format: Quote text — Author Name

Color Palette

Token	Hex	Usage
Ink	#1a1a2e	Node outlines, labels, header text
Blue	#2563eb	Accent: arrows, tagline, quote marks, URL
Muted	#555	Subtitles, descriptions
Gray	#888	Secondary text

Available Diagram Types

Flywheel (4-node cycle)

Four circles in diamond pattern with curved arrows. Use for reinforcing loops.

Comparison (two columns)

Two side-by-side boxes with labels. Use for trade-offs, before/after, pros/cons.

Process (horizontal flow)

Sequential steps with arrows. Use for step-by-step frameworks.

Pyramid (stacked layers)

Three stacked shapes, widest at bottom. Use for hierarchies, priorities.

Workflow

1. Read the base template: templates/ctofn-diagram-base.html

2. Copy to wiki/produce/hermes/blogs/drafts/{post-slug}/diagram-{name}.html

3. Replace {{TITLE}}, {{QUOTE}}, and {{CONTENT}}

4. Render in browser, screenshot for verification

5. Export to PNG via Playwright: python tools/export_png.py diagram.html diagram.png 2

Reference Example

See wiki/produce/hermes/blogs/drafts/engineer-your-luck/notebook-luck-flywheel.html for a complete working example (flywheel type).

Pitfalls

1. Filter on arrows: Always put filter="url(#pencil)" on the arrow group, not individual arrows

2. Text centering: Use text-anchor="middle" and position text at the circle's center x,y

3. Font loading: Google Fonts load asynchronously — screenshot may show fallback fonts on first render

4. SVG viewBox: Fixed at 1200x675. Content must fit within x=80 to x=1180, y=100 to y=580