Diagrams & Flowcharts
Node-graph editors, flowcharts, and architecture diagrams in your app.
Distinct from Whiteboards — these are for structured graphs (workflows, automations, mind maps, state machines, ER diagrams) where edges and nodes have meaning, not freehand drawing.
Node-graph editors (build your own visual workflow tool)
- ★ xyflow (formerly React Flow) — the dominant node-based UI library. Powers the visual editors in n8n, Langflow, Mastra, FlowiseAI, Comfy-style stacks, and countless internal tools. React + Svelte + Vue (in development) builds.
- rete.js — flexible node-graph framework; focus on visual programming use cases.
- Litegraph.js — used by ComfyUI; older but still used.
- drawflow — minimal vanilla JS flow editor.
- JointJS — commercial-grade diagramming; free Core, paid Plus.
- GoJS — commercial diagramming; powerful, paid.
Diagrams as code (text → SVG/PNG)
- ★ Mermaid — text → flowcharts / sequence / ER / Gantt / state / class. The de facto default; renders in GitHub, Notion, Obsidian, every docs framework.
- ★ D2 — newer "diagram script" language; cleaner output than Mermaid; SVG / PNG / animated PDF outputs.
- PlantUML — older text→UML standard.
- dbdiagram.io / dbml — schema-as-code for ER diagrams.
- Eraser, Excalidraw +text — UX-focused diagram tools.
Mind maps
- markmap — Markdown → mind map (interactive SVG).
- jsmind — JS mind map library.
Architecture diagrams (pre-rendered)
- Diagrams.net (drawio) — embeddable; free; the incumbent.
- Cloudcraft — AWS architecture; free for personal.
- Eraser, Excalidraw, Whimsical — modern alternatives.
Graph visualization (data, not editor)
- Cytoscape.js — graph theory networks; large datasets.
- VisGL / deck.gl — for spatial graphs.
- Sigma.js — large graph rendering (WebGL).
- G6 (AntV) — rich graph viz from the Ant team.
- vis-network — network graphs.
State machine viz
- XState Visualizer / Stately Studio — visualize and edit state machines (see State Machines).
Pick this if…
- Build a visual workflow / automation editor: xyflow.
- Render diagrams from text in docs: Mermaid (or D2 if you want prettier).
- ER diagrams from schema: dbdiagram.io / dbml.
- Graph with thousands of nodes: Sigma.js or Cytoscape.js.
- Mind maps from markdown: markmap.