Published on 2026-02-22

History of Diagrams — From Flowcharts to Code

A fascinating history of how engineers and scientists moved from hand-drawn schematics to today's text-based diagram tools like Mermaid, Graphviz, and D2.

Before there was Mermaid, PlantUML, or D2, there were hand-drawn boxes on whiteboards and meticulously crafted schematic drawings. The history of technical diagrams is a story of increasing abstraction — moving from physical drawings to symbolic languages to code.

The Pre-Digital Era: Paper and Pen

The oldest known technical diagrams are engineering schematics and architectural blueprints dating back thousands of years. But the modern concept of a “diagram” as a thinking tool — rather than a construction guide — emerged in the nineteenth and twentieth centuries.

Herman Hollerith (1889) developed punch-card data flow systems that required diagrammatic representation. Frank Gilbreth (1921) created the first formal “process chart” to document manufacturing workflows — precursor to the modern flowchart.

The Flowchart is Born: 1940s–1950s

The flowchart as we know it was formalised in 1947 by Herman Goldstine and John von Neumann at the Institute for Advanced Study. They needed a way to plan the logic of early computer programs before writing a single line of code.

The American National Standards Institute (ANSI) standardised flowchart symbols in 1966 (ANSI X3.5), defining:

• Rectangles for process steps
• Diamonds for decisions
• Parallelograms for input/output
• Ovals for start/end

These same symbols are still used in Mermaid flowcharts today.

The UML Revolution: 1990s

As object-oriented programming took hold in the early 1990s, software teams needed a way to model their designs before implementation. Three methodology wars were raging simultaneously:

• Grady Booch — the Booch method (1991)
• James Rumbaugh — Object Modeling Technique (OMT, 1991)
• Ivar Jacobson — OOSE and use case diagrams (1992)

In 1994, Booch, Rumbaugh, and Jacobson joined Rational Software and unified their methods into the Unified Modeling Language (UML). UML 1.0 was released in 1997 and adopted by the Object Management Group (OMG) as a standard.

UML defined 14 diagram types covering structure (class, component, deployment) and behaviour (sequence, activity, state machine). It remains the dominant formal notation for software design — and is the basis for PlantUML today.

The Birth of Graphviz: 1991

While UML focused on software design, graph researchers at AT&T Bell Labs needed a way to render arbitrary mathematical graphs automatically. In 1991, the Graphviz project created the DOT language — a simple text format for describing graphs — along with layout algorithms that automatically position nodes and edges.

Graphviz’s layout algorithms (dot, neato, fdp, circo, twopi) remain the most sophisticated automatic graph layout tools ever built. Graphviz is still actively maintained and used by millions of developers for generating dependency graphs, call graphs, and state machine diagrams.

The Web and “Diagrams as Code”: 2000s–2010s

The web era created demand for diagramming tools that ran in browsers and integrated with web-based documentation. Key milestones:

Why “Diagrams as Code” Won

The shift from GUI-based tools (Visio, Lucidchart, draw.io) to text-based diagram tools is driven by the same forces that drove plain-text documentation:

1. Version control — text diffs are readable; binary diagram files are not
2. Automation — diagrams can be generated programmatically from code or data
3. Portability — text files open in any editor; proprietary formats lock you in
4. Speed — typing A --> B is faster than dragging boxes and arrows
5. Reproducibility — the same source always produces the same diagram

Diagrams Today

Modern diagram tools have stratified into specialised niches:

• General flowcharts: Mermaid dominates Markdown documentation
• UML: PlantUML remains the gold standard
• Graph structures: Graphviz is still unmatched
• Architecture: D2 and the C4 model define how teams document systems
• Data charts: Vega-Lite brings a grammar-of-graphics approach to code
• Electronics: WaveDrom for timing diagrams; WireViz for hardware wiring

The trend continues toward more integration with code — with tools generating diagrams automatically from running systems, infrastructure definitions (Terraform, Kubernetes), and API schemas (OpenAPI).

The Future

Emerging approaches include:

• AI-assisted diagramming — describing a diagram in natural language and having it generated automatically
• Live system diagrams — diagrams that update in real-time from production metrics
• Bidirectional editing — editing the visual diagram and having the underlying text update automatically

Text-based diagram tools are now a mature, stable part of the software engineering toolchain — and will likely remain so for decades to come.