# Schematic Diagrams Schematic diagrams are simplified visual representations that show the essential elements and relationships within a system while omitting unnecessary details. Unlike realistic illustrations, schematics use standardized symbols, lines, and layouts to convey structure, flow, or connections. They originated in engineering (electrical circuits, architecture) but are used across domains including software ([[UML diagrams]], flowcharts), science (molecular structures), and information design ([[Concept Map]], network diagrams). The power of schematics lies in abstraction—they make complex systems comprehensible by focusing on what matters. The term comes from Greek "skhēma" (form, figure). Good schematic design balances completeness with simplicity: include enough to understand the system, exclude enough to avoid cognitive overload. Key principles include consistent symbol use, clear visual hierarchy, logical spatial arrangement, and appropriate level of abstraction for the audience. Schematics are essential tools for [[Systems Thinking]], enabling us to see patterns, identify relationships, and communicate complex ideas efficiently. They complement textual descriptions by leveraging our visual processing capabilities. ## Types of Schematic Diagrams ``` ┌─────────────────────────────────────────────────────────────┐ │ TYPES OF SCHEMATIC DIAGRAMS │ ├─────────────────────────────────────────────────────────────┤ │ │ │ STRUCTURAL BEHAVIORAL │ │ (What it IS) (What it DOES) │ │ ┌────────────────────┐ ┌────────────────────┐ │ │ │ • Circuit diagrams │ │ • Flowcharts │ │ │ │ • Architecture │ │ • Sequence diagrams│ │ │ │ • Class diagrams │ │ • State machines │ │ │ │ • Network topology │ │ • Data flow │ │ │ │ • Org charts │ │ • Process maps │ │ │ └────────────────────┘ └────────────────────┘ │ │ │ │ CONCEPTUAL SPATIAL │ │ (How it RELATES) (Where it IS) │ │ ┌────────────────────┐ ┌────────────────────┐ │ │ │ • Mind maps │ │ • Floor plans │ │ │ │ • Concept maps │ │ • Site maps │ │ │ │ • Entity-relation │ │ • Geographic maps │ │ │ │ • Venn diagrams │ │ • Layout diagrams │ │ │ └────────────────────┘ └────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Common Schematic Types | Type | Domain | Purpose | |------|--------|---------| | **Circuit diagram** | Electronics | Show electrical connections | | **Flowchart** | Software, business | Show process flow | | **UML diagram** | Software | Model software structure/behavior | | **Network diagram** | IT | Show network topology | | **Architecture diagram** | Building, software | Show system structure | | **Entity-relationship** | Database | Show data relationships | | **Block diagram** | Engineering | Show system components | | **P&ID** | Chemical engineering | Show piping and instrumentation | ## Design Principles | Principle | Description | |-----------|-------------| | **Abstraction** | Show essential elements, hide details | | **Consistency** | Use symbols uniformly throughout | | **Hierarchy** | Organize by importance/level | | **Alignment** | Align elements for visual order | | **Proximity** | Group related elements | | **Flow direction** | Maintain consistent direction (left→right, top→down) | | **Whitespace** | Use space to reduce clutter | | **Labeling** | Clear, concise labels | ## Standard Symbols | Domain | Symbol Examples | |--------|-----------------| | **Electrical** | Resistor (zigzag), capacitor (parallel lines), ground | | **Flowcharts** | Rectangle (process), diamond (decision), oval (terminal) | | **UML** | Rectangle (class), stick figure (actor), arrow (relationship) | | **Network** | Cloud (internet), rectangle (server), cylinder (database) | | **Architecture** | Boxes (components), arrows (data flow), layers | ## Flowchart Symbols ``` ┌─────────────────────────────────────────────────────────────┐ │ STANDARD FLOWCHART SYMBOLS │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ╭─────────╮ │ │ │ Start │ TERMINAL: Start/End points │ │ ╰─────────╯ │ │ │ │ ┌─────────┐ │ │ │ Process │ PROCESS: Action or operation │ │ └─────────┘ │ │ │ │ ◇ │ │ ╱ ╲ DECISION: Yes/No branch │ │ ◇ ◇ │ │ │ │ ╱─────────╲ │ │ │ Data │ DATA: Input/Output │ │ ╲─────────╱ │ │ │ │ │ │ │ ▼ ARROW: Flow direction │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Levels of Abstraction | Level | Detail | Audience | |-------|--------|----------| | **Conceptual** | High-level overview | Executives, stakeholders | | **Logical** | Components and relationships | Architects, designers | | **Physical** | Implementation details | Engineers, developers | ## Benefits | Benefit | Description | |---------|-------------| | **Comprehension** | Complex systems made understandable | | **Communication** | Universal visual language | | **Analysis** | Identify patterns, bottlenecks | | **Documentation** | Persistent system reference | | **Planning** | Design before building | | **Troubleshooting** | Locate problems visually | ## Best Practices | Practice | Rationale | |----------|-----------| | **Start with purpose** | Know what you're communicating | | **Match detail to audience** | Executives vs engineers | | **Use standard symbols** | Leverage shared understanding | | **Maintain consistency** | Same symbol = same meaning | | **Include legend** | Define non-obvious symbols | | **Version control** | Track changes over time | | **Review with stakeholders** | Validate accuracy | ## Tools for Creating Schematics | Tool | Best For | |------|----------| | **draw.io/diagrams.net** | General purpose, free | | **Lucidchart** | Collaboration, templates | | **Mermaid** | Text-based, code-friendly | | **PlantUML** | UML from text | | **Excalidraw** | Hand-drawn style | | **Visio** | Enterprise, Microsoft | | **OmniGraffle** | Mac, professional | | **Figma/FigJam** | Design teams | ## Schematic vs Other Diagrams | Type | Focus | Realism | |------|-------|---------| | **Schematic** | Function, relationships | Abstract, symbolic | | **Technical drawing** | Exact dimensions | Precise, to scale | | **Illustration** | Appearance | Realistic | | **Sketch** | Quick idea capture | Informal | ## References - Tufte, E. (1983). *The Visual Display of Quantitative Information* - Few, S. (2012). *Show Me the Numbers* - https://en.wikipedia.org/wiki/Schematic ## Related - [[Visual Thinking]] - [[Systems Thinking]] - [[UML]] - [[Flowcharts]] - [[Technical Writing]] - [[Architecture Diagrams]] - [[Concept Map]] - [[Mind Maps]] - [[Information Design]]