Topics / #architecture-diagram

Architecture-diagram projects on GitHub

Generators that turn descriptions into architecture and SVG diagrams.

As of , the most-starred Architecture-diagram projects on GitHub are archify (84.6K stars), diagram-design (57K stars) and next-ai-draw-io (36.3K stars). GitHub.Locker tracks 13 Architecture-diagram repositories with 243K stars combined. The fastest-growing on October 16 was diagram-design, with +502 stars in a day.

13Projects
243KStars in total
+988Stars in a day
Browse in the catalog →github.com/topics/architecture-diagram ↗

Hot right now

Most stars gained in a day · Oct 16

+502

diagram-design

cathrynlavery/diagram-design · ★ 57K

Diagram Design is an Agent Skill that lets AI coding agents (Claude Code, Codex, Factory Droid, Pi) generate editorial-quality diagrams — 39 types including architecture, flowchart, Gantt, UML class and database schema — as self-contained HTML+SVG files with no Mermaid, no Figma, and no generic rounded boxes.

+396

archify

tt-a1i/archify · ★ 84.6K

Archify is an agent skill that turns a codebase, system description, or plan into a polished, interactive diagram (architecture, workflow, sequence, data flow, or lifecycle) directly inside a coding agent's chat.

+29

gitdiagram

ahmedkhaleel2004/gitdiagram · ★ 18.3K

GitDiagram turns any public or private GitHub repository into an interactive architecture diagram in seconds. You can also replace 'hub' with 'diagram' in any GitHub URL to open its diagram.

+22

next-ai-draw-io

DayuanJiang/next-ai-draw-io · ★ 36.3K

A Next.js web app that lets you create and edit draw.io diagrams by chatting with an AI in natural language, instead of manually dragging shapes.

The all-time top

13 projects · by stars

  1. #1 · tt-a1i/archify

    archify

    Archify is an agent skill that turns a codebase, system description, or plan into a polished, interactive diagram (architecture, workflow, sequence, data flow, or lifecycle) directly inside a coding agent's chat.

    84.6K
  2. #2 · cathrynlavery/diagram-design

    diagram-design

    Diagram Design is an Agent Skill that lets AI coding agents (Claude Code, Codex, Factory Droid, Pi) generate editorial-quality diagrams — 39 types including architecture, flowchart, Gantt, UML class and database schema — as self-contained HTML+SVG files with no Mermaid, no Figma, and no generic rounded boxes.

    57K
  3. #3 · DayuanJiang/next-ai-draw-io

    next-ai-draw-io

    A Next.js web app that lets you create and edit draw.io diagrams by chatting with an AI in natural language, instead of manually dragging shapes.

    36.3K
  1. 4

    d2

    25.6Kd2lang/d2 · Go

    D2 is an open-source diagram scripting language: you describe a diagram as plain text in a .d2 file, and it renders that text into a real diagram.

  2. 5

    gitdiagram

    18.3Kahmedkhaleel2004/gitdiagram · TypeScript

    GitDiagram turns any public or private GitHub repository into an interactive architecture diagram in seconds. You can also replace 'hub' with 'diagram' in any GitHub URL to open its diagram.

  3. 6

    drawio-skill

    10.2KAgents365-ai/drawio-skill · Python

    An agent skill that turns plain-language descriptions and real system sources — code, Terraform, Kubernetes, SQL, OpenAPI — into editable .drawio architecture diagrams, then keeps them synced, tested and exportable.

  4. 7

    architecture-diagram-generator

    7.5KCocoon-AI/architecture-diagram-generator · HTML

    It's a Claude AI skill that turns a plain-English description of your system into a beautiful, dark-themed architecture diagram, rendered as a standalone HTML/SVG file you can open in any browser.

  5. 8

    reladraw

    1.1Kreladraw/reladraw · TypeScript

    reladraw is a text-based diagramming language where you state each node's position relative to other nodes - never raw coordinates - and a resolver works out the exact layout. It ships as a CLI tool, a TypeScript library (parser, resolver, SVG renderer) and an agent skill for AI coding agents.

  6. 9

    live-panel-skill

    764ythx-101/live-panel-skill · JavaScript

    live-panel turns a single JSON config describing a system into an animated architecture diagram - either a terminal-style dark panel or a light-pastel infographic - with packets flowing along wires, a scrolling log, counters and triggers lighting up. It renders to an H.264 mp4 (ready for X/Xiaohongshu) or a live web page, and also ships as a Claude Code SKILL.md.

  7. 10

    svg-diagram

    629bybit-exchange/svg-diagram · JavaScript

    It is an Agent Skill that teaches coding agents like Claude Code and Codex a strict house style for hand-drawn SVG diagrams (architecture, flowchart, sequence, data-flow, lifecycle), plus a zero-dependency linter called svg-lint that checks the finished SVG against that style.

  8. 11

    uml-viewer

    441unclebob/uml-viewer · Clojure

    A live UML class-diagram viewer for your codebase: it draws a project's structure from an EDN intermediate representation, is coupled to an AI agent companion, and lets you drill from components all the way down to source code.

  9. 12

    vibex

    390Raja0sama/vibex · JavaScript

    vibeX reads your Prisma schema, OpenAPI document, GraphQL SDL, or the source code itself and generates five kinds of architecture diagrams (ERD, C4, API endpoints, lifecycle, service links) plus checkable documentation, packaged as one standalone HTML file with no server.

  10. 13

    draw-architecture

    147yulonghe97/draw-architecture · HTML

    This is an agent skill that turns a codebase, architecture doc, or plain-English description of a system into an interactive, pannable canvas diagram — a single self-contained HTML file with click-to-isolate focus, a dark/light switcher, and PNG export.

Often tagged together