Tools to Draw an AI Agent Org Chart (2026): A Neutral Comparison
A vendor-neutral comparison of visualisation libraries for AI agent topologies. No “best”. No rankings. The right tool depends on whether the diagram is for a static reference page, an interactive editor, or a one-off slide.
The substance of an AI agent diagram is the topology, not the rendering engine. The patterns documented elsewhere on this site (single-agent, multi-agent, supervisor, hierarchical, human-in-the-loop, evaluator-optimiser) are the substance. The tooling is a stylistic and engineering choice. The choice cascades into bundle size, accessibility, build-time-versus-runtime, SEO, and licensing.
Comparison at a glance
| Tool | Bundle (gz, approx) | Build-time render | SEO (text in SVG) | Licence |
|---|---|---|---|---|
| react-flow | 50-100 KB | No (client-side default) | Limited (renders in browser) | MIT |
| mermaid | 0 KB to user (build-time SSR) | Yes via mermaid-cli | Excellent (SVG with text inline) | MIT |
| D3 | 70-250 KB depending on modules | Possible via JSDOM | Good when SSR-ed | ISC |
| Custom SVG (hand-built) | 0 KB JS | Yes (hand-authored) | Excellent | n/a (your code) |
| excalidraw | Heavy as embed | Static-render path exists | Limited (canvas-rendered) | MIT |
| Hand-drawn line-art SVG | 0 KB JS | Yes (hand-authored) | Excellent | n/a |
Bundle size figures are approximations. Verify per-library on bundlephobia.com for the version you intend to use. Accessed 30 April 2026.
Per-tool deep dives
react-flow
react-flow (reactflow.dev, MIT-licensed, accessed 30 April 2026) is a React library for building node-and-edge editors. The library is excellent for surfaces where the user drags, connects, and rearranges nodes (think: a workflow editor, an agent graph builder, a process designer). It is less appropriate for static reference pages: the default render is client-side, the bundle is in the 50-100 KB gzipped range, and the SVG that ends up in the DOM is constructed at runtime, which limits SEO crawl coverage of the diagram text.
mermaid
mermaid (mermaid.js.org, MIT-licensed, accessed 30 April 2026) is a text-defined diagram language. The killer feature for static reference sites is the mermaid-cli (mmdc) renderer: define a diagram in a `.mmd` file, render it to SVG at build time, and inline the SVG into the page. The mermaid runtime never ships to the user, so the bundle hit is zero. The rendered SVG carries the text labels inline, which the search-index crawl reads natively. Tradeoff: the layout is engine-controlled, which is fine for diagrams that follow the engine’s shape vocabulary and frustrating for diagrams that don’t.
D3
D3 (d3js.org, ISC-licensed, accessed 30 April 2026) is the most flexible option and the heaviest build effort. D3 lets you compute layouts in code and emit SVG with full control over every coordinate, transition, and interaction. For static reference pages, D3 is overkill: the topologies are well-known shapes that hand-built SVG covers more cleanly. For production-scale editorial sites with many bespoke layouts, D3 is the right tool.
Custom SVG (hand-built)
Hand-built SVG is the smallest bundle, the fully controlled aesthetic, and the most build effort. For a small set of canonical diagrams (the seven on this site, for example), hand-built SVG produces the cleanest result. Each diagram is a React component that returns an SVG element with explicit coordinates, text labels, and arrow markers. The text in the SVG is inline, which both screen readers and search-engine crawlers read natively.
excalidraw
excalidraw (excalidraw.com, MIT-licensed library at github.com/excalidraw/excalidraw, accessed 30 April 2026) has a distinctive hand-drawn wireframe aesthetic. As an embedded library it is heavy; as an authoring tool that exports SVG, it is great for one-off slide diagrams. For a reference site that signals editorial precision rather than wireframe sketch, the aesthetic is the wrong reading.
Hand-drawn line-art SVG
The cluster’s own approach (this site, plus whatisanaiagent.com): hand-built SVG with a deliberately simple line-art style, palette restricted to two accents and the cluster ink-navy. Zero KB of JavaScript, full SEO and accessibility, fully controlled aesthetic. The build cost is manual labour per diagram.
Recommendation by use case
For a static reference page. Hand-built SVG for the canonical patterns (one-off effort, full control, zero JS) plus build-time mermaid for per-example diagrams (cheap to add new ones). This is what the site uses.
For an interactive agent-graph editor. react-flow is the right tool. The bundle weight is paid for by the value of dragging and connecting nodes.
For a one-off slide diagram. excalidraw to author, export to SVG, paste into the slide. Or: mermaid Live Editor if the topology is simple enough to fit a mermaid shape.
For high-volume custom layouts at editorial scale. D3 with JSDOM-side rendering at build time. The investment in layout code pays back across many diagrams.
What this site uses
This site uses hand-built SVG (React components emitting SVG with explicit coordinates) for the seven canonical pattern diagrams that appear on the homepage and the per-pattern pages. The same approach is used for the per-example diagrams in the examples gallery and the by-industry pages, because the build environment did not include mermaid-cli at the time of the build. Every diagram ships with a <title> and <desc> for screen readers and a <figcaption> with the source citation.
Affiliate disclosure
Where the parent (Digital Signet) has an Impact Affiliate relationship with one of the tools above, the relationship is disclosed inline. As of April 2026, no such relationships are in place for the tools listed; this page contains no affiliate links. The methodology page records future changes.
Related on this site
- Methodology: the citation discipline for diagrams on this site.
- Examples gallery: where the per-example diagrams live.