Both render a diagram from text instead of a drag-and-drop editor. Which one fits depends on what you're actually drawing.
| Mermaid | Graphviz (DOT) | |
|---|---|---|
| Syntax | Mermaid's own diagram syntax | DOT graph description language |
| Diagram types | Flowcharts, sequence, class, state, ER diagrams, pie charts | General graphs — any nodes-and-edges structure |
| Layout control | Automatic, per diagram type | 8 selectable layout engines (dot, neato, circo, fdp, sfdp, twopi, osage, patchwork) |
| Where else you've seen it | Renders natively in GitHub, GitLab, and Notion | The layout engine behind the graphviz/dot command-line tool |
| Best for | Quick documentation diagrams — a flow, a sequence, a schema | General graph structures where layout choice matters |
The actual distinction
Mermaid is diagram-type-aware: you tell it you want a flowchart or a sequence diagram, and it knows the conventions for drawing one — swimlanes, arrows, lifelines — without you specifying layout. That's exactly why it's become the default for documentation diagrams embedded directly in markdown.
Graphviz doesn't know what a "sequence diagram" is — it only knows nodes and edges, and how to arrange them. That's a feature, not a limitation: it's the right tool when your structure doesn't fit one of Mermaid's named diagram types, or when you specifically need to compare how the same graph looks under different layout algorithms (hierarchical with dot, force-directed with neato, circular with circo) rather than accepting one fixed convention.
Quick answer
- Documenting a process, a flow, an API sequence, or a database schema? Mermaid Diagram Editor — it already knows the conventions for these.
- Drawing a general graph — a dependency tree, a network, a state machine that doesn't fit Mermaid's state-diagram syntax? Graphviz / DOT Viewer — more general, more layout control.
- Need the diagram to render natively where you're pasting it (GitHub README, Notion)? Mermaid — those platforms render Mermaid code blocks directly; DOT isn't natively supported the same way.
- Need to see the same structure under multiple layout algorithms before deciding which reads best? Graphviz — that's specifically what its 8 layout engines are for.