AI-Era Open Source Architecture Diagramming: Comparing oh-my-mermaid, architecture-diagram-generator, and fireworks-tech-graph

Introduction

A picture is worth a thousand words in software engineering and system architecture. However, maintaining up-to-date technical diagrams is traditionally a developer's nightmare. They take hours to draw, and the moment the code changes, manual documentation drifts and becomes obsolete.

With the rise of LLMs and AI programming assistants (such as Claude Code, Cursor, and Windsurf), the concept of "Text-to-Diagram" and "Code-to-Diagram" has reached a tipping point. AI can analyze vast codebases and output structural diagrams instantly, or turn raw directories into clean interactive maps.

In this article, we will examine three notable open-source, AI-integrated diagramming tools through concrete rendering examples:

1. oh-my-mermaid (OMM): Designed for recursive codebase reverse engineering and auto-generated documentation.
2. architecture-diagram-generator (ADG): Tailored for high-fidelity, dark-themed system and cloud infrastructure topologies.
3. fireworks-tech-graph (FTG): Engineered as an AI Agent "external skill" to compile natural language prompts into technical drawings.

We will dive deep into their core mechanisms, target use cases, and technical differences, demonstrating how to combine them into an automated documentation workflow.

Core Positionings, Features & Examples

Let's look at the philosophy, strengths, and actual rendering outputs of each tool:

1. oh-my-mermaid: Recursive Codebase Reverse Engineering

GitHub: oh-my-mermaid/oh-my-mermaid

oh-my-mermaid’s goal is to "generate navigable architecture diagrams and Markdown docs directly from existing source code". It uses recursive node parsing to prevent cluttering, allowing users to drill down into sub-components.

💡 Rendering Example:

When scanning a multi-module repository using OMM, it creates an interactive layout map in your documentation directory. In markdown previewers that support link interaction, users can click components to explore deeper sub-views:

graph TD
    subgraph Project_Root ["Project: AgentUpdate (Root)"]
        direction LR
        Admin["/admin (Astro API & Dashboard)"]
        Website["/website (Astro Frontend)"]
        Database["/database (Prisma & Schema)"]
        Crawler["/crawler (LLM News Processor)"]
        
        Admin -->|Uses Client| Database
        Website -->|Uses Client| Database
        Crawler -->|Writes DB| Database
    end
    
    click Admin href "/docs/omm/admin.md" "View Admin Architecture"
    click Crawler href "/docs/omm/crawler.md" "View Crawler Architecture"

2. architecture-diagram-generator: Dark-Themed System Blueprints

GitHub: Cocoon-AI/architecture-diagram-generator

architecture-diagram-generator focuses on "high-fidelity physical and logical system topologies". It comes with a distinct, tech-themed dark aesthetic and outputs standalone HTML/SVG blueprints.

💡 Rendering Example:

The input for ADG is a simple YAML configuration describing connections between components:

# ADG Input DSL Example
title: "AgentUpdate Cloud Production Topology"
theme: "dark"

components:
  - id: "client"
    label: "Web Clients (Browser)"
    type: "client"
    color: "cyan"
  - id: "alb"
    label: "AWS Load Balancer"
    type: "network"
    color: "amber"
  - id: "api"
    label: "Astro Server Container"
    type: "server"
    color: "cyan"
  - id: "postgres"
    label: "PostgreSQL Database"
    type: "database"
    color: "violet"

connections:
  - from: "client"
    to: "alb"
    label: "HTTPS / Route 53"
  - from: "alb"
    to: "api"
    label: "Target Group"
  - from: "api"
    to: "postgres"
    label: "Prisma Connection"

When compiled, the ADG engine applies its styling conventions (cyan/violet/amber semantic tokens and JetBrains Mono text) to produce a dark system layout:

graph TD
    classDef client fill:#06b6d4,stroke:#0891b2,color:#fff;
    classDef network fill:#f59e0b,stroke:#d97706,color:#fff;
    classDef database fill:#8b5cf6,stroke:#7c3aed,color:#fff;
    
    Client["💻 Web Clients (Browser)"]:::client
    ALB["🔀 AWS Load Balancer"]:::network
    API["⚙️ Astro Server Container"]:::client
    DB["🗄️ PostgreSQL Database"]:::database
    
    Client -->|HTTPS / Route 53| ALB
    ALB -->|Target Group| API
    API -->|Prisma Connection| DB

3. fireworks-tech-graph: The AI Agent's Vector Artist

GitHub: yizhiyanhua-ai/fireworks-tech-graph

fireworks-tech-graph is a Python-based prompt-to-SVG/PNG rendering engine designed as a diagramming plugin for autonomous AI Agents. It helps LLMs convert abstract workflows, sequences, and logic chains into vector graphs.

💡 Rendering Example:

If you request your CLI Agent (e.g., Claude Code) with this prompt:

Developer/Agent: "Draw a sequence diagram of our LLM News Rewrite agent workflow, showing the cron trigger, news crawler fetching raw HTML, sending it to Gemini 3.5 Flash for rewriting. On 429, fall back to Gemini 3.1 Flash-Lite, and write the output to PostgreSQL database."

The Agent automatically structures parameters and calls the FTG engine to generate a vector SVG (and exports a high-DPI PNG). The sequence output renders as follows:

sequenceDiagram
    autonumber
    actor System as Cron Trigger
    participant Crawler as News Crawler
    participant LLM as Gemini Flash
    participant Fallback as Gemini Flash-Lite
    participant DB as PostgreSQL
    
    System->>Crawler: Trigger Crawl Job
    Crawler->>Crawler: Fetch Raw HTML
    Crawler->>LLM: Send content for rewrite (responseMimeType: JSON)
    alt Success
        LLM-->>Crawler: Return Clean JSON Summary
    else 429 Rate Limit
        Crawler->>Fallback: Retry request to Backup
        Fallback-->>Crawler: Return Clean JSON Summary
    end
    Crawler->>DB: Write Upserted Article row
    DB-->>System: Job Finished

Technical Comparison

The architectural routes and applications of these tools differ fundamentally:

Connecting the Dots: Building a Unified Workflow

Rather than competing, these three tools form a unified diagramming pipeline across the development lifecycle.

Here is how you can connect them:

graph TD
    A[Design Phase] -->|Use FTG / ADG| B[Draw VPC & Microservices Topology]
    B --> C[Implementation Phase: Codebase Created]
    C -->|Use OMM| D[Auto-Generate Code-Level Call Graphs 
 & Navigable Docs]
    D -->|Use FTG| E[Draw Agent Algorithms & UML in README]
    E --> F[Fully Automated Documentation Pipeline]

1. Design Phase (System Blueprinting): Use architecture-diagram-generator (ADG) to design cloud networks, subnets, and API components, creating a standardized dark-themed design draft.
2. Logic Detailing (Process Mapping): For complex logic blocks (like callback loops or agent routing), prompt Claude Code to invoke fireworks-tech-graph (FTG) to generate flowcharts or UML sequence SVGs, embedding them in the architecture docs.
3. Repository Maintenance (Code Mapping): As the code grows, run oh-my-mermaid (OMM) to scan directories recursively. This produces interactive call flows and API layouts, saving you from writing outdated manual document logs.

[AgentUpdate Depth Analysis]

From the perspective of AI engineering, these tools highlight the shift toward "Diagrams as Code" and "Transparent Contexts".

Manual drawing (using Visio, Draw.io, or Figma) relies on visual grids and pixel manipulation. While intuitive for humans, it is highly inefficient for AI Agents, which excel at textual logic rather than pixel alignment.

• OMM solves the "Input Vector": translating code hierarchies into structured text (Mermaid) that AI can read and audit.
• ADG solves the "Standard Output": separating data from styling, letting AI focus on node relations while the renderer manages layouts and alignments.
• FTG solves the "CLI Interface": allowing terminal-restricted tools (like Claude Code) to output visual assets.

In the near future, we will see "autonomous documentation" become the norm. By integrating these engines, compilers will soon run static analyses, call style-renderers, and auto-update codebase diagrams in CI/CD pipelines without human intervention.