<?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: CloudSketch AI</title>
    <description>The latest articles on DEV Community by CloudSketch AI (@cloudsketchai).</description>
    <link>https://dev.to/cloudsketchai</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%2F4189345%2F446ba964-213d-4bcd-9f90-0cad5024f9d7.png</url>
      <title>DEV Community: CloudSketch AI</title>
      <link>https://dev.to/cloudsketchai</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cloudsketchai"/>
    <language>en</language>
    <item>
      <title>We drew the same architecture diagram three times. So we taught it to shrink itself.</title>
      <dc:creator>CloudSketch AI</dc:creator>
      <pubDate>Mon, 19 Oct 2026 15:00:00 +0000</pubDate>
      <link>https://dev.to/cloudsketchai/we-drew-the-same-architecture-diagram-three-times-so-we-taught-it-to-shrink-itself-4515</link>
      <guid>https://dev.to/cloudsketchai/we-drew-the-same-architecture-diagram-three-times-so-we-taught-it-to-shrink-itself-4515</guid>
      <description>&lt;p&gt;Every architecture diagram has three audiences, and each one wants a different diagram.&lt;/p&gt;

&lt;p&gt;The engineer wants everything: every service, every queue, every table that has ever existed. Leave out one Redis cache and you'll hear about it in the retro.&lt;/p&gt;

&lt;p&gt;The manager wants the main flow. "Just show me how an order gets from the app to the warehouse."&lt;/p&gt;

&lt;p&gt;The CEO wants five boxes and an arrow that says "money comes in here".&lt;/p&gt;

&lt;p&gt;So we drew it three times. By the next sprint, the three versions disagreed with each other. One said "Order Service", one said "Ordering API", and the third had quietly lost the payment provider. Nobody noticed until a demo. (Somebody always notices at a demo.)&lt;/p&gt;

&lt;h2&gt;
  
  
  The idea: one diagram, three zoom levels
&lt;/h2&gt;

&lt;p&gt;We're building &lt;a href="https://cloudsketchai.com" rel="noopener noreferrer"&gt;CloudSketch AI&lt;/a&gt;: you describe a system in plain English and get an editable Mermaid diagram. We wanted to fix exactly this problem. One diagram, three detail levels, always in agreement:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Extreme:&lt;/strong&gt; everything. Engineers are happy.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Standard:&lt;/strong&gt; the main path. Managers are happy.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Executive:&lt;/strong&gt; the big picture. The CEO is happy, and asks for a bigger font.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The tempting way is to ask the AI three times. We didn't, because:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Three calls cost three times as much.&lt;/li&gt;
&lt;li&gt;Three answers drift apart, which is the exact problem we were trying to solve.&lt;/li&gt;
&lt;li&gt;Nobody wants to wait five seconds after clicking a tab.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So the AI writes &lt;strong&gt;one&lt;/strong&gt; diagram, the full one. The other two levels are worked out from it in the browser by plain code. Switching is instant, and free.&lt;/p&gt;

&lt;h2&gt;
  
  
  The one rule: levels must nest
&lt;/h2&gt;

&lt;p&gt;If a box is in Executive, it must be in Standard. If it's in Standard, it must be in Extreme. A summary that shows something the detailed view doesn't is not a summary. It's fan fiction.&lt;/p&gt;

&lt;p&gt;That sounds obvious, but it rules out the easy trick of "keep the top N most important boxes". Instead, each level is cut down from the one above it: Standard keeps about 70% of the boxes, Executive about 45%.&lt;/p&gt;

&lt;h2&gt;
  
  
  "Important" means something different in every diagram
&lt;/h2&gt;

&lt;p&gt;This is where we learned humility. One "drop the least-connected boxes" rule produced nonsense, so every diagram type got rules of its own:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Flowcharts:&lt;/strong&gt; keep the main path and its decisions. Drop a decision diamond but keep its "Yes" arrow, and you get a "Yes" floating in space, answering a question nobody asked.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Sequence diagrams:&lt;/strong&gt; keep the requests; the replies are the first to go.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use case diagrams:&lt;/strong&gt; actors stay outside the system box. Always. (We fixed this one last week. The actors kept wandering in.)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A C4 context diagram with three boxes:&lt;/strong&gt; leave it alone. There's nothing to summarise in three boxes.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The bug that taught us the most
&lt;/h2&gt;

&lt;p&gt;Sankey diagrams carry numbers, and numbers are not allowed to lie.&lt;/p&gt;

&lt;p&gt;One of our test diagrams had flows that split and then joined up again. At Extreme, "Invoices" received 100. At Standard, we kept one of its two incoming flows and dropped the other, and the chart proudly announced: &lt;strong&gt;Invoices: 40&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Sixty invoices, gone. Accounting would like a word.&lt;/p&gt;

&lt;p&gt;The fix: after cutting, we check every box's total against the full diagram. If a box would show only part of what flows into it, the cut part moves to an "Other" box instead of disappearing. Now every box shows its true number at every level. That check is a unit test, so it can't quietly break again.&lt;/p&gt;

&lt;h2&gt;
  
  
  Still not perfect
&lt;/h2&gt;

&lt;p&gt;It's rules, not magic. Now and then Standard drops a box you'd have kept. The Mermaid code is always one click away, so you get the final say.&lt;/p&gt;

&lt;h2&gt;
  
  
  Your turn
&lt;/h2&gt;

&lt;p&gt;How do you handle this? One diagram per audience? One giant diagram and a laser pointer? Or should we let you pin the boxes that must survive every level?&lt;/p&gt;

&lt;p&gt;Tell us in the comments. We read every one, and the good ideas tend to end up in the product. 🙂&lt;/p&gt;

&lt;p&gt;&lt;em&gt;CloudSketch AI is at &lt;a href="https://cloudsketchai.com" rel="noopener noreferrer"&gt;cloudsketchai.com&lt;/a&gt;. Your first few diagrams need no sign-up.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>webdev</category>
      <category>showdev</category>
      <category>mermaid</category>
    </item>
  </channel>
</rss>
