<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ten Wang</title>
    <description>The latest articles on DEV Community by Ten Wang (@ten_wang_455d2b3e3803151e).</description>
    <link>https://dev.to/ten_wang_455d2b3e3803151e</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4064256%2Fbd760480-44fb-42e2-8101-1b4ad4450ea8.jpg</url>
      <title>DEV Community: Ten Wang</title>
      <link>https://dev.to/ten_wang_455d2b3e3803151e</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ten_wang_455d2b3e3803151e"/>
    <language>en</language>
    <item>
      <title>Stop rolling dice: a gated pipeline for AI-generated architecture diagrams</title>
      <dc:creator>Ten Wang</dc:creator>
      <pubDate>Tue, 15 Sep 2026 09:46:30 +0000</pubDate>
      <link>https://dev.to/ten_wang_455d2b3e3803151e/stop-rolling-dice-a-gated-pipeline-for-ai-generated-architecture-diagrams-4l5</link>
      <guid>https://dev.to/ten_wang_455d2b3e3803151e/stop-rolling-dice-a-gated-pipeline-for-ai-generated-architecture-diagrams-4l5</guid>
      <description>&lt;p&gt;&lt;strong&gt;TL;DR — AI diagram generation fails not because models are weak, but because there's no production discipline. Fact graph first, a frozen label whitelist, literal label audits, branch degradation, and provenance files. Packaged as a Claude Code skill, this passed audit on the first candidate in two consecutive projects. Fully open source.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3sdsb0u4s7t193upgi3h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3sdsb0u4s7t193upgi3h.png" alt="Hero: a pile of chaotic sketch cards passes through a gate and emerges as one clean architecture diagram — generated through AnyCap for this page" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Why "looks right" is not a bar for technical diagrams
&lt;/h2&gt;

&lt;p&gt;Prompt an image model for "a RAG architecture diagram" and you get something pretty, convincing, and wrong:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;arrows reversed (data flow drawn as control flow)&lt;/li&gt;
&lt;li&gt;typos and duplicated labels&lt;/li&gt;
&lt;li&gt;nodes that don't exist in your system, invented anyway&lt;/li&gt;
&lt;li&gt;worst of all: globally plausible, locally false&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a mood image, close enough is fine. A technical diagram is a &lt;strong&gt;promise&lt;/strong&gt; — readers treat it as the truth of the system. One reversed arrow is worse than no diagram.&lt;/p&gt;

&lt;p&gt;So the acceptance bar is not aesthetics. It's verbatim correctness. And verbatim correctness can't be eyeballed, and definitely can't be gambled on.&lt;/p&gt;

&lt;h2&gt;
  
  
  The method: four steps of pure discipline
&lt;/h2&gt;

&lt;p&gt;I distilled the pipeline into a Claude Code skill, &lt;a href="https://github.com/convergeai-labs/anycap-skills/blob/main/skills/anycap-architecture-diagrams/SKILL.md" rel="noopener noreferrer"&gt;anycap-architecture-diagrams&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8c95br9akhxcczd6re79.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8c95br9akhxcczd6re79.png" alt="The four steps: fact list, frozen contract, three branches, magnifying-glass audit — generated through AnyCap for this page" width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Fact graph first, sanitized first.&lt;/strong&gt; Before any prompt, structure what the figure must say: nodes, edges, exact edge labels. Teaching figures use synthetic systems — never feed a real architecture to a model. A diagram is a condensed system map; it leaks what scanners can't see.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Freeze the contract.&lt;/strong&gt; Node list, edge list, and a &lt;em&gt;verbatim&lt;/em&gt; label whitelist — frozen before generation. Nothing outside the whitelist may appear in pixels.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Three branches, chosen by difficulty.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;T1 full-generation&lt;/em&gt;: the model owns all pixels — viable up to ~6 nodes / 6 edges&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Hybrid&lt;/em&gt;: the model paints a no-text plate; labels and connectors are overlaid deterministically&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Deterministic retreat&lt;/em&gt;: hand-authored SVG/Mermaid; the model touches zero semantics&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. Literal audit via image-read, not vibes.&lt;/strong&gt; After generation, a vision model checks the whitelist word by word: every label present, every arrow direction correct, zero extra text. Any miss is a FAIL.&lt;/p&gt;

&lt;p&gt;The rule: &lt;strong&gt;one failure → regenerate naming the defect; two failures → switch branches.&lt;/strong&gt; Never keep pulling the slot machine on the same branch.&lt;/p&gt;

&lt;h2&gt;
  
  
  Measured results — and the ceiling
&lt;/h2&gt;

&lt;p&gt;Two real projects produced hard data:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A RAG reference architecture&lt;/strong&gt; (synthetic, 6 nodes / 6 edges): T1 passed the full audit on the first candidate — every label verbatim, every arrow correct. &lt;a href="https://github.com/convergeai-labs/anycap-examples/tree/main/entries/2026-08-rag-reference-architecture" rel="noopener noreferrer"&gt;Full provenance&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A diagram grammar gallery&lt;/strong&gt;: one synthetic system (a PR review bot), five grammars chosen by viewer question — context, sequence, state machine, data flow, control loop. All five passed first-candidate audits. &lt;a href="https://github.com/convergeai-labs/anycap-examples/tree/main/entries/2026-08-diagram-grammar-gallery" rel="noopener noreferrer"&gt;Gallery&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The ceiling is real too: &lt;strong&gt;past ~6×6, T1 enters a fix-one-break-another carousel.&lt;/strong&gt; Repair label A and label B drifts. An 8-node/8-edge figure never converged in our tests. So the skill hard-codes it: complex figures go hybrid or deterministic immediately.&lt;/p&gt;

&lt;h2&gt;
  
  
  Style breakout: from "themed Mermaid" to editorial
&lt;/h2&gt;

&lt;p&gt;Correct is the floor. The first version of every figure passed label audit and was still rejected:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"No different from Mermaid, and the colors are ugly."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Dark dashboard backgrounds, rainbow card walls — the default AI aesthetic. The fix was an &lt;strong&gt;editorial language&lt;/strong&gt;: warm-white canvas (#FAFAF7), navy (#1E3A5F) structure, one or two restrained accents, a bold title top-left, a one-line takeaway caption at the bottom.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuexeldvz3i5hh3gduunr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuexeldvz3i5hh3gduunr.png" alt="v1 dark dashboard vs v2 editorial: same facts; v1 passed every label check and was still rejected" width="800" height="251"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Notably, the style upgrade shipped via the &lt;em&gt;deterministic branch&lt;/em&gt; — hand-authored SVG, zero model involvement. Which is exactly why branches exist: when T1 can't get you there, you don't give up; you deliver deterministically.&lt;/p&gt;

&lt;p&gt;One more lesson: models improvise logos. One context figure came back with an invented GitHub octocat and an OpenAI-ish swirl. The prompt now states flatly: text only inside cards, no brand logos, no icons.&lt;/p&gt;

&lt;h2&gt;
  
  
  Provenance: evidence as an asset
&lt;/h2&gt;

&lt;p&gt;Every figure ships with a &lt;code&gt;.prompt.md&lt;/code&gt; sidecar: frozen prompt, model + request ID, the literal audit instruction, audit result, rejected directions. Anyone can reproduce, review, or challenge.&lt;/p&gt;

&lt;p&gt;The figure stops being "a PNG" and becomes an auditable production record. Revisiting it two months later doesn't require archaeology; defending it doesn't require memory.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ln&lt;/span&gt; &lt;span class="nt"&gt;-s&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$PWD&lt;/span&gt;&lt;span class="s2"&gt;/skills/anycap-architecture-diagrams"&lt;/span&gt; ~/.claude/skills/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Method skills: &lt;a href="https://github.com/convergeai-labs/anycap-skills" rel="noopener noreferrer"&gt;convergeai-labs/anycap-skills&lt;/a&gt; — 7 skills: brand marks, architecture diagrams, media, research, human-in-the-loop, access, content&lt;/li&gt;
&lt;li&gt;Evidence: &lt;a href="https://github.com/convergeai-labs/anycap-examples" rel="noopener noreferrer"&gt;convergeai-labs/anycap-examples&lt;/a&gt; — 5 entries, all with full provenance&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  FAQ
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Why not just use Mermaid?&lt;/strong&gt;&lt;br&gt;
Do. Mermaid/deterministic SVG is a first-class branch, not a consolation prize. The generation branch owns the explanatory layer's expressiveness; exact topology always belongs to the deterministic layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why freeze labels?&lt;/strong&gt;&lt;br&gt;
Because models will improvise them, every time. Improvisation in a technical figure isn't creativity — it's a defect. The whitelist confines creativity to composition and style, and locks semantics.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What about CJK labels?&lt;/strong&gt;&lt;br&gt;
Short labels can be generated but must pass the verbatim image-read audit; past ~18 labels, go no-text plate + deterministic overlay. Don't burn generations on it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Is this diagram-specific?&lt;/strong&gt;&lt;br&gt;
The gates + audit + provenance skeleton is generic. The brand-mark skill (32px decision boards, i2i color-preserving recolors) and a music bake-off (decided on contract adherence, not vibes) in the same org run on the same discipline.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;All work produced with Claude Code + AnyCap. Skills MIT, examples CC-BY.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>architecture</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
