Visualizing 31 Agents as a FigJam-Style Architecture Diagram

The Problem

Architecture diagrams are the thing everyone needs and nobody wants to make.

You know you should document your system. You know the team needs a visual of how components connect. But the last time you opened FigJam, you spent 45 minutes aligning boxes and still ended up with something that looked like a 5-year-old drew your infrastructure.

At PyratzLabs, we run 31 AI agents across 8 teams. The architecture is non-trivial: agents have dependencies, cron schedules, shared resources, and handoff points. New team members need to understand the topology. Investors want to see the system. We need the diagram.

But maintaining a diagram in FigJam or Miro means someone has to update it every time we add or remove an agent. Nobody does. The diagram goes stale. Someone makes a decision based on outdated topology. Things break.

We needed a diagram that updates as fast as our architecture changes.

The Solution

The create-workflow-diagram skill takes a plain-text description of a system and renders it as a beautiful PNG with connected nodes, arrows, labels, and color-coding. FigJam aesthetics. Miro-quality layout. Zero manual drag-and-drop.

Since the input is text, updating the diagram is as simple as editing a description and re-running the agent.

The Process (with code/config snippets)

The input is plain text — structured, but just text:

Create an architecture diagram of our AI agent system:

Title: PyratzLabs Agent Architecture — 31 Agents, 8 Teams

Teams (color-coded):
- Command (purple): Alfrawd (master), Dispatcher
- Product (blue): Vivi (PM), Research Agent
- Engineering (green): Thom (lead), Code Agent, Deploy Agent, Test Agent
- Finance (gold): Warren (CFO), Accounting Agent, Tax Agent
- Investment (red): Hari (analyst), Screening Agent, Due Diligence Agent
- Marketing (orange): Peiy (CMO), Content Agent, SEO Agent, Social Agent, Email Agent
- Design (pink): Jack (lead), UI Agent, Figma Agent, Slides Agent
- Operations (gray): Cron Agent, Monitor Agent, Backup Agent, Health Agent

Connections:
- Alfrawd → all team leads (Vivi, Thom, Warren, Hari, Peiy, Jack)
- Dispatcher → Cron Agent, Monitor Agent
- Vivi → Research Agent, Thom, Jack
- Peiy → Content Agent, SEO Agent, Social Agent, Email Agent
- Thom → Code Agent, Deploy Agent, Test Agent
- Warren → Accounting Agent, Tax Agent
- Hari → Screening Agent, Due Diligence Agent

Layout: Alfrawd at top center, teams radiating outward
Style: Rounded rectangles, soft shadows, connecting arrows with labels

The agent generates an HTML diagram with nodes and connections, then screenshots it to PNG:

<div class="diagram" style="width: 1400px; height: 900px; position: relative;
     background: #FAFAFA; border-radius: 16px; padding: 40px;">

  <!-- Command Team -->
  <div class="node" style="position: absolute; top: 40px; left: 620px;
       background: #7C3AED; color: white; padding: 12px 24px;
       border-radius: 12px; font-weight: 600;
       box-shadow: 0 4px 12px rgba(124,58,237,0.3);">
    🎩 Alfrawd
  </div>

  <!-- Team lead nodes arranged radially -->
  <div class="node" style="position: absolute; top: 180px; left: 200px;
       background: #3B82F6; color: white; padding: 10px 20px;
       border-radius: 10px; box-shadow: 0 4px 12px rgba(59,130,246,0.3);">
    Vivi (Product)
  </div>

  <!-- SVG layer for arrows -->
  <svg class="connections" style="position: absolute; top: 0; left: 0;
       width: 100%; height: 100%; pointer-events: none;">
    <defs>
      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
              markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="#94A3B8"/>
      </marker>
    </defs>
    <!-- Alfrawd → Vivi -->
    <line x1="660" y1="80" x2="260" y2="180"
          stroke="#94A3B8" stroke-width="2"
          marker-end="url(#arrow)" />
    <!-- ... more connections ... -->
  </svg>
</div>

The rendered PNG output: clean nodes color-coded by team, directional arrows showing reporting lines, and a clear hierarchy from Alfrawd at the top to individual agents at the bottom.

The Results

The killer advantage: version control. The text description that generates this diagram lives in our repo. When we add an agent, we add a line of text. git diff shows exactly what changed. Try that with a FigJam file.

Try It Yourself

Describe your system in plain text. Be specific about:

• Nodes (what they're called, what group they belong to)
• Connections (what connects to what, direction matters)
• Layout preference (hierarchy, radial, left-to-right)
• Color coding (by team, by type, by status)

The agent renders it and gives you a PNG. Want changes? Edit the text. Re-run. 30 seconds.

For architecture that changes monthly, this is the only sustainable approach. FigJam is great for brainstorming. But documentation diagrams should be generated, not crafted.

If your architecture diagram is more than 2 weeks old, it's fiction. Ours regenerates on demand.