Stop reading AI agents' walls of text: render plan.md with Mermaid diagrams and WireMark UI prototypes
ievkz · reddit · 2026-10-22
A programmer tired of walls of Markdown from AI coding agents built a visual-first planning workflow:
- Problem: LLMs happily emit text, but humans must review and approve plans—reading prose to build a mental model is exhausting
- UI prototypes: after rejecting draw.io/Balsamiq (hand-written JSON) and PlantUML Salt (not UI-like), he adopted open-source WireMark—a concise DSL both humans and LLMs can write, rendering to SVG wireframes
- Diagrams: chose Mermaid over PlantUML—it's the de facto standard, natively supported in GitHub Markdown since 2022, and LLMs generate it by default
- Key step: adding rules to AGENTS.md/CLAUDE.md—WireMark for UI prototypes, Mermaid for explanatory diagrams; plan.md should prioritize prototypes and diagrams over prose; one Wireframe block per screen. Codex, Claude Code, and Pi then produced plan.md files full of clear diagrams and screen sketches
- Remaining gap solved: most viewers/IDEs don't render Wiremark/Mermaid in Markdown, so he open-sourced blueprint4llm: blueprint4llm plan.md --out=plan.html/pdf exports rendered docs, --serve runs a local preview server
Related event: Dev Replaces AI Agents' Markdown Walls with Diagrams and UI Sketches(2 posts)→
More from coding & agent
- 96.5% deliverability, 42.7% opens: why you can't vibe code a newsletter platform — marclou · 2026-10-22
- New Obsidian plugin turns notes app into an Eagle-style asset manager — jiayuan_jy · 2026-10-22
- One-press Hermes agent: open-source ConcoDispatch turns iPhone Action Button into an AI launcher — Teknium · 2026-10-22
- 6 workflows where decision model Jev cuts LLM bills up to 87% — femke_plantinga · 2026-10-22
- Scrawl: open-source Mac tool turns screen markup and voice into agent feedback, 680 stars — aronchick · 2026-10-22
- Hermes Agent shows the price on every approval, not just permission — Scobleizer · 2026-10-22