Topics / #diagrams

Diagrams projects on GitHub

Diagram drawing and visual modeling tools

As of , the most-starred Diagrams projects on GitHub are excalidraw (134.3K stars), mermaid (90.8K stars) and archify (86.1K stars). GitHub.Locker tracks 29 Diagrams repositories with 646K stars combined. The fastest-growing on October 19 was diagram-design, with +699 stars in a day.

29Projects
646KStars in total
+1.9KStars in a day
Browse in the catalog →github.com/topics/diagrams ↗

Hot right now

Most stars gained in a day · Oct 19

+699

diagram-design

cathrynlavery/diagram-design · ★ 59K

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.

+479

archify

tt-a1i/archify · ★ 86.1K

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.

+455

pele

obsidianmd/pele · ★ 2.7K

Pele is a lightweight library that renders Mermaid diagrams to SVG, built for speed and with no runtime dependencies.

+86

excalidraw

excalidraw/excalidraw · ★ 134.3K

An open source virtual whiteboard with a hand-drawn look for sketching diagrams, wireframes and whatever you like — use it at excalidraw.com or embed the npm package in your own app.

The all-time top

29 projects · by stars

  1. #1 · excalidraw/excalidraw

    excalidraw

    An open source virtual whiteboard with a hand-drawn look for sketching diagrams, wireframes and whatever you like — use it at excalidraw.com or embed the npm package in your own app.

    134.3K
  2. #2 · 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.8K
  3. #3 · 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.

    86.1K
  1. 4

    diagram-design

    59Kcathrynlavery/diagram-design · HTML

    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.

  2. 5

    jsoncrack.com

    44.5KAykutSarac/jsoncrack.com · TypeScript

    JSON Crack is an open-source tool that visualizes JSON, YAML, XML and CSV data as interactive graphs or trees, making it easier to explore, format, and validate structured data.

  3. 6

    xyflow

    38.7Kxyflow/xyflow · TypeScript

    xyflow is a monorepo of open source libraries for building node-based UIs (flowcharts, diagrams, pipeline editors) — React Flow for React and Svelte Flow for Svelte.

  4. 7

    next-ai-draw-io

    36.3KDayuanJiang/next-ai-draw-io · TypeScript

    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.

  5. 8

    d2

    25.7Kd2lang/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.

  6. 9

    PlotNeuralNet

    25KHarisIqbal88/PlotNeuralNet · TeX

    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.

  7. 10

    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.

  8. 11

    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.

  9. 12

    flowy

    12.1Kalyssaxuu/flowy · JavaScript

    Flowy is a minimal JavaScript library for building flowcharts in web apps: users drag blocks onto a canvas, snap them together, and rearrange them.

  10. 13

    fireworks-tech-graph

    11.8Kyizhiyanhua-ai/fireworks-tech-graph · Python

    fireworks-tech-graph is an Agent Skill that turns natural-language system descriptions into polished technical diagrams: geometry-checked SVG, high-resolution PNG, SVG-to-GIF motion, and offline interactive HTML, with 12 visual styles and full UML support.

  11. 14

    beautiful-mermaid

    11.2Klukilabs/beautiful-mermaid · TypeScript

    beautiful-mermaid is a TypeScript library that renders Mermaid diagrams as polished SVGs or ASCII/Unicode art, built so AI coding assistants and chat UIs can show flowcharts, state machines, and other diagrams inline.

  12. 15

    visual-explainer

    10.5Knicobailon/visual-explainer · JavaScript

    An agent skill for AI coding agents that turns complex terminal output — diagrams, diff reviews, plan audits, data tables, project recaps — into styled, self-contained HTML pages instead of ASCII art and box-drawing tables.

  13. 16

    drawio-mcp

    5.7Kjgraph/drawio-mcp · JavaScript

    The official draw.io MCP server: it lets LLMs and AI assistants create diagrams and open them in the draw.io editor, from inline chat previews to .drawio files on disk.

  14. 17

    excalidraw-mcp

    5.5Kexcalidraw/excalidraw-mcp · TypeScript

    It's an MCP server that lets an AI assistant draw interactive, hand-drawn style Excalidraw diagrams right inside the chat, with smooth camera panning/zooming and fullscreen editing.

  15. 18

    axton-obsidian-visual-skills

    3.7Kaxtonliu/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.

  16. 19

    smart-excalidraw-next

    3.5Kliujuntao123/smart-excalidraw-next · JavaScript

    Smart Excalidraw is an AI-powered drawing tool that turns natural-language descriptions into professional diagrams (flowcharts, architecture diagrams, ER diagrams, mind maps, etc.) rendered on an Excalidraw canvas.

  17. 20

    oh-my-mermaid

    3.2Koh-my-mermaid/oh-my-mermaid · TypeScript

    Oh-my-mermaid (omm) has your AI coding assistant scan a codebase and generate architecture diagrams and documentation (Mermaid diagrams plus description/context/constraint/concern/todo fields) so humans can actually understand the code, not just the AI that wrote it.

  18. 21

    pele

    2.7Kobsidianmd/pele · TypeScript

    Pele is a lightweight library that renders Mermaid diagrams to SVG, built for speed and with no runtime dependencies.

  19. 22

    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.

  20. 23

    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.

  21. 24

    dsh-univer-office

    574dream-num/dsh-univer-office · TypeScript

    dsh-univer-office is a plugin for DeepSeek Harness (DSH) that gives its agent a real office environment — spreadsheets, documents, presentations, lightweight databases (Base), and canvases (Board) — all in one runtime, with every change reviewable before you accept it.

  22. 25

    explainer

    449mizchi/explainer · HTML

    This repo provides Claude Code skills that help an AI write explanations tailored to one specific reader, cutting out what that reader already knows, with every claim and figure checked by tools instead of trusted blindly.

  23. 26

    mdxcn

    445shadcn-labs/mdxcn · TypeScript

    mdxcn is a free, open-source set of ASCII-style React components — tables, charts, timelines, flows, and more — meant to sit next to prose in MDX or plain Markdown, designed to be copied into your own project rather than installed as a package.

  24. 27

    cumcm-step-review

    317yuanchen-home/cumcm-step-review · Python

    This is an Agent Skill that provides a complete step-by-step review workflow for writing a CUMCM (China Undergraduate Mathematical Contest in Modeling) paper, compatible with Codex, Claude Code and other agents that support the Agent Skills spec.

  25. 28

    academic-figures-drawer

    219M1n-n9/academic-figures-drawer · Python

    Academic Figures Drawer turns a paper, method description, codebase, or visual reference into a clear, editable, camera-ready academic figure, aimed at ML/AI papers for venues like ICML, NeurIPS, and ICLR.

  26. 29

    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