Topics / #flowchart

Flowchart projects on GitHub

Libraries for drawing flowcharts, diagrams and node-based graphs.

As of , the most-starred Flowchart projects on GitHub are mermaid (90.7K stars), archify (84.6K stars) and drawio-desktop (63.5K stars). GitHub.Locker tracks 16 Flowchart repositories with 450.4K stars combined. The fastest-growing on October 16 was diagram-design, with +502 stars in a day.

16Projects
450.4KStars in total
+1KStars in a day
Browse in the catalog →github.com/topics/flowchart ↗

Hot right now

Most stars gained in a day · Oct 16

+502

diagram-design

cathrynlavery/diagram-design · ★ 56.4K

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.

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

The all-time top

16 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 · jgraph/drawio-desktop

    drawio-desktop

    drawio-desktop is the official Electron build of draw.io, a desktop diagramming app that wraps the core draw.io editor so you can build flowcharts and diagrams without a browser.

    63.5K
  1. 4

    diagram-design

    56.4Kcathrynlavery/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

    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.

  3. 6

    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.

  4. 7

    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.

  5. 8

    editor.md

    14.3Kpandao/editor.md · JavaScript

    Editor.md is an open source embeddable online Markdown editor component for web pages, built on CodeMirror, jQuery and Marked.

  6. 9

    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.

  7. 10

    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.

  8. 11

    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.

  9. 12

    cc-wf-studio

    5.4Kbreaking-brake/cc-wf-studio · TypeScript

    CC Workflow Studio is a VSCode extension for visually designing AI agent workflows on a drag-and-drop canvas, then exporting them as Markdown that coding agents like Claude Code, GitHub Copilot, and Codex CLI can run directly.

  10. 13

    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.

  11. 14

    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.

  12. 15

    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.

  13. 16

    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.

Often tagged together