Topics / #diagrams-as-code

Diagrams-as-code projects on GitHub

Generating diagrams from textual descriptions and code.

As of , the most-starred Diagrams-as-code projects on GitHub are mermaid (90.7K stars), archify (84.6K stars) and PlotNeuralNet (25K stars). GitHub.Locker tracks 11 Diagrams-as-code repositories with 233.9K stars combined. The fastest-growing on October 16 was archify, with +396 stars in a day.

11Projects
233.9KStars in total
+507Stars in a day
Browse in the catalog →github.com/topics/diagrams-as-code ↗

Hot right now

Most stars gained in a day · Oct 16

+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.

+44

pr-lens

coldteadotai/pr-lens · ★ 2.1K

PR Lens draws every pull request as animated architecture and data-flow diagrams, posted as a comment inside the pull request itself, so you can see what a change does before reading the diff line by line.

+28

mermaid

mermaid-js/mermaid · ★ 90.7K

Mermaid is a JavaScript-based diagramming and charting tool that lets you create flowcharts, sequence diagrams, Gantt charts and more from simple Markdown-inspired text definitions instead of a drag-and-drop editor.

+16

drawio-skill

Agents365-ai/drawio-skill · ★ 10.2K

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.

The all-time top

11 projects · by stars

  1. #1 · mermaid-js/mermaid

    mermaid

    Mermaid is a JavaScript-based diagramming and charting tool that lets you create flowcharts, sequence diagrams, Gantt charts and more from simple Markdown-inspired text definitions instead of a drag-and-drop editor.

    90.7K
  2. #2 · 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
  3. #3 · HarisIqbal88/PlotNeuralNet

    PlotNeuralNet

    PlotNeuralNet is a collection of LaTeX code for drawing neural network diagrams for reports and presentations, with ready-made examples like FCN-8 and FCN-32.

    25K
  1. 4

    plantuml

    13.4Kplantuml/plantuml · Java

    PlantUML is a tool that generates diagrams (UML and many non-UML types) from plain text descriptions instead of drawing them manually.

  2. 5

    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.

  3. 6

    excalidraw-diagram-skill

    5Kcoleam00/excalidraw-diagram-skill · Python

    It is a skill that gives Claude Code (or any coding agent that supports skills) the ability to generate Excalidraw diagrams from natural language descriptions, with layouts that actually reflect the concept (fan-outs, timelines, convergence) instead of generic boxes.

  4. 7

    pr-lens

    2.1Kcoldteadotai/pr-lens · TypeScript

    PR Lens draws every pull request as animated architecture and data-flow diagrams, posted as a comment inside the pull request itself, so you can see what a change does before reading the diff line by line.

  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

    760ythx-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

    627bybit-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

    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.

Often tagged together