Editing Diagram

{{Short description|Symbolic representation of information using visualization techniques}}
{{hatnote group|
{{Other uses}}
{{Further|Chart}}
}}
A '''diagram''' is a symbolic [[Depiction|representation]] of [[information]] using [[Visualization (graphics)|visualization]] techniques. Diagrams have been used since prehistoric times on [[Cave painting|walls of caves]], but became more prevalent during the [[Age of Enlightenment|Enlightenment]].<ref>{{cite book |last1=Eddy |first1=Matthew Daniel |date=2021 |chapter=Diagrams |editor1-last=Blair |editor1-first=Ann |editor2-last=Duguid |editor2-first=Paul |editor3-last=Goeing |editor3-first=Anja-Silvia |editor4-last=Grafton |editor4-first=Anthony |title=Information: A Historical Companion |pages=397–401 |location=Princeton, NJ |publisher=[[Princeton University Press]] |doi=10.2307/j.ctv1pdrrbs.42 |isbn=9780691179544 |oclc=1202730160 |jstor=j.ctv1pdrrbs.42 |s2cid=240873019 |chapter-url=https://www.researchgate.net/publication/351935608}}</ref> Sometimes, the technique uses a [[Three-dimensional space|three-dimensional]] visualization which is then [[graphical projection|projected]] onto a two-dimensional surface. The word ''[[graphics|graph]]'' is sometimes used as a [[synonym]] for diagram.

== Overview ==
The term "diagram" in its commonly used sense can have a general or specific meaning:  
* ''visual information device'' : Like the term "[[illustration]]", "diagram" is used as a collective term standing for the whole class of technical genres, including [[graphics|graphs]], technical drawings and tables.
* ''specific kind of visual display'' : This is the genre that shows qualitative data with shapes that are connected by lines, arrows, or other visual links.

In science the term is used in both ways. For example, Anderson (1997) stated more generally: "diagrams are pictorial, yet abstract, representations of information, and [[map]]s, [[line graph]]s, [[bar chart]]s, [[engineering]] [[blueprint]]s, and [[architect]]s' [[Sketch (drawing)|sketch]]es are all examples of diagrams, whereas photographs and video are not".<ref name="MA97">Michael Anderson (1997). "Introduction to Diagrammatic Reasoning", at ''cs.hartford.edu.'' Retrieved 21 July 2008.</ref> On the other hand, Lowe (1993) defined diagrams as specifically "abstract graphic portrayals of the subject matter they represent".<ref name= "RKL 93">{{cite journal |last=Lowe |first=Richard K. |year=1993 |title=Diagrammatic information: techniques for exploring its mental representation and processing |journal=Information Design Journal |volume=7 |issue=1 |pages=3–18 |doi=10.1075/idj.7.1.01low}}</ref>

In the specific sense diagrams and charts contrast with [[computer graphics]], technical illustrations, [[infographics]], maps, and [[technical drawing]]s, by showing "abstract rather than [[literal translation|literal]] representations of information".<ref name = "LEB 03">{{cite book |first=Lee E. |last=Brasseur |author-link=Lee E. Brasseur |title=Visualizing technical information: a cultural critique |publisher=Baywood Pub |location=Amityville, N.Y |year=2003 |isbn=0-89503-240-6}}</ref> The essence of a diagram can be seen as:<ref name = "LEB 03"/>
* a ''form'' of visual [[Content format|format]]ting devices
* a ''display'' that does not show [[quantitative data]] (numerical data), but rather relationships and abstract information
* with ''building blocks'' such as geometrical shapes connected by [[wikt:line|line]]s, [[arrow]]s, or other visual links.
Or in Hall's (1996) words "diagrams are simplified figures, caricatures in a way, intended to convey essential meaning".<ref name="BSH96">Bert S. Hall (1996). "The Didactic and the Elegant: Some Thoughts on Scientific and Technological Illustrations in the Middle Ages and Renaissance". in: B. Braigie (ed.) ''Picturing knowledge: historical and philosophical problems concerning the use of art in science''. Toronto: University of Toronto Press. p.9</ref> These simplified figures are often based on a set of rules. The basic shape according to White (1984) can be characterized in terms of "elegance, clarity, ease, pattern, simplicity, and validity".<ref name = "LEB 03"/> Elegance is basically determined by whether or not the diagram is "the simplest and most fitting solution to a problem".<ref>{{cite book |last=White |first=Jan V. |title=Using charts and graphs: 1000 ideas for visual persuasion |publisher=Bowker |location=New York |year=1984 |isbn=0-8352-1894-5 |url-access=registration |url=https://archive.org/details/usingchartsgraph00janv }}</ref>

== Diagrammatology ==
[[Diagrammatology]] is the academic study of diagrams. Scholars note that while a diagram may look similar to the thing that it represents, this is not necessary. Rather a diagram may only have [[structural similarity]] to what it represents, an idea often attributed to [[Charles Sanders Peirce]].<ref name=":0">{{Cite book |url=https://www.worldcat.org/oclc/648770148 |title=Studies in Diagrammatology and Diagram Praxis |date=2010 |publisher=College Publications |editor-first1=Olga |editor-last1=Pombo |editor-first2=Alexander |editor-last2=Gerner |isbn=978-1-84890-007-3 |location=London |oclc=648770148}}</ref>{{Rp|page=42}} Structural similarity can be defined in terms of a mapping between parts of the diagram and parts of what the diagram represents and the properties of this mapping, such as maintaining relations between these parts and facts about these relations. This is related to the concept of [[isomorphism]], or [[homomorphism]] in mathematics.<ref name=":0" />{{Rp|page=43}} 

Sometimes certain [[Geometry|geometric]] properties (such as which points are closer) of the diagram can be mapped to properties of the thing that a diagram represents. On the other hand, the representation of an object in a diagram may be overly specific and properties that are true in the diagram may not be true for the object the diagram represents.<ref name=":0" />{{Rp|page=48}} A diagram may act as a means of cognitive extension allowing [[Visual thinking|reasoning]] to take place on the diagram based on which constraints are similar.<ref name=":0" />{{Rp|page=50}}

== Gallery of diagram types ==
{{See also|Commons:Category:Diagrams by type}}

There are at least the following types of diagrams:

===Logical===
* [[Logic]]al or conceptual diagrams, which take a collection of items and relationships between them, and express them by giving each item a 2D position, while the relationships are expressed as connections between the items or overlaps between the items, for example:

<gallery mode=nolines heights=100 class="skin-invert-image">
File:Tree Example.png|[[Tree structure|tree diagram]]
File:Neural network.svg|[[Network diagram]]
File:LampFlowchart.svg|[[Flowchart]]
File:Set intersection.svg|[[Venn diagram]]
File:Alphagraphen.png|[[Existential graph]]
</gallery>

===Quantitative===
* Quantitative diagrams, which display a relationship between two variables that take either [[Discrete mathematics|discrete]] or a [[continuous function|continuous]] range of values; for example:

<gallery mode=nolines heights=100 class="skin-invert-image">
File:Histogram example.svg|[[Histogram]]
File:Graphtestone.svg|[[Bar graph]]
File:Zusammensetzung Shampoo.svg|[[Pie chart]]
File:Hyperbolic Cosine.svg|[[Function graph]]
File:R-car stopping distances 1920.svg|[[Scatter plot]]
File:Hanger Diagram.png|Hanger diagram.
</gallery>

===Schematic===
* [[Schematic]]s and other types of diagrams, for example:
<gallery mode=nolines heights=100>
File:Train schedule of Sanin Line, Japan, 1949-09-15, part.png|[[Time–distance diagram]]
File:Gear pump exploded.svg|[[Exploded view]]
File:US 2000 census population density map by state.svg|[[Population density|Population density map]]
File:Pioneer plaque.svg|[[Pioneer plaque]]
File:Automotive diagrams 01 En.png|[[Three-dimensional|Three-dimensional diagram]]
</gallery>

{{multiple image
   | direction = horizontal
   | total_width = 200
   | footer    = 
   | image1    = Human Chromosomes (crop 2).jpg
   | caption1  = [[Photomicrograph]] of the [[human chromosome]]s
   | image2    = Human karyotype with bands and sub-bands (simple).svg
   | caption2  = Schematic diagram of the same.}}
Many of these types of diagrams are commonly generated using diagramming software such as [[Microsoft Visio|Visio]] and [[Gliffy]].

Diagrams may also be classified according to use or purpose, for example, explanatory and/or [[How To (disambiguation)|how to]] diagrams.

Thousands of diagram techniques exist. Some more examples follow:

== Specific diagram types ==
{{col-begin}}
{{col-2}}
;A
*[[Activity diagram]] used in [[Unified Modeling Language|UML 6/9]] and [[SysML]]

;B
*[[Bachman diagram]]
*[[Booch method|Booch]] – used in [[software engineering]]
*[[Bow-tie diagram]]
*[[Block diagram]]
*[[Business Process Model and Notation|Business Process Diagram]]

;C
*[[Carroll diagram]]
*[[Cartogram]]
*[[Catalytic cycle]]
*[[Computer network diagram]]
*[[Chemical equation]]
*[[Arrow pushing|Curly arrow diagram]]
*[[Diagram (category theory)|Category theory diagrams]]
*[[Cause-and-effect diagram]]
*[[Chord diagram (disambiguation)]]
*[[Circuit diagram]]
*[[Class diagram]] – from [[Unified Modeling Language|UML 1/9]]
*[[Cobweb diagram]]
*[[Communication diagram|Collaboration diagram]] – from [[Unified Modeling Language|UML 2.0]]
*[[Communication diagram]] – from [[Unified Modeling Language|UML 2.0]]
*[[Commutative diagram]]
*[[Comparison diagram]]
*[[Component diagram]] – from [[Unified Modeling Language|UML 3/9]]
*[[Composite structure diagram]] – from [[Unified Modeling Language|UML 2.0]]
*[[Concept map]]
*[[Constellation diagram]]
*[[Context diagram]]
*[[Control flow diagram]]
*[[Cross functional flowchart]]

;D
*[[Data model diagram]]
*[[Data flow diagram]]
*[[Data structure diagram]]
*[[Dendrogram]]
*[[Dependency diagram]]
*[[Deployment diagram]] – from [[Unified Modeling Language|UML 9/9]]
*[[Dynkin diagram]]
*[[Dot and cross diagram]]
*[[Double bubble map]] – used in education
*[[DRAKON|Drakon-chart]]

;E
*[[Entity-relationship diagram]] (ERD)
*[[Event-driven process chain]]
*[[Euler diagram]]
*[[Eye diagram]] – a diagram of a received telecommunications signal
*[[Exploded-view drawing]]
*[[Express-G]]

;F
*[[Family tree]]
*[[Feynman diagram]]
*[[Flow chart]]
*[[Flow process chart]]
*[[Flow diagram]]
*[[Free body diagram]]

;G
*[[Gantt chart]] – shows the timing of tasks or activities (used in [[project management]])
*[[Grotrian diagram]]
*[[Goodman diagram]] – shows the [[fatigue (material)|fatigue]] data (example: for a [[wind turbine]] blades)

;H
*[[Hasse diagram]]
*[[HIPO diagram]]

;I
*[[Internal block diagram (IBD)]] used in [[SysML]]
*[[IDEF0]]
*[[IDEF1]] (entity relations)
*[[Interaction overview diagram]] – from [[Unified Modeling Language|UML]]
*[[Ishikawa diagram]]

;J
*[[Jackson Structured Programming|Jackson diagram]]
*[[Jones diagram]]

;K
*[[Karnaugh map]]
*[[Kinematic diagram]]
*[[Knot diagram]]
{{col-2}}
;L
*[[Ladder logic|Ladder diagram]]
*[[Levi graph]]
*[[Line of balance]]
*[[Link grammar|Link grammar diagram]]

;M
*[[Message sequence chart]]
*[[Mind map]] – used for learning, brainstorming, memory, visual thinking and problem solving
*[[Minkowski diagram|Minkowski spacetime diagram]]
*[[Molecular orbital diagram]]
*[[Motion diagram]]

;N
*[[N2 diagram|N2]]
*[[Nassi–Shneiderman diagram]] or structogram – a representation for [[structured programming]]
*[[Nomogram]]
*[[Network diagram]]

;O
*[[O–C diagram]] – a diagnostic plot of ''observed'' minus ''predicted'' values over time
*[[Object diagram]] – from [[Unified Modeling Language|UML 2/9]]
*[[Organigram]]
*[[Onion model|Onion diagram]] – also known as "stacked [[Venn diagram]]"

;P
*[[Package diagram]] from [[Unified Modeling Language|UML 4/9]] and [[SysML]]
*[[Parametric diagram]] from [[SysML]]
*[[PERT]]
*[[Petri net]] – shows the structure of a [[distributed system]] as a directed [[bipartite graph]] with annotations
*[[Phylogenetic tree]] - represents a [[phylogeny]] (evolutionary relationships among groups of organisms)
*[[Piping and instrumentation diagram]] (P&ID)
*[[Phase diagram]] used to present solid/liquid/gas information
*[[Plant diagram]]
*[[Pressure volume diagram]] used to analyse engines
*[[Pourbaix diagram]]
*[[Process flow diagram]] or PFD – used in [[chemical engineering]]
*[[Program structure diagram]]

;R
*[[Radar chart]]
*[[Radial diagram]]
*[[Requirement diagram]] Used in [[SysML]]
*[[Rich picture]]
*[[Randolph diagram|R-diagram]]
*[[Routing diagram]]

;S
*[[Sankey diagram]] – represents material, energy or cost flows with quantity proportional arrows in a process network
*[[Sentence diagram]] – represents the [[grammar|grammatical]] structure of a [[natural language]] sentence
*[[Sequence diagram]] from [[Unified Modeling Language|UML 8/9]] and [[SysML]]
*[[Specification and Design Language|SDL/GR diagram]] – specification and description Language. SDL is a [[formal language]] used in [[computer science]].
*[[Smith chart]]
*[[Radar chart|Spider chart]]
*[[Spray diagram]]
*[[SSADM]] – structured systems analysis and design methodology (used in [[software engineering]])
*[[Star chart]]/[[Celestial sphere]]
*[[State diagram]] are used for state machines in software engineering  from [[Unified Modeling Language|UML 7/9]] 
*[[Swim lane]]
*[[Syntax diagram]] used in software engineering to represent a [[context-free grammar]]
*[[Systems Biology Graphical Notation]] – a graphical notation used in diagrams of biochemical and cellular processes studied in [[systems biology]]
*[[System context diagram]]
*[[System structure]]
*[[Systematic layout planning]]

;T
*Timing diagram: [[digital timing diagram]]
*Timing diagram: [[Unified Modeling Language|UML 2.0]]
*[[TQM Diagram]]
*[[Tree structure]]
*[[Treemapping|Treemap]]

;U
*[[Unified Modeling Language#Diagrams|UML diagram]] – Unified Modeling Language (used in [[software engineering]])
*[[Use case|Use case diagram]] – from [[Unified Modeling Language|UML 5/9]] and [[SysML]]

;V
*[[Value stream mapping]]
*[[Venn diagram]]
*[[Violin plot]]
*[[Voronoi diagram]]

;W
*[[Warnier-Orr]]
*[[Wedge-dash diagram]]
*[[Williot diagram]]

;Y
*[[Yourdon-Coad]] – see [[Edward Yourdon]], used in [[software engineering]]
{{col-end}}

== See also ==
{{Wiktionary}}
* [[commons:Specific diagram types]]{{snd}}Gallery of many diagram types at Wikimedia Commons
* {{annotated link|Chart}}
* {{annotated link|Data and information visualization}}
* {{annotated link|Diagrammatic reasoning}}
* {{annotated link|Diagrammatology}}
* {{annotated link|Experience model}}
* [[JavaScript graphics library|JavaScript graphics libraries]]{{snd}}Libraries for creating diagrams and other data visualization
* {{annotated link|List of graphical methods}}
* {{annotated link|Mathematical diagram}}
* {{annotated link|PGF/TikZ}}
* {{annotated link|Plot (graphics)}}
* {{annotated link|Table (information)}}

== References ==
{{Reflist}}

== Further reading ==
{{Commons category|Diagrams|lcfirst=yes}}
{{Wikiquote}}
* {{cite book | last = Bounford | first = Trevor | title = Digital diagrams | publisher = Watson-Guptill Publications | location = New York | year = 2000 | isbn = 978-0-8230-1572-6 }}
* Michael Anderson, Peter Cheng, Volker Haarslev (Eds.) (2000). ''Theory and Application of Diagrams: First International Conference, Diagrams 2000''. Edinburgh, Scotland, UK, September 1–3, 2000. Proceedings.
* Garcia, M. (ed.), (2012) ''The Diagrams of Architecture''. Wiley. Chichester.

== External links ==
* [https://systemsorienteddesign.net/what-is-gigamapping/ What is Gigamapping] (website provided by the Oslo School of Architecture and Design)

{{Visualization}}
{{Authority control}}

[[Category:Infographics]]
[[Category:Diagrams| ]]
[[Category:Modeling languages]]