Topics / #diagram

Diagram projects on GitHub

Libraries for creating architecture diagrams, flowcharts, and visual graphs.

As of , the most-starred Diagram projects on GitHub are mermaid (90.7K stars), system-design-101 (90.5K stars) and tldraw (51K stars). GitHub.Locker tracks 26 Diagram repositories with 513.6K stars combined. The fastest-growing on October 16 was answer-me-with-html, with +43 stars in a day.

26Projects
513.6KStars in total
+238Stars in a day
Browse in the catalog →github.com/topics/diagram ↗

Hot right now

Most stars gained in a day · Oct 16

+43

answer-me-with-html

QingYunA/answer-me-with-html · ★ 3.5K

Answer me with HTML is an agent skill that turns a coding agent's long text answers into a single-page HTML with diagrams, tables, or timelines instead of a wall of text. The model only writes a short Markdown draft and a bundled CLI renders the layout, CSS and SVG.

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

+22

system-design-101

ByteByteGoHq/system-design-101 · ★ 90.5K

A free, visual collection of short explainers and cheat sheets covering core system design concepts (APIs, databases, caching, message queues, real-world company architectures) to help you understand how production systems work and prepare for system design interviews.

+21

baoyu-skills

JimLiu/baoyu-skills · ★ 26.7K

A set of 20+ skills by Baoyu that you plug into AI agents like Claude Code and Codex to automate daily work: content generation, diagrams, slide decks, infographics and publishing flows.

The all-time top

26 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 · ByteByteGoHq/system-design-101

    system-design-101

    A free, visual collection of short explainers and cheat sheets covering core system design concepts (APIs, databases, caching, message queues, real-world company architectures) to help you understand how production systems work and prepare for system design interviews.

    90.5K
  3. #3 · tldraw/tldraw

    tldraw

    tldraw is an SDK for building infinite canvas apps in React — a feature-complete canvas engine that you can use out of the box as a whiteboard or extend with custom shapes, tools, and UI.

    51K
  1. 4

    diagrams

    42.7Kmingrammer/diagrams · Python

    Diagrams is a Python library that draws cloud system architecture as code: you describe your AWS, Azure, GCP or Kubernetes setup in Python and get a rendered diagram. It was built for prototyping architecture designs without design tools.

  2. 5

    drawdb

    40Kdrawdb-io/drawdb · JavaScript

    DrawDB is a free online editor for database entity-relationship diagrams: you sketch your schema visually in the browser and turn it into SQL. No account needed.

  3. 6

    Chat2DB

    28.3KOtterMind/Chat2DB · Java

    Chat2DB is a free, cross-platform, local-first database client and SQL workspace for developers, DBAs, analysts, and data teams. It combines a full SQL client with an AI assistant that you plug your own model into.

  4. 7

    baoyu-skills

    26.7KJimLiu/baoyu-skills · TypeScript

    A set of 20+ skills by Baoyu that you plug into AI agents like Claude Code and Codex to automate daily work: content generation, diagrams, slide decks, infographics and publishing flows.

  5. 8

    zipkin

    17.5Kopenzipkin/zipkin · Java

    Zipkin is a distributed tracing system. It gathers timing data from your services to help troubleshoot latency problems, offering both collection and lookup of that data.

  6. 9

    ml-visuals

    17.4Kdair-ai/ml-visuals

    ML Visuals is a free, community-built collection of 100+ professional figures and templates for machine learning, meant to improve science communication in presentations and blog posts.

  7. 10

    drawnix

    14.9Kplait-board/drawnix · TypeScript

    Drawnix is a free, open-source all-in-one whiteboard tool that combines mind mapping, flowcharts, and freehand drawing on a single infinite canvas.

  8. 11

    konva

    14.9Kkonvajs/konva · TypeScript

    Konva.js is an open-source 2D canvas framework for the web, used to build interactive graphics: design editors, whiteboards, diagrams, annotations and maps.

  9. 12

    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.

  10. 13

    mind-map

    12.8Kwanglin2/mind-map · JavaScript

    SimpleMindMap (思绪思维导图) is a mind-map project with two parts: an open-source, framework-independent JavaScript mind-map library plus a web app, and a separate closed-source desktop client with plugins.

  11. 14

    LogicFlow

    11.7Kdidi/LogicFlow · TypeScript

    LogicFlow is an open-source flow chart editing framework: it provides the interactions and editing features flowcharts need, plus flexible node customization and plugins, so you can add flowchart-style editing to your own business system.

  12. 15

    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.

  13. 16

    architecture-diagram-generator

    7.4KCocoon-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.

  14. 17

    Edit-Banana

    5.5KBIT-DataLab/Edit-Banana · Python

    It converts images of static diagrams — flowcharts, multi-level architecture diagrams, technical schematics, scientific formulas — into fully editable DrawIO files, powered by fine-tuned SAM 3 segmentation and multimodal LLMs.

  15. 18

    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.

  16. 19

    axton-obsidian-visual-skills

    3.6Kaxtonliu/axton-obsidian-visual-skills

    A Visual Skills Pack that gives Claude Code the ability to turn plain text into Obsidian Canvas, Excalidraw, and Mermaid diagrams on request.

  17. 20

    learn

    3.6Kamosblomqvist/learn · TypeScript

    'learn' is a personal AI learning system built by the author for the 'pi' agent tool - it packages a teaching philosophy, a visualization skill, quiz/question extensions, and research subagents into a '.pi' configuration that turns pi into a tutor.

  18. 21

    answer-me-with-html

    3.5KQingYunA/answer-me-with-html · JavaScript

    Answer me with HTML is an agent skill that turns a coding agent's long text answers into a single-page HTML with diagrams, tables, or timelines instead of a wall of text. The model only writes a short Markdown draft and a bundled CLI renders the layout, CSS and SVG.

  19. 22

    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.

  20. 23

    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.

  21. 24

    system-atlas

    438inkboard/system-atlas · HTML

    An agent skill that turns an architecture discussion into an explorable isometric atlas: one data file produces both an interactive HTML map and a generated SYSTEM.md text twin.

  22. 25

    rataflow

    186furkankly/rataflow · Rust

    rataflow is a Rust library for building node-based, interactive diagram editors directly inside a terminal, ranging from a static diagram to a fully interactive node editor.

  23. 26

    FigGenie-paper-diagram-skill

    167Sleepy-Avacado/FigGenie-paper-diagram-skill · Python

    FigGenie is an Agent Skill that draws camera-ready, top-conference-style figures for research papers, producing editable vector output (SVG, PDF) and an optional editable PowerPoint deck.

Often tagged together